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 fonction component
/**
* Gère l'affichage du composant Title
* @param {Object} props
* @returns JSX
*/
export default function Title(props) {
console.log(`pros : `, props);
return <h1 className="App-logo" style={{ color: props.color }
} >{props.text}</h1>
}
Passage de propriétés
import './App.css';
import Title from './components/Title';
/**
* Gère l'affichage du composant App
* App appelle ici le composant Title avec deux arguments sous la forme de clés/valeurs
* en utilisant la syntaxe des balises HTML et de leurs attributs
* @returns JSX
*/
function App() {
return (
<div className="App">
<Title text="VéloMobile : la solution pour remplacer la voiture" color="green" />
</div>
);
}
export default App;