What is ReactJS?

Features

1. It is using JSX(JavaScript Syntax extension) which is similar to HTML.
2. React is all about Components and we have to think about everything as a component.
3. Unidirectional data flow makes easy to make the app and Flux is a pattern that helps to keep the data unidirectional.

Advantages

1. Uses virtual DOM that helps apps performance.
2. It can be used on the client and server-side.
3. Component and data patterns improve readability.

Disadvantages

1. Covers only the view layer of the app.
2. Uses inline templating.

Setup the Environment

First of all, we have to install the runtime environment to react. We can use nodeJS as the environment.

Install nodeJS from https://nodejs.org/en/download/

Then install Visual Studio Code, Goto https://code.visualstudio.com/
and downloaded the latest version.
It is recommended to install Git on your computer.

Then you can check the version of npm by typing, npm --version in the terminal.

Create an app

Create a root folder as React or any name you prefer, as below.

C:\Users\User\Documents\VS Code>mkdir ReactC:\Users\User\Documents\VS Code>cd React

Then you can create your first react app by typing the following command. I named my app as ‘test’ and you can give any name as you prefer

C:\Users\User\Documents\VS Code\React>npx create-react-app testC:\Users\User\Documents\VS Code\React>cd testC:\Users\User\Documents\VS Code\React>npm start

to test react app

After that, you can see your first react app is running on the browser in port:3000. Let’s learn further. Then you can delete unnecessary files as shown in the below image.

keep only necessary files

The ReactDom.render() the function is inside the index.js file as well as we can edit the app.js file as we prefer. Inside the public folder, we can see the index.html file and the purpose of the function is to display the specified code in the HTML element.

We can change the index.js file to display some text as below.

index.js file and its output

Let’s learn the features of ReactJS

1. React JSX

2. React Components

3. React Props

4. React State

5. React Lifecycle

6. React Events

1. React JSX

JSX is for javascript XML. JSX allows writing HTML tags inside the javascript and place in the DOM and converts HTML tags into React elements. JSX makes easier to write code.

Expressions in JSX can be written inside curly braces { } as below.

const num = <h2> Answer of 3 + 2 is {3+2} </h2>

2. React Components

React components are similar to JavaScript functions, but they are working independently and return HTML via the render function. Components are two types.

i. Class components

ii. Function components

i. Class components

The name of the component must start with an uppercase letter. As class creates inheritance to the React.Component it has to include the extends React.Component statement.

The class component is written in index.js file and the output is here.

We can add constructor function to the components that will be called when the component gets initiated. Component properties are initiated in constructor function and those properties are kept on an object called state Statement super()executes the parent component’s constructor function, and our component has access to all the functions of the parent component.

two-component properties are initialized.

ii. Function components

Similar to class components, but no additional features like constructors, etc..

function component

Components in files

Instead of writing code in the same files. We should be smart enough to insert components in separate files. For that create a new file called App.js and write your code inside it.

App.js

As seen in the image file must be started by importing React and end with export default Fruit;. ‘Fruit’ is the component name we specified in here.

index.js

Then we should import App.js file to the application. Because it is a JavaScript file we can import as follows.

import Fruit from './App'

No need to use the .js extension. ‘Fruit’ is the component of App.js file.

Here is the output

These are the basic things you need to know when starting to React. Let’s discuss props, state, Lifecycle, Events more deeply in the future.

Summary

We discussed the advantages and disadvantages of ReactJS. Then how the installation process is done. After we can get to know about what is JSX. Finally, we discussed React Components.