React:Component
Chaque Component se compose des fichiers suivants:
- fihcier css : Les tyles de la components
- fihcier js : le typeScript la vue et la logique de la component
La component principale App.js
test_react_project
├── src
│ ├── App.js :la vue principale joue le role d'une template pour insérer les autres component
│ ├── App.cs le style globale
La component principale App.js
Le contenu par défaut de la component principale à supprimer et le remplacer par votre template
import logo from './logo.svg';
import './App.css';
function App() {
return (
/* Contenu par défaut */
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
/*Fin contenu par défaut */
);
}
export default App;
Lancer le projet Crée
Exemple :Créer la Component Test
On peut créer les components manuellement (un fichier .js) mais afin d'accélérer et simplifier la création des components on install le module suivant:
Puis pour créer la component Test on se positionnne dans le dossier src puis on lance la commande
Test.js
import React, { Component } from "react";
class Test extends Component {
render() {
return <div>Test</div>;
}
}
export default Test;
importer Test.js dans la vue principale App.js
import './App.css';
/*importer la component Test*/
import Test from './components/Test/Test.js'
function App() {
return (
/*Afficher le contenu de la component Test*/
<Test />
);
}
export default App;
Lancer le projet :test_react_project
Types de Composants
En React, il existe deux types principaux de composants :
- Composants de Classe : Ces composants sont définis à l'aide de la syntaxe ES6 de classe. Ils possèdent un état et un cycle de vie.
- Composants Fonctionnels : Ces composants sont définis comme des fonctions JavaScript. Ils sont souvent utilisés pour les composants simples et ne possèdent pas d'état interne.
Les deux types de composants ont leurs propres avantages et peuvent être utilisés en fonction des besoins de l'application.
Création de Composants
Voici comment créer un composant simple en React :
import React from 'react';
// Composant de fonction simple
function MonComposant() {
return (
<div>
<h3>Mon Premier Composant</h3>
<p>Ce composant est créé à l'aide d'une fonction.</p>
</div>
);
}
export default MonComposant;
