diff --git a/content/tutorial/nav.yml b/content/tutorial/nav.yml index 8d498ab14..57d20f18e 100644 --- a/content/tutorial/nav.yml +++ b/content/tutorial/nav.yml @@ -1,111 +1,111 @@ -- title: Tutorial +- title: Tutoriel items: - id: before-we-start-the-tutorial - title: Before We Start the Tutorial + title: Avant de commencer le tutoriel href: /tutorial/tutorial.html#before-we-start-the-tutorial forceInternal: true subitems: - id: what-are-we-building - title: What Are We Building? + title: Que construisons-nous ? href: /tutorial/tutorial.html#what-are-we-building forceInternal: true - id: prerequisites - title: Prerequisites + title: Prérequis href: /tutorial/tutorial.html#prerequisites forceInternal: true - id: setup-for-the-tutorial - title: Setup for the Tutorial + title: Mise en place du tutoriel href: /tutorial/tutorial.html#setup-for-the-tutorial forceInternal: true subitems: - id: setup-option-1-write-code-in-the-browser - title: "Option 1: Write Code in the Browser" + title: "Option 1 : Écrire le code dans le navigateur" href: /tutorial/tutorial.html#setup-option-1-write-code-in-the-browser forceInternal: true - id: setup-option-2-local-development-environment - title: "Option 2: Local Development Environment" + title: "Option 2 : environnement de développement local" href: /tutorial/tutorial.html#setup-option-2-local-development-environment forceInternal: true - id: help-im-stuck - title: Help, I'm Stuck! + title: À l’aide, je suis bloqué·e ! href: /tutorial/tutorial.html#help-im-stuck forceInternal: true - id: overview - title: Overview + title: Aperçu href: /tutorial/tutorial.html#overview forceInternal: true subitems: - id: what-is-react - title: What Is React? + title: Qu’est-ce que React ? href: /tutorial/tutorial.html#what-is-react forceInternal: true - id: inspecting-the-starter-code - title: Inspecting the Starter Code + title: Examiner le code de départ href: /tutorial/tutorial.html#inspecting-the-starter-code forceInternal: true - id: passing-data-through-props - title: Passing Data Through Props + title: Passer des données via les props href: /tutorial/tutorial.html#passing-data-through-props forceInternal: true - id: making-an-interactive-component - title: Making an Interactive Component + title: Réaliser un composant interactif href: /tutorial/tutorial.html#making-an-interactive-component forceInternal: true - id: developer-tools - title: Developer Tools + title: Outils de développement href: /tutorial/tutorial.html#developer-tools forceInternal: true - id: completing-the-game - title: Completing the Game + title: Finaliser le jeu href: /tutorial/tutorial.html#completing-the-game forceInternal: true subitems: - id: lifting-state-up - title: Lifting State Up + title: Faire remonter l’état href: /tutorial/tutorial.html#lifting-state-up forceInternal: true - id: why-immutability-is-important - title: Why Immutability Is Important + title: Pourquoi l’immutabilité est importante href: /tutorial/tutorial.html#why-immutability-is-important forceInternal: true - id: function-components - title: Function Components + title: Fonctions composants href: /tutorial/tutorial.html#function-components forceInternal: true - id: taking-turns - title: Taking Turns + title: Jouer tour à tour href: /tutorial/tutorial.html#taking-turns forceInternal: true - id: declaring-a-winner - title: Declaring a Winner + title: Déclarer un·e gagnant·e href: /tutorial/tutorial.html#declaring-a-winner forceInternal: true - id: adding-time-travel - title: Adding Time Travel + title: Ajouter du voyage dans le temps href: /tutorial/tutorial.html#adding-time-travel forceInternal: true subitems: - id: storing-a-history-of-moves - title: Storing a History of Moves + title: Stocker un historique des mouvements href: /tutorial/tutorial.html#storing-a-history-of-moves forceInternal: true - id: lifting-state-up-again - title: Lifting State Up, Again + title: Faire remonter l’état, encore href: /tutorial/tutorial.html#lifting-state-up-again forceInternal: true - id: showing-the-past-moves - title: Showing the Past Moves + title: Afficher les mouvements passés href: /tutorial/tutorial.html#showing-the-past-moves forceInternal: true - id: picking-a-key - title: Picking a Key + title: Choisir une key href: /tutorial/tutorial.html#picking-a-key forceInternal: true - id: implementing-time-travel - title: Implementing Time Travel + title: Implémenter le voyage dans le temps href: /tutorial/tutorial.html#implementing-time-travel forceInternal: true - id: wrapping-up - title: Wrapping Up + title: Pour finir href: /tutorial/tutorial.html#wrapping-up forceInternal: true diff --git a/content/tutorial/tutorial.md b/content/tutorial/tutorial.md index 9e1e58872..09545c730 100644 --- a/content/tutorial/tutorial.md +++ b/content/tutorial/tutorial.md @@ -1,6 +1,6 @@ --- id: tutorial -title: "Tutorial: Intro to React" +title: "Tutoriel : intro à React" layout: tutorial sectionid: tutorial permalink: tutorial/tutorial.html @@ -12,99 +12,99 @@ redirect_from: - "docs/tutorial-zh-CN.html" --- -This tutorial doesn't assume any existing React knowledge. +Ce tutoriel ne présuppose aucune connaissance préalable de React. -## Before We Start the Tutorial {#before-we-start-the-tutorial} +## Avant de commencer le tutoriel {#before-we-start-the-tutorial} -We will build a small game during this tutorial. **You might be tempted to skip it because you're not building games -- but give it a chance.** The techniques you'll learn in the tutorial are fundamental to building any React apps, and mastering it will give you a deep understanding of React. +Nous allons construire un petit jeu pendant ce tutoriel. **Vous pourriez être tenté·e de l’ignorer sous prétexte que vous ne construisez pas de jeux—mais donnez-lui sa chance.** Les techniques que vous apprendrez dans ce tutoriel sont fondamentales pour la construction de n’importe quel type d’appli React, et les maîtriser vous apportera une compréhension profonde de React. ->Tip +>Astuce > ->This tutorial is designed for people who prefer to **learn by doing**. If you prefer learning concepts from the ground up, check out our [step-by-step guide](/docs/hello-world.html). You might find this tutorial and the guide complementary to each other. +>Ce tutoriel est conçu pour les personnes qui préfèrent **apprendre en faisant**. Si vous préférez apprendre les concepts à partir de la base, jetez un œil à notre [guide pas à pas](/docs/hello-world.html). Vous constaterez peut-être que le guide et ce tutoriel sont complémentaires l’un à l’autre. -The tutorial is divided into several sections: +Le tutoriel est découpé en plusieurs sections : -* [Setup for the Tutorial](#setup-for-the-tutorial) will give you **a starting point** to follow the tutorial. -* [Overview](#overview) will teach you **the fundamentals** of React: components, props, and state. -* [Completing the Game](#completing-the-game) will teach you **the most common techniques** in React development. -* [Adding Time Travel](#adding-time-travel) will give you **a deeper insight** into the unique strengths of React. +* [Mise en place du tutoriel](#setup-for-the-tutorial) vous donnera un **point de départ** pour suivre le tutoriel. +* [Aperçu](#overview) vous apprendra **les fondamentaux** de React : composants, props et état local. +* [Finaliser le jeu](#completing-the-game) vous apprendra **les techniques les plus courantes** de développement React. +* [Ajouter du voyage dans le temps](#adding-time-travel) vous donnera **une perception plus approfondie** des forces particulières de React. -You don't have to complete all of the sections at once to get the value out of this tutorial. Try to get as far as you can -- even if it's one or two sections. +Il n’est pas nécessaire de compléter toutes les sections d’un coup pour tirer le meilleur parti de ce tutoriel. Essayez d’aller aussi loin que vous le pouvez—même si ce n’est qu’une ou deux sections. -It's fine to copy and paste code as you're following along the tutorial, but we recommend to type it by hand. This will help you develop a muscle memory and a stronger understanding. +Vous pouvez tout à fait copier-coller le code au fil du tutoriel, mais nous vous conseillons de le taper vous-même. Cela vous aidera à développer une mémoire musculaire et une meilleure compréhension. -### What Are We Building? {#what-are-we-building} +### Que construisons-nous ? {#what-are-we-building} -In this tutorial, we'll show how to build an interactive tic-tac-toe game with React. +Dans ce tutoriel, nous allons voir comment construire un jeu de morpion interactif avec React. -You can see what we'll be building here: **[Final Result](https://codepen.io/gaearon/pen/gWWZgR?editors=0010)**. If the code doesn't make sense to you, or if you are unfamiliar with the code's syntax, don't worry! The goal of this tutorial is to help you understand React and its syntax. +Vous pouvez voir ce que ça va donner ici : **[résultat final](https://codepen.io/gaearon/pen/gWWZgR?editors=0010)**. Si le code vous semble obscur, ou si vous n’êtes pas à l’aise avec la syntaxe du code, ne vous inquiétez pas ! C’est justement l’objectif de ce tutoriel de vous aider à comprendre React et sa syntaxe. -We recommend that you check out the tic-tac-toe game before continuing with the tutorial. One of the features that you'll notice is that there is a numbered list to the right of the game's board. This list gives you a history of all of the moves that have occurred in the game, and is updated as the game progresses. +Nous vous conseillons de jeter un coup d'œil à ce jeu de morpion avant de continuer ce tutoriel. Une des fonctionnalités que vous remarquerez, c’est qu’il affiche une liste numérotée sur la droite du plateau de jeu. Cette liste vous fournit un historique des tours de jeu, et elle est mise à jour au fil de l’eau. -You can close the tic-tac-toe game once you're familiar with it. We'll be starting from a simpler template in this tutorial. Our next step is to set you up so that you can start building the game. +Vous pouvez refermer le jeu de morpion une fois que vous en avez bien fait le tour. Nous commencerons par un gabarit plus simple pour ce tutoriel. Notre prochaine étape consiste à mettre le nécessaire en place, sur votre machine, pour que vous puissiez commencer à construire le jeu. -### Prerequisites {#prerequisites} +### Prérequis {#prerequisites} -We'll assume that you have some familiarity with HTML and JavaScript, but you should be able to follow along even if you're coming from a different programming language. We'll also assume that you're familiar with programming concepts like functions, objects, arrays, and to a lesser extent, classes. +Nous supposerons que vous êtes un minimum à l’aise avec HTML et JavaScript, mais même si vous venez d’un autre langage de programmation vous devriez être capable de suivre le déroulé. Nous supposerons aussi que vous connaissez déjà les notions de programmation telles que les fonctions, objets, tableaux, et dans une moindre mesure, les classes. -If you need to review JavaScript, we recommend reading [this guide](https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript). Note that we're also using some features from ES6 -- a recent version of JavaScript. In this tutorial, we're using [arrow functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions), [classes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes), [`let`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let), and [`const`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const) statements. You can use the [Babel REPL](babel://es5-syntax-example) to check what ES6 code compiles to. +Si vous avez besoin de réviser votre JavaScript, nous vous conseillons la lecture de [ce guide](https://developer.mozilla.org/fr/docs/Web/JavaScript/Une_réintroduction_à_JavaScript). Remarquez que nous utilisons aussi certains aspects d’ES6—une version récente de JavaScript. Dans ce tutoriel, on utilise les [fonctions fléchées](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Fonctions/Fonctions_fléchées), les [classes](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Classes), et les instructions [`let`](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Instructions/let), et [`const`](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Instructions/const). Vous pouvez utiliser la [REPL Babel](babel://es5-syntax-example) pour examiner le résultat de la compilation de code ES6. -## Setup for the Tutorial {#setup-for-the-tutorial} +## Mise en place du tutoriel {#setup-for-the-tutorial} -There are two ways to complete this tutorial: you can either write the code in your browser, or you can set up a local development environment on your computer. +Il y a deux façons de suivre ce tutoriel : vous pouvez soit écrire le code dans votre navigateur, soit configurer un environnement de développement local sur votre ordinateur. -### Setup Option 1: Write Code in the Browser {#setup-option-1-write-code-in-the-browser} +### Option 1 : Écrire le code dans le navigateur {#setup-option-1-write-code-in-the-browser} -This is the quickest way to get started! +C’est la façon la plus rapide de démarrer ! -First, open this **[Starter Code](https://codepen.io/gaearon/pen/oWWQNa?editors=0010)** in a new tab. The new tab should display an empty tic-tac-toe game board and React code. We will be editing the React code in this tutorial. +Tout d’abord, ouvrez ce **[code de départ](https://codepen.io/gaearon/pen/oWWQNa?editors=0010)** dans un nouvel onglet. L’onglet devrait alors afficher un plateau de jeu de morpion vide, et du code React. Nous modifierons celui-ci au fil de ce tutoriel. -You can now skip the second setup option, and go to the [Overview](#overview) section to get an overview of React. +Vous pouvez maintenant sauter la seconde option de mise en place, et aller directement à la section [Aperçu](#overview) pour faire un premier survol de React. -### Setup Option 2: Local Development Environment {#setup-option-2-local-development-environment} +### Option 2 : environnement de développement local {#setup-option-2-local-development-environment} -This is completely optional and not required for this tutorial! +C’est une démarche complètement optionnelle, qui n’a rien d’obligatoire pour ce tutoriel !
-Optional: Instructions for following along locally using your preferred text editor +Optionnel : instructions pour suivre le tuto localement dans votre éditeur de texte préféré -This setup requires more work but allows you to complete the tutorial using an editor of your choice. Here are the steps to follow: +Cette mise en place requiert un peu plus de boulot mais vous permet de réaliser le tutoriel dans l’éditeur de votre choix. Voici les étapes à suivre : -1. Make sure you have a recent version of [Node.js](https://nodejs.org/en/) installed. -2. Follow the [installation instructions for Create React App](/docs/create-a-new-react-app.html#create-react-app) to make a new project. +1. Assurez-vous de disposer d’une version installée de [Node.js](https://nodejs.org/fr/) suffisamment récente. +2. Suivez les [instructions d’installation de Create React App](/docs/create-a-new-react-app.html#create-react-app) pour créer un nouveau projet. ```bash npx create-react-app my-app ``` -3. Delete all files in the `src/` folder of the new project +3. Supprimez tous les fichiers du dossier `src/` présent dans le nouveau projet. -> Note: +>Remarque > ->**Don't delete the entire `src` folder, just the original source files inside it.** We'll replace the default source files with examples for this project in the next step. +>**Ne supprimez pas le dossier `src` lui-même, juste les fichiers sources à l’intérieur.** Nous remplacerons les fichiers sources par défaut avec des exemples pour ce projet dans la prochaine étape. ```bash cd my-app cd src -# If you're using a Mac or Linux: +# Si vous utilisez Mac ou Linux : rm -f * -# Or, if you're on Windows: +# Ou si vous êtes sur Windows : del * -# Then, switch back to the project folder +# Ensuite, revenez à la racine du projet cd .. ``` -4. Add a file named `index.css` in the `src/` folder with [this CSS code](https://codepen.io/gaearon/pen/oWWQNa?editors=0100). +4. Ajoutez un fichier nommé `index.css` dans le dossier `src/` et mettez-y [ce code CSS](https://codepen.io/gaearon/pen/oWWQNa?editors=0100). -5. Add a file named `index.js` in the `src/` folder with [this JS code](https://codepen.io/gaearon/pen/oWWQNa?editors=0010). +5. Ajoutez un fichier nommé `index.js` dans le dossier `src/` et mettez-y [ce code JS](https://codepen.io/gaearon/pen/oWWQNa?editors=0010). -6. Add these three lines to the top of `index.js` in the `src/` folder: +6. Ajoutez les trois lignes suivantes tout en haut du `index.js` dans le dossier `src/` : ```js import React from 'react'; @@ -112,32 +112,32 @@ import ReactDOM from 'react-dom'; import './index.css'; ``` -Now if you run `npm start` in the project folder and open `http://localhost:3000` in the browser, you should see an empty tic-tac-toe field. +Vous pouvez maintenant exécuter `npm start` dans le dossier du projet et ouvrir `http://localhost:3000` dans votre navigateur, ce qui devrait vous afficher un plateau de morpion vide. -We recommend following [these instructions](https://babeljs.io/docs/editors/) to configure syntax highlighting for your editor. +Nous vous conseillons de suivre [ces instructions](https://babeljs.io/docs/editors/) pour configurer la coloration syntaxique de votre éditeur.
-### Help, I'm Stuck! {#help-im-stuck} +### À l’aide, je suis bloqué·e ! {#help-im-stuck} -If you get stuck, check out the [community support resources](/community/support.html). In particular, [Reactiflux Chat](https://discord.gg/0ZcbPKXt5bZjGY5n) is a great way to get help quickly. If you don't receive an answer, or if you remain stuck, please file an issue, and we'll help you out. +Si vous vous retrouvez bloqué·e, jetez un coup d'œil aux [ressources communautaires de support](/community/support.html). [Le chat Reactiflux](https://discord.gg/0ZcbPKXt5bZjGY5n), notamment, est super utile pour obtenir de l’aide rapidement. Si vous ne recevez pas de réponse, ou si elle ne vous débloque pas, merci de nous le signaler par une *issue* dans GitHub, et nous ferons de notre mieux pour vous aider. -## Overview {#overview} +## Aperçu {#overview} -Now that you're set up, let's get an overview of React! +À présent que la mise en place est faite, faisons un tour d’horizon de React ! -### What Is React? {#what-is-react} +### Qu’est-ce que React ? {#what-is-react} -React is a declarative, efficient, and flexible JavaScript library for building user interfaces. It lets you compose complex UIs from small and isolated pieces of code called "components". +React est une bibliothèque JavaScript déclarative, efficace et flexible pour construire des interfaces utilisateurs (UI). Elle vous permet de composer des UI complexes à partir de petits morceaux de code isolés appelés « composants ». -React has a few different kinds of components, but we'll start with `React.Component` subclasses: +React a plusieurs types distincts de composants, mais nous commencerons avec les sous-classes de `React.Component` : ```javascript class ShoppingList extends React.Component { render() { return (
-

Shopping List for {this.props.name}

+

Liste de courses pour {this.props.name}