Complete ReactJS Guide

To be continued …
React JS is a JavaScript library thats runs in the browser. React is all about component to building an application. We can divide a website into a number of components, like header, sidebar, widgets etc. By writing react components we can reuse those components across various pages in our website or web application.

Through react we can write custom html element.

Installation

We need Node Package Manager (npm) to create a react application. npm comes with Node.js.

Installing Node.js

Go to the Node.js website by clicking this Download Node.js and download the appropriate Node.Js installers based on your operating system. And simply install it by clicking. Its pretty straight forward.

Creating your first React App

If you are using mac then go to your terminal and run this code

After typing npm start you will be redirected to the browser and can see your newly created react application. In most cases your react application URL will be http://localhost:3000

React Components

There are mainly two types of component in React JS one is class based component and the other is functional component.

Class Based Component

The classs based component will be a class which will render some JSX code. Though JSX code looks like html but actually its javaScript. The classname will be followed by the file name of the component. In that case it is Todos.

At the end of the component we have to export it for future use inside other components.

Functional Component

A functional component will be a function that might receive some props (parameters) from another component. Unlike class based component it will not use render() function. Instead it will return some JSX code.

Class based component name starts with a capital letter but functional component name can be starts with a lowercase or uppercase letter.

We can write the functional component in a different way using es6 JavaScript arrow function. Both the arrow function and normal function will do the same thing for you but here we will mostly follow the arrow function.

CSS module in ReactJS

You can use react’s CSS module to add css file into your component. The name of the css file will be the component-name.module.css. You must have to use .module inside your css file name otherwise it can’t be linked.

Here our css file name is Todos.module.css and we have a .Todos class inside our css file.

We imported our css file and gave it a name classes. We can access our css classess inside that component by using className = {classes.Todos}

Our Todos.module.css file

Passing values between components using props

We can pass values between components using props. Our App.js file imports the Todos.js file and hence its rendering the Todos component by using

Our Todos component calling some Todo components and passing some values “title”.

The Todo component take the title value from Todos component as props and printing the values by using {props.title}. It is not necessary to name it as props, you can give it any names like myValues etc.

Props Children

Children is a type of parameter that can be passed to other components without calling anything.

Instead of calling our Todo component as <Todo title="Task1" /> we can also call it as <Todo title="Task1">My Task:</Todo>. Here “My Task:” text is also available as props to the Todo component and you can access this value by using {props.chidlren}.

Using State

We can use state to to store data inside a component. Props gives value from outside the component where as state works inside the component.

Using state in Class based Component

Here in the example below we can store all of our todo list inside state. You can access the state value using this.state.tasks. You can use state like only in class based component, for functional component you have to use react hook useState (will be found in the next section).

In this example below the tasks arrays of tasks. We can print this value using Javascript map function

Using useState to manage State on Functional Component

In the functional component you can not use state directly. Instead you have to call a react hook useState.

useState() always returns arrays of two functional elements. First elements can be used to accessing the value and the second element will be used to change the value for the state.

There is a special case for useState. Unlike class based state if you want to use a single value inside the state you have to redeclare other values too, otherwise those values will be lost. To keep things tidy its better to declare each values individually by using separate useState() function.

Using Constructor

We can modify our previous example like the code below by using constructor.

When you declare constructor you have to pass props to constructor and have to declare super(props). These two things are mandatory.

Now inside the constructor we can declare our state by using this.state.

But declaring constructor redundant. React itself manages all these things internally and you do not need to declare constructor again unless you have to perform some special operation inside constructor. We will follow our pervious example, which is without declaring constructor.