React.js, développé et maintenu par Facebook, est devenu l'une des bibliothèques JavaScript les plus populaires pour créer des interfaces utilisateur, en particulier des applications à page unique (SPA). Connu pour sa flexibilité, son efficacité et sa facilité d'utilisation, React dispose d'une vaste communauté et d'une richesse de ressources pour les développeurs de tous niveaux. Que vous soyez un développeur débutant ou expérimenté souhaitant ajouter React à vos compétences, ce tutoriel vous guidera à travers les principes fondamentaux de React.js.

1. Qu'est-ce que React.js ?

React.js est une bibliothèque JavaScript open source utilisée pour créer des interfaces utilisateur, en particulier pour les applications d'une seule page où vous souhaitez une expérience utilisateur rapide et interactive. React permet aux développeurs de créer de grandes applications Web capables de se mettre à jour et de s'afficher efficacement en réponse aux modifications des données. Elle est basée sur des composants, ce qui signifie que l’interface utilisateur est divisée en petits éléments réutilisables appelés composants.

2. Configuration de votre environnement React

Avant de commencer à coder, vous devrez configurer votre environnement de développement. Suivez ces étapes :

Étape 1 : Installez Node.js et npm

• Node.js: React nécessite Node.js pour ses outils de construction.
• npm: Node Package Manager (npm) est utilisé pour installer des bibliothèques et des packages.

Vous pouvez télécharger et installer Node.js depuis le site officiel. npm est fourni avec Node.js.

Étape 2 : Installez l'application Create React

Facebook a créé un outil appelé Create React App qui vous aide à mettre en place un nouveau projet React rapidement et efficacement. Exécutez la commande suivante dans votre terminal :

npx create-react-app my-app

Cette commande crée un nouveau répertoire nommé my-app avec tous les fichiers et dépendances nécessaires pour démarrer un projet React.

Étape 3 : Démarrez le serveur de développement

Naviguez dans le répertoire de votre projet et démarrez le serveur de développement :

cd my-app npm start

Votre nouvelle application React devrait maintenant fonctionner sur http://localhost:3000.

3. Comprendre les composants React

React est avant tout une question de composants. Un composant dans React est un module autonome qui restitue certaines sorties, généralement HTML. Les composants peuvent être définis comme descomposants fonctionnelsou descomposants de classe.

Composants fonctionnels

Un composant fonctionnel est une simple fonction JavaScript qui renvoie du HTML (en utilisant JSX).

Exemple :

function Welcome(props) { return 
Hello, {props.name}
; }

Composants de classe

Un composant de classe est un moyen plus puissant de définir des composants et vous permet de gérer l'état local et les méthodes de cycle de vie.

Exemple :

class Welcome extends React.Component { render() { return 
Hello, {this.props.name}
; } }

4. JSX – JavaScript XML

JSX est une extension de syntaxe pour JavaScript qui ressemble à HTML. Il permet d'écrire du HTML directement dans JavaScript, que React transformera ensuite en véritables éléments DOM.

Exemple :

const element = 
Hello, world!
;

JSX facilite l'écriture et la visualisation de la structure de votre interface utilisateur. Cependant, sous le capot, JSX est converti en appels React.createElement().

5. État et accessoires

Accessoires

Props (abréviation de « propriétés ») sont utilisés pour transmettre des données d'un composant à un autre. Ils sont immuables, ce qui signifie qu'ils ne peuvent pas être modifiés par le composant récepteur.

Exemple :

function Greeting(props) { return 
Hello, {props.name}!
; }

État

L'état est similaire aux accessoires, mais il est géré au sein du composant et peut changer avec le temps. L'état est souvent utilisé pour les données dont un composant doit assurer le suivi, telles que les entrées de l'utilisateur.

Exemple :

class Counter extends React.Component { constructor(props) { super(props); this.state = { count: 0 }; } increment = () => { this.setState({ count: this.state.count + 1 }); } render() { return ( 
 
Count: {this.state.count}
 Increment 
 ); } }

6. Gestion des événements

La gestion des événements dans React est similaire à la gestion des événements dans les éléments DOM. Il existe cependant quelques différences syntaxiques :

• Les événements React sont nommés en utilisant camelCase, au lieu de minuscules.
• Avec JSX, vous transmettez une fonction en tant que gestionnaire d'événements, plutôt qu'une chaîne.

Exemple :

function Button() { function handleClick() { alert('Button clicked!'); } return (  Click me  ); }

7. Méthodes de cycle de vie

Les composants de classe dans React ont des méthodes de cycle de vie spéciales qui vous permettent d'exécuter du code à des moments particuliers de la vie du composant. Ceux-ci incluent :

• componentDidMount: appelé une fois le composant monté.
• componentDidUpdate: appelé après les mises à jour des composants.
• componentWillUnmount: appelé avant que le composant ne soit démonté.

Exemple :

class Timer extends React.Component { componentDidMount() { this.timerID = setInterval( () => this.tick(), 1000 ); } componentWillUnmount() { clearInterval(this.timerID); } render() { return ( 
 
{this.state.date.toLocaleTimeString()}
 
 ); } }

8. Conditional Rendering

In React, you can create different views depending on the state of your component.

Example:

function Greeting(props) { const isLoggedIn = props.isLoggedIn; if (isLoggedIn) { return 
Welcome back!
; } return 
Please sign up.
; }

9. Lists and Keys

When you need to display a list of data, React can render each item as a component. It’s important to give each item a unique "key" prop to help React identify which items have changed.

Example:

function NumberList(props) { const numbers = props.numbers; const listItems = numbers.map((number) => 
{number}
 ); return ( 
{listItems}
 ); }

10. React Hooks

React Hooks allow you to use state and other React features in functional components. Some of the most commonly used hooks include:

• useState: Allows you to add state to a functional component.
• useEffect: Lets you perform side effects in your function components.
• useContext: Provides a way to pass data through the component tree without having to pass props down manually at every level.

Example of useState:

function Counter() { const [count, setCount] = useState(0); return ( 
 
You clicked {count} times
  setCount(count + 1)}> Click me  
 ); }

11. Building and Deploying React Applications

Once your application is ready, you can build it for production. Use the following command:

npm run build

This will create an optimized production build of your React app in the build folder. You can then deploy it to any web server.

Conclusion

React.js is a powerful tool for building modern web applications. By understanding components, state management, event handling, and hooks, you can create dynamic and interactive user interfaces. This tutorial covers the basics, but React's ecosystem offers much more, including advanced state management with Redux, routing with React Router, and server-side rendering with Next.js.

As you continue your journey with React, remember to leverage the wealth of online resources, including the official React documentation, community forums, and tutorials. Happy coding!

위 내용은 React.js 학습을 위한 종합 가이드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!