Réagir
Pour utiliser React en production, vous avez besoin de npm qui est inclus avec Node.js .
Pour avoir un aperçu de ce qu'est React, vous pouvez écrire du code React directement en HTML.
Mais pour utiliser React en production, vous devez installer npm et Node.js.
Réagissez directement en HTML
Le moyen le plus rapide de commencer à apprendre React est d'écrire React directement dans vos fichiers HTML.
Espaces W3Schools
Le moyen le plus simple de commencer à créer des fichiers HTML est W3Schools Spaces !
C'est l'endroit idéal pour créer, éditer et partager votre travail avec d'autres !
Commencez par inclure trois scripts, les deux premiers nous permettent d'écrire du code React dans nos JavaScripts, et le troisième, Babel, nous permet d'écrire la syntaxe JSX et ES6 dans les anciens navigateurs.
Vous en apprendrez plus sur JSX dans le chapitre React JSX .
Exemple
Incluez trois CDN dans votre fichier HTML :
<!DOCTYPE html> <html> <head> <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script> <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script> <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script> </head> <body> <div id="mydiv"></div> <script type="text/babel"> function Hello() { return <h1>Hello World!</h1>;} ReactDOM.render(<Hello />, document.getElementById('mydiv')) </script> </body> </html>
Cette façon d'utiliser React peut convenir à des fins de test, mais pour la production, vous devrez configurer un environnement React .
Obtenir une certification!
95 $ S'INSCRIRE
Mise en place d'un environnement React
Si vous avez installé npx et Node.js, vous pouvez créer une application React en utilisant create-react-app.
Si vous avez déjà installé create-react-appglobalement, il est recommandé de désinstaller le package pour vous assurer que npx utilise toujours la dernière version de create-react-app.
Pour désinstaller, exécutez cette commande : npm uninstall -g create-react-app.
Exécutez cette commande pour créer une application React nommée
my-react-app:
npx create-react-app my-react-app
Le create-react-appconfigurera tout ce dont vous avez besoin pour exécuter une application React.
Exécutez l'application React
Vous êtes maintenant prêt à exécuter votre première véritable application React !
Exécutez cette commande pour accéder au my-react-apprépertoire :
cd my-react-app
Exécutez cette commande pour exécuter l'application React
my-react-app :
npm start
Une nouvelle fenêtre de navigateur apparaîtra avec votre application React nouvellement créée ! Sinon, ouvrez votre navigateur et tapez
localhost:3000dans la barre d'adresse.
Le résultat:
Modifier l'application React
Jusqu'ici tout va bien, mais comment modifier le contenu ?
Regardez dans le my-react-apprépertoire et vous trouverez un
srcdossier. Dans le
srcdossier, il y a un fichier appelé
App.js, ouvrez-le et il ressemblera à ceci :
/myReactApp/src/App.js :
import logo from './logo.svg';
import './App.css';
function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
}
export default App;Essayez de modifier le contenu HTML et enregistrez le fichier.
Notez que les modifications sont visibles immédiatement après l'enregistrement du fichier, vous n'avez pas besoin de recharger le navigateur !
Exemple
Remplacez tout le contenu à l'intérieur du <div className="App">par un
<h1>élément.
Voir les modifications dans le navigateur lorsque vous cliquez sur Enregistrer.
function App() {
return (
<div className="App">
<h1>Hello World!</h1>
</div>
);
}
export default App;Notez que nous avons supprimé les importations dont nous n'avons pas besoin (logo.svg et App.css).
Le résultat:
Et après?
Vous avez maintenant un environnement React sur votre ordinateur et vous êtes prêt à en savoir plus sur React.
Dans la suite de ce tutoriel, nous utiliserons notre outil "Show React" pour expliquer les différents aspects de React, et comment ils s'affichent dans le navigateur.
Si vous souhaitez suivre les mêmes étapes sur votre ordinateur, commencez par dépouiller le srcdossier pour qu'il ne contienne qu'un seul fichier : index.js. Vous devez également supprimer toutes les lignes de code inutiles à l'intérieur du index.js
fichier pour les faire ressembler à l'exemple de l'outil "Show React" ci-dessous :
Exemple
Cliquez sur le bouton "Exécuter l'exemple" pour voir le résultat.
index.js:
import React from 'react';
import ReactDOM from 'react-dom';
const myfirstelement = <h1>Hello React!</h1>
ReactDOM.render(myfirstelement, document.getElementById('root'));