What are the features of ReactJS ? - GeeksforGeeks

22 Oct, 2021
 React is a JavaScript Library created by Facebook for creating dynamic and interactive applications and building better UI/UX design for web and mobile applications. React is an open-source and component-based front-end library. React is responsible for the UI design. React makes code easier to debug by dividing them into components. 
JSX (JavaScript Syntax Extension)
Virtual DOM
One-way data binding
Performance
Extensions
Conditional statements
Components
Simplicity
Let’s understand each of them in detail. 
1. JSX(JavaScript Syntax Extension):  JSX is a combination of HTML and JavaScript. You can embed JavaScript objects inside the HTML elements. JSX is not supported by the browsers, as a result Babel compiler transcompile the code into JavaScript code. JSX makes codes easy and understandable. It is easy to learn if you know HTML and JavaScript.
const name="GeekforGeeks";
const ele = <h1>Welcome to {name}</h1>;
2. Virtual DOM: DOM stands for Document Object Model. It is the most important part of the web as it divides into modules and executes the code. Usually, JavaScript Frameworks updates the whole DOM at once, which makes the web application slow. But react uses virtual DOM which is an exact copy of real DOM. Whenever there is a modification in the web application, the whole virtual DOM is updated first and finds the difference between real DOM and Virtual DOM. Once it finds the difference, then DOM updates only the part that has changed recently and everything remains the same. 
 In the above-shown figure, when the whole virtual DOM has updated there is a change in the child components. So, now DOM finds the difference and updates only the changed part.
3. One-way Data Binding: One-way data binding, the name itself says that it is a one-direction flow. The data in react flows only in one direction i.e. the data is transferred from top to bottom i.e. from parent components to child components. The properties(props) in the child component cannot return the data to its parent component but it can have communication with the parent components to modify the states according to the provided inputs. This is the working process of one-way data binding. This keeps everything modular and fast.
One-way Data Binding
As shown in the above diagram, data can flow only from top to bottom.
4. Performance: As we discussed earlier, react uses virtual DOM and updates only the modified parts. So , this makes the DOM to run faster. DOM executes in memory so we can create separate components which makes the DOM run faster.
5. Extension: React has many extensions that we can use to create full-fledged UI applications. It supports mobile app development and provides server-side rendering. React is extended with Flux, Redux, React Native, etc. which helps us to create good-looking UI.
6. Conditional Statements: JSX allows us to write conditional statements. The data in the browser is displayed according to the conditions provided inside the JSX.
Syntax:
const age = 12;
if (age >= 10)
{ 
    <p> Greater than { age } </p>;
} 
else 
{ 
    <p> { age } </p>;
}
7. Components: React.js divides the web page into multiple components as it is component-based. Each component is a part of the UI design which has its own logic and design as shown in the below image. So the component logic which is written in JavaScript makes it easy and run faster and can be reusable.
Multiple components
8. Simplicity: React.js is a component-based which makes the code reusable and React.js uses JSX which is a combination of HTML and JavaScript. This makes code easy to understand and easy to debug and has less code.
Let’s see how react.js works by creating an application.
Follow the below steps to create a react application:
Step 1: Create a react application by using the following command:
npx create-react-app foldername
Step 2: Change your directory to the newly created folder.
cd foldername
Project Structure: A project structure is created as shown below:
Step 3:  Now create a new file as PassMessage.js in src folder and add the following code.
Javascript
import React from 'react'import App from './App';  function PassMessage() {    return (         <div>             <h1 style = {              {                textAlign: 'center',                color: 'green'              }            }> Congratulations!!!You passed the test. </h1>          </div>    )}  export default PassMessage
Step 4: Now create another file as FailMessage.js in src folder and add the following code.
Javascript
import React from 'react'import App from './App'  function FailMessage() {    return (         <div >            <h1 style = {            { textAlign: 'center',             color: 'green' }             }> You failed the test.Better luck next time..!! </h1>         </div>    )}  export default FailMessage
        
Step 5: Now add the following code in App.js.
Javascript
import PassMessage from './PassMessage';import FailMessage from './FailMessage';    function App(props) {    const isPass = props.isPass;        if (isPass) {            return <PassMessage/> ;        }    return <FailMessage/> ;};  export default App;
Step 6: Add the below code in index.js.
Javascript
import React from 'react';import ReactDOM from 'react-dom';import App from './App';import FailMessage from './FailMessage';import PassMessage from './PassMessage';    ReactDOM.render( <App isPass = { true }/>,               document.getElementById('root'));
Step to run the application: Open the terminal and type the following command.
npm start
If you give the value of isPass={true} in index.js, then it will give the following output:
If the value of isPass={false} in index.js, then the following output is displayed.
Picked
React-Questions
ReactJS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to pass data from one component to other component in ReactJS ?
ReactJS useNavigate() Hook
ReactJS defaultProps
How to set background images in ReactJS ?
Re-rendering Components in ReactJS
Remove elements from a JavaScript Array
Convert a string to an integer in JavaScript
How to insert spaces/tabs in text using HTML/CSS?
Difference between var, let and const keywords in JavaScript
Top 10 Projects For Beginners To Practice HTML and CSS Skills