coopernet Réussir son site web et ses applications de la conception à la réalisation

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

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;