Bases de React

Dans ce MON je souhaite me former à l'utilisation des bases de React

Sommaire

1. Components
2. Props
3. States
4. React pour mon site
5. Conclusion

Sources

MON de Lucas Rioual

Documentation et tutos React

Introduction

React est un framework

1. Components

En React, un composant est comme une boîte autonome qui contient une partie spécifique de ce que l'on voit à l'écran. C'est comme si le code étaut constituée de plusieurs briques différentes, et chaque brique est un composant. Un composant peut être aussi bien un petit bouton ou quelque chose de plus complexe comme une barre de navigation, un form... C'est très pratique pour réutiliser un élément d'un code à un autre, ou même plusieurs fois dans le même code.

Exemple de Component très simple, voici un bouton "S'inscrire" placé dans un div :

import React from 'react';
import './Button.css';

const Button = () => {
  return (
    

      S'inscrire
    
  );
};

export default Button;

2. Props

les composants peuvent recevoir des "props", qui sont comme des instructions ou des données que le composant parent transmet à ses composants enfants. Les "props" permettent de personnaliser le comportement d'un composant et de le rendre adaptable et réutilisable dans différentes parties de l'application.

Par exemple, je peux mettre un props à mon component Button créé au dessus :

import React from 'react';
import './Button.css';

const Button = ({ text }) => {
  return (
    

      {text}
    
  );
};

export default Button;

Je peux maintenant créer plusieurs boutons différents :

import React from 'react';
import './App.css';
import Button from './components/Button';

const App = () => {

  return (
    

      
      
    
  );
};

export default App;

3. States

En plus des props, React propose le concept d'état (state) pour gérer les données qui changent au fil du temps à l'intérieur d'un composant.

4. React pour mon site

Pour faire mon site du memory en React j'ai du créer plusieurs components :

• Header :

import React from 'react';
import Button from './Button'; // Assurez-vous d'avoir ce composant et le CSS associé
import './Header.css';

const Header = () => {
  return (
    

      

        
        
      
    
  );
};

export default Header;

• Button :

import React from 'react';
import './Button.css';

const Button = ({ text, onClick }) => {
  return (
    

      {text}
    
  );
};

export default Button;

• LoginForm :

import React from 'react';
import './LoginForm.css';

const LoginForm = () => {
  return (
    

      

        
          Prénom*
        
        
      

      

        
          Nom*
        
        
      

      

        
          Email*
        
        
      

      

        
          Photo de profil
        
        
      

      

        
          Mot de passe*
        
        
      

      

        
          Confirmer le mot de passe*
        
        
      

      
        S'inscrire
      
      Vous avez déjà un compte ? Connectez-vous
    
  );
};

export default LoginForm;

• Container :

import React from 'react';
import ThemeSelection from './ThemeSelection';
import PlayerSelection from './PlayerSelection';
import GridSelection from './GridSelection';
import StartButton from './StartButton';
import './Container.css';

const Container = () => {
  return (
    

      
      
      
      
    
  );
};

export default Container;

• ThemeSelection :

import React from 'react';
import RadioSection from './RadioSection.jsx';
import './ThemeSelection.css';

const ThemeSelection = () => {
  return (
    

      
Select theme
      
    
  );
};

export default ThemeSelection;

• PlayerSelection :

import React from 'react';
import RadioSection from './RadioSection.jsx';
import './GridSelection.css';

const GridSelection = () => {
  return (
    

      
Grid size
      
    
  );
};

export default GridSelection;

• StartButton :

import React from 'react';
import './StartButton.css';

const StartButton = () => {
  return (
    
      Start Game
    
  );
};

export default StartButton;

• RadioSection :

import React from 'react';

const RadioSection = ({ className, options }) => {
  return (
    

      {options.map((option, index) => (
        

          
          {option}
        
      ))}
    
  );
};

export default RadioSection;

Certains de ces components s'imbriquent dans d'autres et tous sont utilisées dans le fichier App.jsx suivant :

import React from 'react';
import Header from './components/Header';
import Container from './components/Container';
import Button from './components/Button';
import LoginForm from './components/LoginForm';
import './App.css';

const App = () => {
  const handleConnexionClick = () => {
    // Gérer le clic sur le bouton de connexion
  };

  const handleInscriptionClick = () => {
    // Gérer le clic sur le bouton d'inscription
  };

  return (
    

      

      

        
      
    
  );
};

export default App;

Conclusion

Grâce à ce MON j'ai pu apprendre les bases de React, notamment comment créer des components et les modifier avec les states ou les personnaliser avec des props.

Temps passé sur le mon :

1. Les components : 1h
2. Les props : 1h
3. Les states : 1h
4. React pour mon site : 7h