What is React?
React is a front-end and open-source JavaScript library which is useful in developing user interfaces specifically for applications with a single page. It is helpful in building complex and reusable user interface(UI) components of mobile and web applications as it follows the component-based approach.
What is the features of React?
＊ JSX
＊ Reusable Components
＊ Virtual DOM
＊ Props
＊ Competitors: Angular and Vue
What is JSX?
JSX is a syntax extension of JavaScript, stands for JavaScript XML. It is used with React to describe what the user interface should look like. By using JSX, we can write HTML structures in the same file that contains JavaScript code.
What is Components?
Components are independent and reusable code blocks for UI elements. In React, we use component-based architecture for developing applications. These components can be shared across various applications having similar functionality. The re-use of components reduces the development time of an application.
What is virtual DOM?
Virtual DOM is a virtual representation of the real DOM. In React, we use virtual DOM to render the view rather than real DOM. Each time the data changes in react app, a new virtual DOM gets created. Creating a virtual DOM is much faster than rendering the UI inside the browser. Therefore, the efficiency of the app improves using virtual DOM.
What are props?
The props stand for properties and are used for passing data from one component to another. Every parent component can pass some information to its child components by giving their props.
How to create a React project?
There are two ways to create React project.
Using create-react-app
Using Vite
Using create-react-app
First, run the following command on the terminal
This command will execute the create-react-app package to create a new react application called my-app.
Next, run the following command on the terminal
npm start
The command npm start will initialize the react project on the localhost, port 3000. The browser should automatically open.
Using Vite
First, run the following command on the terminal
This command will execute the vite package to create a new application called my-app at the latest version.
Next, run the following command on the terminal
npm install
npm run dev
The command npm install will install all the dependencies for the react project and the command npm run dev will run the project on the localhost, port 5173. The browser should automatically open.
Why React is the most famous and widely used?
Popular of React
According to the annual “State of JavaScript” and “JavaScript Rising Stars” reports, React is the most used JavaScript library worldwide. Here are the results.
Ecosystem around React
It has already developed ecosystem around React. This is one of the great aspects of using React, which you can easily integrate React with other JavaScript library or framework. You can be sure that most JavaScript modules will work out of the box when added yo your React app. That’s why you can start building web application immediately.
These are two of the famous JavaScript framework based on React.
Next.js
Next.js is a framework for full-stack web application development, which allows users to build for both the client and the server side from the same codebase and supports server-side rendering（SSR）, static-site generation（SSG） and client-side rendering（CSR）.
Gatsby
Gatsby is an open-source framework that combines functionality from React, GraphQL and webpack. It enables users to build a static website with React and source data from a content management system’s database or markdown files.
Conclusion
React has not only revolutionized the way we build web applications but has also significantly enhanced the development experience for developers around the world. In React, there are tons of resources, tools, and ready-to-use components that help developers do their work more efficiently and creatively.
