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;