WHAT IS REACT.JS
React (also known as React.js or ReactJS) is a free and open-source front-end JavaScript library[3][4] for building user interfaces based on components. It is maintained by Meta (formerly Facebook) and a community of individual developers and companies.[5][6][7]
React can be used to develop single-page, mobile, or server-rendered applications with frameworks like Next.js. Because React is only concerned with the user interface and rendering components to the DOM, React applications often rely on libraries for routing and other client-side functionality.[8][9]
Basic usage[edit]
The following is a rudimentary example of using React for the web, written in JSX and JavaScript.
import React from 'react';
import ReactDOM from 'react-dom/client';
/** A pure component that displays a message */
const Greeting = () => {
return (
<div className="hello-world">
<h1>Hello, world!</h1>
</div>
);
};
/** The main app component */
const App = () => {
return <Greeting />;
};
/** React is rendered to a root element in the HTML page */
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);
based on the HTML document below.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>
The Greeting function is a React component that displays the famous introductory ''Hello, world".
Recommended by LinkedIn
When displayed on a web browser, the result will be a rendering of:
<div class="hello-world">
<h1>Hello, world!</h1>
</div>
Notable features[edit]
Declarative[edit]
React adheres to the declarative programming paradigm.[10]: 76 Developers design views for each state of an application, and React updates and renders components when data changes. This is in contrast with imperative programming.[11]
Components[edit]
React code is made of entities called components.[10]: 10–12 These components are modular and reusable.[10]: 70 React applications typically consist of many layers of components. The components are rendered to a root element in the DOM using the React DOM library. When rendering a component, values are passed between components through props (short for "properties"). Values internal to a component are called its state.[12]
The two primary ways of declaring components in React are through function components and class components.[10]: