React – Notions de base

Fonction App

Environnement de l’applicationn

Fichier index.html


<!DOCTYPE html>
<html lang="en">
  <head>
    <title>JSX</title>
    <link rel="stylesheet" href="styles.css" />
  </head>

  <body>
    <div id="root"></div>
    <script src="../src/index.js" type="text/javascript"></script>
  </body>
</html>

Fichier index.js


import React from "react";
import ReactDOM from "react-dom";
import App from "./components/App";

ReactDOM.render(
  <App />,
  document.getElementById("root")
);

Fichier Heading.js


import React from "react";

function Heading(){
  return  <h1 className="blue">Mes plats favoris</h1>
}

export default Heading;

Fichier index.js


import React from "react";

function Liste(){
  return  ( 
    <ul>
        <li>Jambon</li>
        <li>Omelette</li>
        <li>Pates</li>
    </ul>
  );
}

export default Liste;

Fichier App.js


import React from "react";
import Heading from "./Heading";
import Liste from "./Liste";

function App() {
   return (
    <div>
        <Heading />
        <Liste />
    </div>
   );
}

export default App;

Codesandbox

Publier 1 décembre 2020 par sm2017 dans React - Notions de base Commentaires fermés

Les props

Environnement de l’applicationn

Fichier index.html


<!DOCTYPE html>
<html lang="en">
  <head>
    <title>JSX</title>
    <link rel="stylesheet" href="styles.css" />
  </head>

  <body>
    <div id="root"></div>
    <script src="../src/index.js" type="text/javascript"></script>
  </body>
</html>

Fichier Index.js


import React from "react";
import ReactDOM from "react-dom";

function Card(props) {
    return <div>
        <h2>{props.name}</h2>
        <img
          src={props.img}
          alt="avatar_img"
        />
        <p>{props.tel}</p>
        <p>{props.email}</p>
    </div>
}

ReactDOM.render(
    <div>
    <h1>My Contacts</h1>
        <Card  name="Beyonce" img="https://blackhistorywall.files.wordpress.com/2010/02/picture-device-independent-bitmap-119.jpg" tel= "+123 456 789" email="b@beyonce.com" />
        
    </div>,
  document.getElementById("root")
);

Codesandbox

Publier 2 décembre 2020 par sm2017 dans React - Notions de base Commentaires fermés

Créer un composant

Il existe 2 sortes de composant :

Composant de fonction

– plus performant

– plus concis

– pas de gestion du state

– pas de gestion du cycle de vie

composant de classe

– gestion du state

– gestion du cycle de vie

– moins performant

– plus long à écrire

index.html


<!--  Positionnement des composants  -->
<div id="app"></div>

Modèle de composant de classe


import React, { Component } from 'react'

export default class App extends Component {
  render() {
    return (
      
        
      
    )
  }
}

Modèle de composant de fonction


import React from 'react'

export default function App() {
  return (
    
      
    
  )
}

Jsfiddle

Publier 2 avril 2020 par Michel PIALLIER dans React - Les composants Commentaires fermés

« Previous 1 2 3