React:Component
Chaque composant React se compose généralement des fichiers suivants :
- Fichier CSS : Ce fichier contient les styles associés au composant. Il permet de définir l'apparence visuelle, y compris les couleurs, les polices, les marges et d'autres propriétés CSS. En séparant le style du code JavaScript, on favorise une meilleure organisation et une maintenance plus facile du code.
- Fichier JavaScript (ou TypeScript) : Ce fichier contient la logique du composant ainsi que sa vue. Il définit comment le composant se comporte et interagit avec d'autres composants ou avec l'état de l'application. Dans ce fichier, vous trouverez également le code JSX qui décrit la structure de l'interface utilisateur que le composant va rendre.
Le composant principal App.js
test_react_project
├── src
│ ├── App.js : La vue principale qui joue le rôle de modèle pour insérer les autres composants.
│ ├── App.css : Le style global appliqué à l'application.
Le composant principal App.js
Le contenu par défaut du composant principal doit être supprimé et remplacé par votre propre modèle. Ce fichier sert de point d'entrée pour votre application React, où vous pouvez définir la structure de votre interface utilisateur.
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>
Éditez le fichier <code>src/App.js</code> et sauvegardez pour recharger.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Apprenez React
</a>
</header>
</div>
/* Fin du contenu par défaut */
);
}
export default App;
Lancer le projet créé
Exemple : Créer le composant Test
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 le composant Test */
import Test from './Test.js'
function App() {
return (
/* Afficher le contenu du composant 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.
import react,{Component} from "react"
class Test extends Component
{
render()
{
return (<div> hello iam class</div>
)
}
}
export default Test;
function Abc()
{
return (
<div className="classA"> hello je suis composant abc</div>
)
}
export default Abc;
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;
