What’s the buzz about React?

Let’s learn the basics

Credits: https://reactjs.org/

React is a JavaScript library for building UI components or an entire single page or multi page Applications. By library I mean, React can just be imported in to any HTML file for specific functions or UI features or you can build just by using React alone.

What makes React so popular?

Let’s take a look at the stats of monthly NPM downloads for React, Vue and Angular since 2017 till September 2019

Credits: daveceddia.com

From the estimate we can see that React leads the pack with 23.7 million downloads. The main reason React stands out is the use of JSX

JSX

Instead of separating the markup and logic in different files (Like in Angular), React components contain both. This is what makes React stand out of the competition. You can seamlessly render the logic and HTML elements within a single Component file which saves you a lot of confusion and managing different files. So coming back to JSX, JSX is like a XML like syntax extension to ECMA script. To put it precise it is like an extension of JavaScript. Consider the below code

const element = <h1> Hello World! </h1>;

The above declaration is a typical JSX element which can then be rendered to the React DOM. Though it is not mandatory to use JSX in React but it is recommended to do so to get most out of React.

Lets create a new React project and learn the main concepts from there.

Dependencies

We will be learning how to build a full React application rather than importing React to HTML. To do that you need to have the following dependencies installed

1. Node.js

2. NPM

3. Any IDE of your choice ( Preferably VS code)

Creating your first React application

Once you have all the dependencies installed lets build your first React application

It is as simple as running the below command

npx create-react-app my-first-react-app

Or if you want to do it via npm you can install a npm library and then use that to create the application

npm install create-react-app

And then run

create-react-app my-first-react-app

You can give any desired name instead of “my-first-react-app”. Once you run the command npm will install all the dependency packages required to run react and it will create a project folder in your current working directory. You can copy the created folder path and open it in Visual Studio Code ( Or your desired IDE) to get the following folder structure

React folder structure

Lets look in to the basic attributes

Components

Components are the individual JavaScript files that return JSX to display on the screen. You can simply create a new JavaScript file and can code the component in one of the two ways.

1. Functional Components
2. Class Components

Functional Components

Functional components are simple ES6 functions which accept props as an argument and return a JSX to render on the screen.

function firstComponent(props){
return <div> Hello world! </div>
}
export default firstComponent;

Or if you want to use the ES6 arrow function

const Hello = props => (<div> Hello World! </div>);

The difference from the class component is that class components allow for state and life-cycle methods. However, after React 16.8 update functional components can use hooks to make use of the state as well.

Class components

Class components in React are classes which extend the “Component” class from React library. They should have a render function which return the sufficient JSX code to render in the screen.

The below is a simple class component in React

import React, { Component } from 'react';
class MyFirstComponent extends Component {   
render() {
  return (<div>This is my component.</div>);
   }
}
export default MyFirstComponent;

Once the component name is exported we can use that name as a simple HTML tag which will render whatever the component returns to the screen

Class components lets us to use the local state, which we can see in the next section

Local state in Class component

Why local state? Is there a Global state? Yes! We can look into that in the Redux section. Lets focus on the local state here. Class components lets us use a state that is specific and has scope only within that class. We can define a state as simple as the below snippet

state = {
name: "Hello world!"
}

It is important to use the name “state” as it is a special keyword which acts as a local store to the component.

This state can be accessed by using ‘this.state’ and the state attribute name you want to access.

import React, { Component } from 'react';
class MyFirstComponent extends Component {
state = {
   name: "Hello world!"
}
render() {
  return (<div>{this.state.name}</div>);
   }
}
export default MyFirstComponent;

After the state is initialized it can be updated using a special function ‘setState()’. This function tells React that this component and its children need to be re-rendered with the updated state. Example of setState can be seen in the below code

this.setState( { name: "Updated state"} );

Props

So what is this props thingy that I saw in the functional component? Glad you asked that! Props are nothing but the attributes you pass to a component. You can use the component irrespective of their type by referring them as a simple HTML tag and the attributes that you pass to this tag are sent as props to the Components

<MyFirstComponent name="HelloWorld!"/>

In a functional component we can use the props like this:

function myFirstComponent(props){
return <div> {props.name} </div>
}
export default myFirstComponent;

In a class based component we can access the props as in below code

import React, { Component } from 'react';
class MyFirstComponent extends Component {
const attributes = this.props;
render() {
  return (<div>{attributes.name}</div>);
   }
}
export default MyFirstComponent;

Lets get a glimpse of Redux and global state management

Redux and Global state management

State management is crucial as your application grow. Redux is a standalone library that is often used by React but not a part of React. However Redux by itself is a vast topic and is beyond the scope of this article. I’ll just give an overview of it.

Credits: academind.com

From the above architecture, we can see that the components react with the global state by dispatching Actions and pass it to the reducer to replace the old state with the new one (I assume you all know the state is immutable). The Store then triggers an automatic subscription which will then be passed to the Components as props.

In depth React with Redux will be discussed in further articles

Starting your React application

You have learnt a lot of basics about React in the above sections. Lets go ahead and run our application. Open your npm console (or from your VS code terminal or any other IDE) and run the following command

npm start

This is compile and start the development server in http://localhost:3000 and opens your default browser to display the landing page as shown in the below image

Landing page of React

Voila! You have just created your first React application. As the message says you can go ahead and edit the App.js or create your own component by any of the methods discussed above and render them on the screen.

This is an introductory module to give you a glimpse of some basic functionalities. React team has a well defined documentation where they will guide you to create a simple game with React. You can access that from the below link

Tutorial: Intro to React - React

Hope you are excited about React and continue your learning.

Thank you and Happy learning!