logo by @sawaratsuki1004

React

La bibliothèque pour des interfaces utilisateurs web et natives

Créez des interfaces utilisateurs à l’aide de composants

React vous permet de construire des interfaces utilisateurs à partir de briques individuelles appelées composants. Créez vos propres composants tels que Thumbnail, LikeButton, et Video. Puis combinez-les pour produire des écrans, pages et applis entières.

Video.js

function Video({ video }) {
return (
<div>
<Thumbnail video={video} />
<a href={video.url}>
<h3>{video.title}</h3>
<p>{video.description}</p>
</a>
<LikeButton video={video} />
</div>
);
}

Que vous travailliez dans votre coin ou avec des milliers d’autres développeur·se·s, l’utilisation de React est la même. React est conçu pour vous permettre de combiner sans effort des composants produits par des acteurs distincts, qu’il s’agisse de personnes, d’équipes ou d’organisations entières.

Écrivez des composants avec du code et des balises

Les composants React sont des fonctions JavaScript. Envie d’afficher du contenu conditionnellement ? Utilisez un if. Un affichage de liste ? Essayez le map() des tableaux. Apprendre React, c’est apprendre à programmer.

VideoList.js

function VideoList({ videos, emptyHeading }) {
const count = videos.length;
let heading = emptyHeading;
if (count > 0) {
const noun = count > 1 ? 'vidéos' : 'vidéo';
heading = count + ' ' + noun;
}
return (
<section>
<h2>{heading}</h2>
{videos.map(video =>
<Video key={video.id} video={video} />
)}
</section>
);
}

Cette syntaxe de balises s’appelle JSX. C’est une extension de la syntaxe JavaScript, popularisée par React. Conserver votre balisage JSX près de votre logique de rendu facilite la création, la maintenance et le nettoyage de vos composants React.

Ajoutez de l’interactivité partout où vous en avez besoin

Les composants React reçoivent des données et renvoient ce qui devrait appraître à l’écran. Vous pouvez leur passer de nouvelles données en réaction à des interactions, comme une saisie utilisateur dans un champ. React mettra alors à jour l’écran pour refléter les nouvelles données.

SearchableVideoList.js

import { useState } from 'react';

function SearchableVideoList({ videos }) {
const [searchText, setSearchText] = useState('');
const foundVideos = filterVideos(videos, searchText);
return (
<>
<SearchInput
value={searchText}
onChange={newText => setSearchText(newText)} />
<VideoList
videos={foundVideos}
emptyHeading={`Aucun résultat pour « ${searchText} »`} />
</>
);
}

Vous n’avez pas besoin de construire toute votre page en React. Ajoutez React à une page HTML existante, et affichez des composants React interactifs où bon vous semble à l’intérieur.

Passez au full-stack avec un framework

React est une bibliothèque. Il vous permet d’assembler des composants, mais n’est pas prescriptif en ce qui concerne le routage ou le chargement de données. Pour construire une appli entière avec React, nous vous conseillons un framework React full-stack tels que Next.js ou Remix.

confs/[slug].js

import { db } from './database.js';
import { Suspense } from 'react';

async function ConferencePage({ slug }) {
const conf = await db.Confs.find({ slug });
return (
<ConferenceLayout conf={conf}>
<Suspense fallback={<TalksLoading />}>
<Talks confId={conf.id} />
</Suspense>
</ConferenceLayout>
);
}

async function Talks({ confId }) {
const talks = await db.Talks.findAll({ confId });
const videos = talks.map(talk => talk.video);
return <SearchableVideoList videos={videos} />;
}

React est aussi une architecture. Les frameworks qui l’implémentent vous permettent de charger des données dans des composants asynchrones exécutés côté serveur ou même lors du build. Lisez des données depuis un fichier ou une base de données, et passez-les à vos composants interactifs.

Tirez le meilleur de chaque plateforme

Les gens adorent le web et les applis natives pour des raisons différentes. React vous permet de construire tant des applis web que des applis natives avec un même jeu de compétences. Il s’appuie sur les forces uniques de chaque plateforme pour que vos interfaces aient un comportement toujours naturel.

example.com

Restez fidèle au web

Les gens s’attendent à ce que les pages des applis web se chargent rapidement. Coté serveur, React vous permet de commencer à streamer le HTML alors que vous chargez encore des données, en remplissant progressivement le contenu manquant avant même que JavaScript ne soit chargé. Côté client, React utilise des API web standard pour que votre UI reste réactive même en plein milieu d’un rendu.

1:10 PM

Faites du vrai natif

Les gens attendent un aspect et un comportement bien précis des applis natives. React Native et Expo vous permettent de construire des applis en React pour Android, iOS et plus encore. Elles ont un aspect et un comportement natifs parce que leurs UI sont véritablement natives. Ce n’est pas une web view : vos composants React affichent de véritables vues Android et iOS fournies par la plateforme.

Avec React, vous pouvez faire du développement web et natif. Votre équipe peut déployer sur de multiples plateformes sans sacrifier l’expérience utilisateur. Votre organisation peut créer des ponts entre les silos des plateformes et monter des équipes capables de gérer leurs fonctionnalités de bout en bout.

Mettez à jour quand l’avenir est prêt

React fait attention à ses évolutions. Chaque commit React est testé dans des contextes critiques à la mission de plus d’un milliard d’utilisateurs. Les plus de 100 000 composants React de Meta nous aident à valider chaque stratégie de migration.

L’équipe React cherche en permanence à améliorer React. Certains sujets de recherche prennent des années à porter leurs fruits. React met la barre très haut pour infuser la recherche dans la production. Seules les approches aux bénéfices largement prouvés trouvent leur place dans React.

Rejoignez des millions de devs React

Vous n’êtes pas seul·e. Deux millions de devs du monde entier utilisent les docs React tous les mois. React est un choix qui fédère les personnes et les équipes.

Des gens qui font du karaoké à React Conf
Sunil Pai qui parle à React India
Une conversation de couloir entre deux personnes à React Conf
Une conversation de couloir à React India
Elizabet Oliveira qui parle à React Conf
Un groupe qui prend un selfie à React India
Nat Alison qui parle à React Conf
Les organisateurs qui accueillent les participants à React India

C’est pourquoi React est plus qu’une bibliothèque, une architecture, ou même un écosystème. React est une communauté. C’est un endroit où vous pouvez demander de l’aide, trouver de nouvelles opportunités, et vous faire de nouveaux amis. Vous rencontrerez des développeur·se·s et des designers, des débutants et des experts, des chercheurs et des artistes, des enseignants et des étudiants. Nos parcours sont peut-être très différents, mais React nous permet à tou·te·s de créer des interfaces utilisateurs ensemble.

logo by @sawaratsuki1004

Bienvenue dans la communauté React

Commencez