React est une bibliothèque front développée par Facebook qui facilite le développement d’applications web.

La base du fonctionnement de react

SPA ( Singe-Page-Application )

À l’inverse des pages webs “classiques” qui rechargent toute la page lors d’un changement de page, une SPA va charger dynamiquement le contenu de la page, grâce à Javascript. Cela permet de créer des pages plus rapides, plus réactives.

Les composants

Les composants sont la base du fonctionnement de react, ils permettent d’écrire du code ré-utilisable.

type ProfileProps = {
	name: string
}

const Profile: React.FC<Props> = ({name}) => {
	return <p>Hello {name} </p>
}

const App = () => {
	return <Profile name='Julian' />
}

Les routes

Les applications web contiennent souvent plusieurs fonctionnalités et afin de les organiser, nous allons définir des routes (urls).

Le router va permettre de définir quel composant affiché en fonction de la route correspondante.

const router = createBrowserRouter([
  {
    path: "/",
    element: <App />,
    children: [
      {
        path: "/",
        element: <Home />,
      },
    ],
  },
])

Les hooks

Les hook sont des fonctions spéciales qui permettent de simplifier le code et permet de réutiliser la logique dans plusieurs composants

const useAccount = () => {
	const account = fakeAccount()
	
	return { account, isLoggedIn: !!account }
}

const App: React.FC = () => {
	const {account, isLoggedIn} = useAccount()
	
	return isLogged ? account.name : 'Inconnu'
}

Le rendu conditionnel

const App = () => {
	const isLoggedIn = useAuth()

	return isLoggedIn ? 'Connecté' : 'Déconnecté'
}

Le contexte

useContext est un Hook de React qui permet de lire et de s'abonner à un contexte depuis votre composant.

Dans cet exemple, on crée un contexte pour le theme ce qui permet d’accéder à cette valeur n’importe où.

<aside> 💡

Le contexte est à utiliser pour ces types de cas: