Image for post
Image for post
Ben Neil At Unsplash.com

Get Started With React.js

An Introduction to the Popular Frontend Library

Hussain Arif
May 19 · 8 min read

You’ve done a splendid job in developing the backend part of your web applications. But many people have commented that your applications need to look better, that is, they feel that a good front-end can bring your app to the next level. Upon doing research, you find out that a popular solution for such a task is a library called React.

In this article, we will commence our learning journey to the React.js library.

Introduction

What is React?

React.js builds user interfaces for single-page web apps by dividing the UI into composable elements. React.Js is a UI library, that was originally developed as an in-house library for Facebook, and then it was later open-sourced in 2013. It's famous and mostly used for a multitude of reasons

Why Use React.js?

  • Easy To Learn: Since it requires a minimal understanding of JavaScript and HTML, the learning curve is fairly low. In some cases, we will even be using the ‘vanilla DOM JavaScript API’(you’ll see what I mean later), which means that the programmer doesn’t need to learn anything new before getting started.
  • Reusable Components: If you’ve developed simple websites in HTML, there might’ve been times where you wanted to group a bunch of HTML elements and then save them into some sort of ‘variable’ so that it could be re-used later on. For a developer, this is a lifesaver. React has the ability to implement such a facility.

There are more reasons which are covered in-depth in this well-written article.

Now that we’ve gotten this out of the way, it’s finally time to get our feet wet!

Getting Started: Installing React

First, go to the terminal and then type,

npx create-react-app app-name

This instruction creates a template of a React application with the name of app-name .

Note: npx is not a typo. It is a package runner command included within npm .

Now, you need to navigate to the directory of this application and then view it in your browser like so:

cd app-name
npm start

If the above operation is successful, your browser will open up to a URL of localhost:3000 . This is the output in the browser

Image for post
Image for post
Output in the browser

Now let’s create a simple Hello World! application with this project.

Hello World! — With React

Within your project directory, go to src/index.js and replace the contents of the file index.jsas follows:

Image for post
Image for post
Code for index.js
  • Lines 1 and 2: Importing the react and react-dom libraries. The react module is used to write HTML code within JavaScript(also known as JSX) and react-app is used to execute the render function that will display the contents onto the page.
  • Line 4: Render an h1 element in a container which has an id of root. The explanation of this method is done in the next part.

The output of the code is as follows:

Image for post
Image for post
The output of the code

Note: You might be wondering that HTML tags within JavaScript are incorrect syntax. You’re absolutely right, but the React Library uses its own language that is similar to JavaScript but can use JSX within the language.

The ReactDOM.render method

The ReactDOM.render method can be explained as follows:

Image for post
Image for post
Explanation of the render method

As the arguments suggest, the

  • The first argument(also known as element) specifies which element do you want to display, for instance h1 , p and so on and so forth.
  • The second argument(also known as container) specifies where you want to display the element. In normal convention, it’s a div element with id of 'root' .We use JavaScript DOM API to identify this such element.

Question: Where can I find this div element that has the id of 'root’ ?

Look into the code of the HTML file, public/index.html . Notice at line 31 :

Image for post
Image for post
Line 31 in index.html

All of the elements we specify in the element argument will be displayed within the div element that has the specified id of root .

Thus, the compiler tells the browser that: the element will be displayed within container .

But there are several things you should know when using this method:

Things to know about ReactDOM.render()

The ReactDOM.render method cannot contain two-parent elements in the first argument. The example below is wrong and will give you an error:

Image for post
Image for post
Wrong code

Instead, you can do this:

Image for post
Image for post
Correct code

We can specify one single parent element to display 2 child h1 elements on the page.

We can even display a small unordered list as follows:

Image for post
Image for post
Displaying a list in React

In practical cases though, it’s not feasible to insert 40+ lines of HTML in the render method. This is where Functional Components come into place.

Functional Components

Let’s take this piece of HTML code:

Image for post
Image for post
Can this code be made modular?

As a React developer, it’s not viable to put so many elements within the render method. It is good practice to implement modularity.

You can put the elements you want to render within a separate function.

Core Idea

function ComponentName() {
return(
<component> </component>
)
}
ReactDOM.render(<ComponentName/> , document.getElementById('root'))

component is the HTML element you want to render, like h1 or p .

Basic Example

As an example, let’s rewrite the function of the Hello World! app.

Image for post
Image for post
Basic Functional Components example

Note: Always remember to use return on your elements, otherwise, it will throw an error

To render it,

Image for post
Image for post
Use the function within the render method

As you can notice, we can write our function as a JSX tag.

Keep in mind that you should

  • use self-closing tags.
  • Your function should start with a capital letter.

The code gives the following output

Image for post
Image for post
Code output

Here also, we cannot have multiple parent elements. Like before, we will use one parent element with two child elements.

Image for post
Image for post
Multiple elements in a functional component

Exercise

As a little task, I want you to render an h1 element with your name in it, and then write a list that contains 3 facts about you. Perform this activity using functional components.

Solution: We cannot have two parents elements. Let’s use a div and then insert an h1 element followed by a list(ul) .

And then it will be rendered.

The output of the code is as follows:

Image for post
Image for post
The output of the code

In real-life projects, it is common practice to put your functional components within separate files as it makes your program more modular.

Move Functional Components Into Separate Modules

Let’s say your functional component is too complex. As a developer, you want to move your component into another file so that it can be used in your main file. Thus, this makes your program modular. Furthermore, modularity also makes your code look neater.

Core Idea

First, create a functional component in a separate file. Then, we will export it as follows:

export default ComponentName

ComponentName is the name of your functional component.

Basic Example

Let’s rewrite the above exercise.

Create a new file, called MyApp.js and write your code as follows:

Image for post
Image for post
Functional Component in a separate file
  • Line 1 : Import the react module to use JSX tags within our code
  • Lines 2–12 : Our functional component
  • Line 13 : Export our MyApp function so that it could be used within our index.js file.

Now we can use it in our index.js file like so:

Image for post
Image for post
using components located in a different file
  • Line 3 : We will use the import keyword to use the MyApp component. Always remember to use relative paths to specify your module. First-party modules like react don’t need relative paths.
  • Line 5: Render the MyApp component.

The output of the code is as follows:

Image for post
Image for post
The output of the code

Parent/Child Components

Sometimes, even when writing HTML tags within functions becomes too complex. You cannot write so many lines of code within a function as it seems unreadable.

You can nest your functional components as much as you want

Core Idea

Define basic functional components

function MyFirstComponent() {
return(
<component> </component>
)
}

Use it in a second functional component

function MySecondComponent() {
return (
<div>
<MyFirstComponent/>
<!--further code here -->
</div>
)
}

And then render it

ReactDOM.render(<MySecondComponent/> , 
document.getElementById('root')

Basic Example

As an example, let’s define a footer element in a separate file and then use it.

In a file Footer.js

And then to use it in App.js :

Notice that our Footer element was used in Line 13

Now let’s render App element within index.js

Image for post
Image for post
Rendering App element

Recap

Hello World App

import React from "react"
import ReactDOM from "react-dom"
ReactDOM.render(<h1> Hello World </h1> , document.getElementById('root'))

Functional Components

function MyComponent() {
return(
<component>
</component>
)
}
ReactDOM.render(<MyComponent/> ,
document.getElementById('root')

Functional Components in Another File

  • Define a component, MyComponent.js and export
function MyComponent() {
return(
<component> </component>
)
}
export default MyComponent
  • Use in another file index.js ,
import React from "react"
import ReactDOM from "react-dom"
import MyComponent from "./MyComponent"
ReactDOM.render(<MyComponent/> , document.getElementById('root'))

Nested Components

  • Define the first component, MyComponent.js and export
function MyComponent() {
return(
<component> </component>
)
}
export default MyComponent
  • Define the second component, App.js and export

And then use in index.js

import React from "react"
import ReactDOM from "react-dom"
import App from "./App"
ReactDOM.render(<App/>,
document.getElementById('root')

External Resources:

Conclusion

One thing to remember is that the syntax in React is definitely different than the normal JavaScript syntax. One thing that has worked for me is to play with the code to grasp the topic properly. My advice to you is to do the same — don’t give up!

Stay home, stay safe.

Previous post: Build A Simple Notes App With Node.Js And Mongoose
Next post: The Basics Of Styling And Writing CSS In React

Easyread

Easy read, easy understanding.

Thanks to Zack Shapiro

Hussain Arif

Written by

Programming enthusiast in Karachi,Pak. Happy to share whatever I learn. Instagram:hussainn.arif email: hussainarifkl [at] gmail [dot] com

Easyread

Easyread

Easy read, easy understanding. A good writing is a writing that can be understood in easy ways

Hussain Arif

Written by

Programming enthusiast in Karachi,Pak. Happy to share whatever I learn. Instagram:hussainn.arif email: hussainarifkl [at] gmail [dot] com

Easyread

Easyread

Easy read, easy understanding. A good writing is a writing that can be understood in easy ways

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store