Components

Index root

1import { createRoot } from "react-dom/client";
2// import du composant principal
3import App from "src/components/App";
4
5// on recuperer le composant principal de notre app
6// pour cree le DOMvirtuel react
7const rootReactElement = <App />;
8
9// on recupere l'element cible dans le fichier html
10// pour cree notre racine
11const root = createRoot(document.getElementById("root"));
12
13// on ratache les deux pour cree notre rendu react
14root.render(rootReactElement);
15

App (ou composant principal)

App est le composant principal de l'application c'est la que les sous composants sont appeler

Sans utiliser Redux ou d'autre outils qui permette de manipuler le state on passe nos props de notre App au sous composant

1import Hello from "./Hello";
2
3function App() {
4  const sayHello = "Salut";
5
6  return (
7    <div className="app">
8      <Hello dirBjr={sayHello} />
9    </div>
10  );
11}
12
13export default App;
14

Sous composant

Les sous composant recoivent des props depuis leur composant parent et peuvent les utiliser

Par defaut, react nous propose un systeme de typage avec propType mais grace a TypeScrypt on peut ce simplifier le typage de nos props

1import PropTypes from "prop-types";
2
3function Hello({ dirBjr }) {
4  return (
5    <div className="hello">
6      <h1>{dirBjr}</h1>
7    </div>
8  );
9}
10
11Hello.propTypes = {
12  dirBjr: PropTypes.string.isRequired,
13};
14
15export default Hello;
16