Salut les développeurs,
Bienvenue dans la première leçon de notre série Réagir de 0 à Héros ! Dans ce didacticiel, nous aborderons les bases absolues dont vous avez besoin pour démarrer avec React. À la fin de cette leçon, React sera installé et exécuté sur votre ordinateur, et vous comprendrez les concepts de base qui font de React une bibliothèque si puissante pour créer des applications Web modernes.
React est une bibliothèque JavaScript créée par Facebook pour créer des interfaces utilisateur dynamiques et interactives. Il se concentre sur la création de composants réutilisables, qui sont de petits morceaux de code autonomes, qui peuvent être réutilisés dans l'ensemble de votre application. La nature déclarative de React rend la création d'interfaces utilisateur complexes simple et efficace, et elle est largement adoptée dans la communauté du développement Web.
Avant de plonger dans React, nous devons installer Node.js et npm (Node Package Manager). Ceux-ci nous aideront à gérer les dépendances et à exécuter React.
node -v npm -v
Vous devriez voir les versions imprimées pour Node et npm.
React fournit un outil appelé Create React App, qui vous permet de configurer rapidement un nouveau projet React sans avoir à configurer les outils de build.
npx create-react-app my-first-react-app
Cela créera un nouveau dossier appelé my-first-react-app avec tout ce dont vous avez besoin pour commencer.
cd my-first-react-app
npm start
Cela ouvrira un serveur de développement et votre navigateur par défaut devrait automatiquement ouvrir un onglet avec votre nouvelle application React exécutée sur http://localhost:3000/.
Jetons un coup d'œil aux fichiers et dossiers créés par Create React App :
Plongeons maintenant dans le fichier src/App.js, qui définit le composant principal de votre application. Un composant est une fonction JavaScript qui renvoie du code de type HTML (appelé JSX). Voici à quoi ressemble le composant par défaut :
import React from 'react';
function App() {
return (
<div className="App">
<h1>Hello, React!</h1>
<p>Welcome to your first React app.</p>
</div>
);
}
export default App;
Vous pouvez modifier le fichier App.js pour le personnaliser. Essayez de changer le titre par autre chose :
<h1>Welcome to React from 0 to Hero!</h1>
Enregistrez le fichier et votre navigateur se mettra automatiquement à jour pour afficher vos modifications.
Félicitations ! ? Vous avez configuré avec succès votre première application React et effectué votre première modification de composant. C'est le début de votre voyage avec React. Dans la leçon suivante, nous approfondirons les composants React et apprendrons à gérer l'state et les props pour créer des interfaces utilisateur dynamiques.
N'hésitez pas à laisser des commentaires ou des questions ci-dessous et restez à l'écoute pour la leçon 2 !
Dans la prochaine leçon, nous aborderons :
Continuez à coder :)
以上是来自 o Hero 的 React：课程入门的详细内容。更多信息请关注PHP中文网其他相关文章！
