What Makes ReactJS a Popular Frontend Library

Posted By : Nikita Agarwal | 04-Jun-2020

ReactJs is one of the most popular front-end libraries but its features make it a framework for UI to work on. ReactJs is an open-source library for SaaS application development that enables developers to create interactive single-page web applications. Its main feature is making the application work faster with increased scalability. Also, React do not allows reloading a page again and again, so it increases the performance of the application.

In React, we can make re-usable components, which we can use anywhere in our react app.
React was first introduced by Facebook in 2011.

 

Some of the Important features of React

1.JSX: JSX is a simple javascript language that includes HTML tags and also needs to render UI. In this code format, we use plain Javascript and HTML components for rendering data and calling Javascript events.

2. In React, we can make reusable components that can be used easily by just using the class name.
3. These components maintain their own state.
4. Business logics are written in Javascript instead of HTML, so we can easily use and pass the data.

 

Code Structure for React

In React, we have a plain Javascript file in which we make a class which is also a component and this component we can export and use it anywhere else by using the class name.
This component implements a render() method that takes input data and displays the data on UI.
This component can maintain its internal state by using this. state inside a constructor.

Ex:


 

How To Get Started With React

1. Now, it is very simple for getting started to react as we don't need to configure babel as react auto-configure all the dependencies and scripts required to set up a react project.
2. Just open your terminal and run the command

=>create-react-app my-app
=>cd my-app
=>npm start

 

This will start the development  server on your system with port:3000 

 

React Props and State

Prop => Props are used to receive data from parent component in a child component in the form of props. Then in child component, we can access the data with the use of this.props.
This makes the component reusable.
Props are used when we need to render some data  on UI, also known as stateless components.

 

State => State is used by components when we interact with the user data i.e when we submit forms, we can store the data in the state. These are known as stateful components. Also, the state refers to the local state of a component that is not able to be modified or accessed outside of the class.State of components can be modified but props cannot be changed.

 

About Author

Author Image
Nikita Agarwal

Nikita Agarwal is a front-end developer and have a good knowledge of HTML , CSS ,Javascipt and Bootstrap and Angular

Request for Proposal

Name is required

Comment is required

Sending message..