Let’s discover React
Introduction
React is a JavaScript library for building user interfaces, created by Facebook in 2013. It enables developers to compose complex UIs from small, isolated pieces of code called “components.”
Key features
Virtual DOM for efficient re-rendering
Component-based architecture promoting reuse
JSX syntax to blend HTML-like templates with JavaScript
Unidirectional data flow via props and state
Common use cases
Single-page applications (SPAs) with dynamic content
Interactive dashboards and data visualization
Mobile apps using React Native
Static sites and server-side rendering with Next.js
With its vibrant ecosystem, robust tooling, and performance optimizations, React remains a top choice for front-end development.
Key concepts
Virtual DOM: React keeps an in-memory copy of the UI, diffs changes, and updates only what’s needed in the real DOM.
JSX: A syntax that mixes HTML-like tags with JavaScript, turning <h1>Hello</h1> into React.createElement(...).
Data Flow: One-way binding—parents send data via props, children render it and call parent callbacks to request changes.
State Management: Components use useState (and other hooks) to hold and update local data, triggering re-renders on change.
Routing: Libraries like React Router map URL paths to components, letting you switch views without full page reloads.
Basic example
import React, { useState } from ‘react’;
function Counter() {
const [count, setCount] = useState(0);
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}
export default Counter;
This component:
– Initializes count to 0 with useState
– Calls setCount to update state and trigger a re-render
Getting started
1 – Create a new app :
npx create-react-app my-app
2 – Launch the development server:
cd my-app
npm start
3 – Open http://localhost:3000 and edit src/App.js