React

À propos de moi

  • Développeur Web
  • Permis motocyclette
  • Enseignant
  • Auto-entrepreneur
  • Pur produit de l'ESGI ™
  • Cascadeur
  • Dompteur de tigre
  • Charmeur de serveur
  • Envoyé du JSX
  • Hérault des constantes
  • Porteur des fonctions pures

React

Qu'est-ce que c'est ?

  • Framework Une librairie
  • Facilite la création d'application Web monopages
  • Créé en 2013
  • Créé par Meta (Facebook)
  • Supporté par Meta et ses contributeurs Open-Source

Qui

utilise React ?

  • Facebook
  • Instagram
  • AirBnB
  • Discord
  • Wix
  • ...

Expérience

avec le framework React

Frameworks

hors React

  • Angular & RxJS (projets personnels)
  • Vue, VueX, Nuxt (3 ans en alternance)
  • Svelte (projets personnels)

React

À quoi ça ressemble ?

HTML

<!DOCTYPE html>
<html lang="en-US">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="React">
        <title>React</title>
        <script src="./index.js" type="module"></script>
    </head>
    <body>
        <div id="root"></div>
    </body>
</html>

HTML

<!DOCTYPE html>
<html lang="en-US">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="React">
        <title>React</title>
        <script src="./index.js" type="module"></script>
    </head>
    <body>
        <div id="root"></div>
    </body>
</html>

HTML

<!DOCTYPE html>
<html lang="en-US">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="React">
        <title>React</title>
        <script src="./index.js" type="module"></script>
    </head>
    <body>
        <div id="root"></div>
    </body>
</html>

Composant

export const Title = ({ children }) => {
    return (
        <h1>{children}</h1>
    )
}

Composant

export const Title = ({ children }) => {
    return (
        <h1>{children}</h1>
    )
}

Composant

export const Title = ({ children }) => {
    return (
        <h1>{children}</h1>
    )
}

Fichier principal

import { createRoot } from "react-dom/client"
import { Title } from "./components/title"

const rootElement = document.getElementById("root")

if (!rootElement) {
    throw new Error("Root element not found")
}

const root = createRoot(rootElement)

root.render(
    <Title>Hello, world!</Title>
)

Fichier principal

import { createRoot } from "react-dom/client"
import { Title } from "./components/title"

const rootElement = document.getElementById("root")

if (!rootElement) {
    throw new Error("Root element not found")
}

const root = createRoot(rootElement)

root.render(
    <Title>Hello, world!</Title>
)

Fichier principal

import { createRoot } from "react-dom/client"
import { Title } from "./components/title"

const rootElement = document.getElementById("root")

if (!rootElement) {
    throw new Error("Root element not found")
}

const root = createRoot(rootElement)

root.render(
    <Title>Hello, world!</Title>
)

Fichier principal

import { createRoot } from "react-dom/client"
import { Title } from "./components/title"

const rootElement = document.getElementById("root")

if (!rootElement) {
    throw new Error("Root element not found")
}

const root = createRoot(rootElement)

root.render(
    <Title>Hello, world!</Title>
)

Fichier principal

import { createRoot } from "react-dom/client"
import { Title } from "./components/title"

const rootElement = document.getElementById("root")

if (!rootElement) {
    throw new Error("Root element not found")
}

const root = createRoot(rootElement)

root.render(
    <Title>Hello, world!</Title>
)

Fichier principal

import { createRoot } from "react-dom/client"
import { Title } from "./components/title"

const rootElement = document.getElementById("root")

if (!rootElement) {
    throw new Error("Root element not found")
}

const root = createRoot(rootElement)

root.render(
    <Title>Hello, world!</Title>
)

Ressources

Pour suivre avec moi

Liens

React

By Amin Nairi

Made with Slides.com

React

React Conference ESGI 2022 Slides

  • 12

More from Amin Nairi