Windows 10
Tuto pour les utilisateurs de windows 10
Linux
Cf https://create-react-app.dev/docs/getting-started/#get-started-immediately
Vérifier que npm est bien installé :
npm --version
Si ce n'est pas le cas, installer npm
sudo apt install npm
Se placer dans le dossier parent de la future racine du projet puis entrer dans la console :
npx create-react-app memo
Dans le cas où l'on veut utiliser typescript
npx create-react-app memo --template typescript
Cela installe automatiquement :
- Development server (hot module reloading = rechargement automatique)
- webpack
- Babel
- ... et beaucoup d'autres packages !
... et cela installe une application react avec un component "App"
Aller sur le répertoire fraîchement créé :
cd memo
Puis lancer l'application
npm start
Explications de base sur l’arborescence
- node_modules : Bibliothèques externes (dont react) third party libraries
- public : publics assets (index.html dont id=”root”) : le container
- src : components
Inspecter les fichiers suivants :
- index.js
- App.js
Element
Les éléments sont les blocs élémentaires d’une application React.
Un élément décrit ce que l'on veut voir à l’écran :
const element = <h1>Hello World!</h1>;
nœud DOM racine
<div id="root"></div>
Tout ce que comprend le nœud DOM « racine » est géré par React DOM.
Méthode render
ReactDOM.render(element, container[, callback])
Le module react-dom fournit des méthodes spécifiques au DOM dont la plus utilisée est "render"
La méthode "render" est appelée à la création de l’objet React pour afficher un élément React au sein du nœud DOM spécifié par container et renvoie une référence sur le composant (ou renvoie null pour les fonctions composants). Le DOM réel est alors créé.
Si l’élément React était déjà affiché dans container, cette méthode effectuera plutôt une mise à jour et ne modifiera le DOM que là où c’est strictement nécessaire pour refléter l’élément React à jour.
La méthode est ensuite appelée à chaque fois que la propriété (qui est un objet) state est modifiée pour vérifier si le nouvel object React alors créé est bien en adéquation avec l’ancien. Dans le cas contraire, le DOM réél est modifié uniquement là où les deux objets React diffèrent.
Ex de méthode render :
ReactDOM.render( <React.StrictMode> <h1>Hello World</h1> </React.StrictMode>, document.getElementById('root') );
Appel de fonctions et instanciation d'objets
Syntaxe HTML (JSX) pour l'appel de la fonction Hello (stateless component)
ReactDOM.render( <React.StrictMode> <Hello name="Bob" /> </React.StrictMode>, document.getElementById('root') ); function Hello(props) { return <h1>Hello {props.name}</h1>; }
Création d'une nouvelle class
Créer un fichier Carte.js dans le répertoire components. Pensez à utiliser les raccourcis : imrc (import react component) et ccs (create class )
import React, { Component } from 'react'; class Carte extends Component { state = { } render() { return (<h1>Hello Carte</h1> ); } } export default Carte;
Modifier le fichier App.js comme suit
import React, { Component } from 'react'; import logo from './logo.svg'; import './App.css'; import Carte from "./components/Carte"; class App extends Component { render() { return ( <div className="App"> <Carte /> </div> ); } } export default App;
Passage de propriétés
Voici comment il faut s'y prendre pour passer des propriétés à notre nouvel objet "Carte"
import React, { Component } from 'react'; import logo from './logo.svg'; import './App.css'; import Carte from "./components/Carte"; class App extends Component { render() { return ( <div className="App"> <Carte question="question 1" reponse="réponse 1"/> </div> ); } }export default App;
Du coté de la class Carte, voici comment il faut s'y prendre pour récupérer les propriétés :
import React, { Component } from 'react'; class Carte extends Component { state = {question:this.props.question} render() { return (<div> <p>{this.state.question}</p> </div>); } } export default Carte;