What is React Js ?

 

React Js

In this article, we’ll learn about What is React Js and How it is used in projects.

Let’s start.

What is React ?

ReactJS is a declarative, efficient, and flexible JavaScript library for building reusable UI components. It is an open-source, component-based front end library which is responsible only for the view layer of the application. It was created and maintained by Facebook and later utilized in Facebook products such as WhatsApp and Instagram.

Why React JS?

· Improves Speed of App

· Faster than DOM

· Uses Virtual DOM - Improved Performance

· Can used in both client and server side as well with some other frameworks

· Readability - due to components

· Maintains longer code

React Features

Currently, ReactJS gaining quick popularity as the best JavaScript framework among web developers. It is playing an essential role in the front-end ecosystem. The important features of ReactJS are below in the picture.

Shall we create a new project?

There are two ways to set up an environment for successful ReactJS application. They are given below.

1. Using the npm command
2. Using the create-react-app command

Here, we are going to create a project using create-react-app command. For that you need to have the Visual Studio Code which is very user friendly to me personally. Before we start our React Js application NodeJS and NPM are the platforms need to develop any ReactJS application. You must install NodeJS and NPM package manager.

Create a folder called “jtp-reactapp”

Then open the folder in VS code and open the terminal.

Then put the below command and execute in terminal.

npx create-react-app jtp-reactapp

Once the installation completed you can see the below folder structures and files.

After completing the installation process, you can start the server by running the following command.

First go inside the folder which we were created, using cd command. ( Ex. cd jtp-reactapp)

Then execute this command: npm start

It will show the port number which we need to open in the browser. After we open it, you will see the following output.

In React application, there are several files and folders in the root directory. Some of them are as follows:

1. node_modules: It contains the React library and any other third party libraries needed.
2. public: It holds the public assets of the application. It contains the index.html where React will mount the application by default on the <div id=”root”></div> element.
3. src: It contains the App.css, App.js, App.test.js, index.css, index.js, and serviceWorker.js files. Here, the App.js file always responsible for displaying the output screen in React.
4. package-lock.json: It is generated automatically for any operations where npm package modifies either the node_modules tree or package.json. It cannot be published. It will be ignored if it finds any other place rather than the top-level package.
5. package.json: It holds various metadata required for the project. It gives information to npm, which allows to identify the project as well as handle the project?s dependencies.
6. README.md: It provides the documentation to read about React topics.

Pros and Cons of ReactJS

Advantage of ReactJS

1. Easy to Learn and Use
2. Creating Dynamic Web Applications Becomes Easier
3. Reusable Components
4. Performance Enhancement
5. The Support of Handy Tools
6. Known to be SEO Friendly
7. The Benefit of Having JavaScript Library
8. Scope for Testing the Codes

Disadvantage of ReactJS

1. The high pace of development
2. Poor Documentation
3. View Part
4. JSX as a barrier

React Components

A Component is considered as the core building blocks of a React application. It makes the task of building UIs much easier. Each component exists in the same space, but they work independently from one another and merge all in a parent component, which will be the final UI of your application.

Every React component have their own structure, methods as well as APIs. They can be reusable as per your need.

In ReactJS, we have mainly two types of components. They are,

1. Functional Components : In React, function components are a way to write components that only contain a render method and don’t have their own state. They are simply JavaScript functions that may or may not receive data as parameters. We can create a function that takes props(properties) as input and returns what should be rendered.
2. Class Components : Class components are more complex than functional components. It requires you to extend from React. Component and create a render function which returns a React element. You can pass data from one class to other class components. You can create a class by defining a class that extends Component and has a render function.

Conclusion

So far, in this article, we have discussed about basics of React Js and their usage, pros and cons. Also you got an idea about how to create a new React Js project.

Thank you so much for reading my article and I hope you have a better idea about React Js now.

If you have any questions or suggestions, please send me your comment.

Thank you.