What is React ?
React.js, commonly known as React, is a JavaScript library for building user interfaces. It’s maintained by Facebook and a community of individual developers and companies. React is widely used for developing single-page applications where the user interface needs to be highly dynamic and responsive.
One of the key features of React is its component-based architecture. Developers can create reusable UI components, which can be composed together to build complex user interfaces. React uses a virtual DOM (Document Object Model) to efficiently update and render changes in the UI, providing a more seamless and performant user experience.
Here’s a simple example of a React component:
import React, { useState } from 'react';
const Counter = () => {
const [count, setCount] = useState(0);
const handleIncrement = () => {
setCount(count + 1);
};
const handleDecrement = () => {
setCount(count - 1);
};
return (
<div>
<h1>Counter: {count}</h1>
<button onClick={handleIncrement}>Increment</button>
<button onClick={handleDecrement}>Decrement</button>
</div>
);
};
export default Counter;
In this example, the Counter
component uses the useState
hook to manage a state variable (count
). It renders the current count along with two buttons to increment and decrement the count. When the user clicks on these buttons, the state is updated, triggering a re-render of the component. React efficiently updates only the parts of the DOM that have changed, providing a smooth and responsive user interface