HomePage translation

Author: JeremiePat

content/home/examples/a-component-using-external-plugins.js

@@ -2,7 +2,7 @@ class MarkdownEditor extends React.Component {
   constructor(props) {
     super(props);
     this.handleChange = this.handleChange.bind(this);
-    this.state = { value: 'Hello, **world**!' };
+    this.state = { value: 'Bonjour, **monde**!' };
   }
 
   handleChange(e) {
@@ -17,16 +17,16 @@ class MarkdownEditor extends React.Component {
   render() {
     return (
       <div className="MarkdownEditor">
-        <h3>Input</h3>
+        <h3>Entrée</h3>
         <label htmlFor="markdown-content">
-          Enter some markdown
+          Saisissez du markdown
         </label>
         <textarea
           id="markdown-content"
           onChange={this.handleChange}
           defaultValue={this.state.value}
         />
-        <h3>Output</h3>
+        <h3>Sortie</h3>
         <div
           className="content"
           dangerouslySetInnerHTML={this.getRawMarkup()}

content/home/examples/a-component-using-external-plugins.md

@@ -1,7 +1,7 @@
 ---
-title: A Component Using External Plugins
+title: Un composant avec des plugins tiers
 order: 3
 domid: markdown-example
 ---
 
-React allows you to interface with other libraries and frameworks. This example uses **remarkable**, an external Markdown library, to convert the `<textarea>`'s value in real time.
+React est flexible et fournis divers moyens d'utiliser d'autres bibliothèques ou frameworks. Cet exemple utilise **remarkable**, une bibliothèque tiers pour gérer le format Markdown, qui permet de convertir le contenue de la balise `<textarea>` en temps réel.

content/home/examples/a-simple-component.js

@@ -2,13 +2,13 @@ class HelloMessage extends React.Component {
   render() {
     return (
       <div>
-        Hello {this.props.name}
+        Salut {this.props.name}
       </div>
     );
   }
 }
 
 ReactDOM.render(
-  <HelloMessage name="Taylor" />,
+  <HelloMessage name="Thierry" />,
   document.getElementById('hello-example')
-);
+);

content/home/examples/a-simple-component.md

@@ -1,9 +1,9 @@
 ---
-title: A Simple Component
+title: Un composant simple
 order: 0
 domid: hello-example
 ---
 
-React components implement a `render()` method that takes input data and returns what to display. This example uses an XML-like syntax called JSX. Input data that is passed into the component can be accessed by `render()` via `this.props`.
+Les composants React implémentent une méthode `render()` qui prend des données en entrée et retourne ce qui doit être affiché. Cet exemple utilise une syntaxe qui ressemble à du XML et que l'on appelle JSX. Les données passées au composant sont accessibles dans `render()` via `this.props`.
 
-**JSX is optional and not required to use React.** Try the [Babel REPL](babel://es5-syntax-example) to see the raw JavaScript code produced by the JSX compilation step.
+**JSX est optionnel et certainement pas un pré-requis pour utiliser React.** Essayez [Babel REPL](babel://es5-syntax-example) pour examiner le code JavaScript brut produit lors de la compilation du format JSX.

content/home/examples/a-stateful-component.js

@@ -21,7 +21,7 @@ class Timer extends React.Component {
   render() {
     return (
       <div>
-        Seconds: {this.state.seconds}
+        Secondes: {this.state.seconds}
       </div>
     );
   }
@@ -30,4 +30,4 @@ class Timer extends React.Component {
 ReactDOM.render(
   <Timer />,
   document.getElementById('timer-example')
-);
+);

content/home/examples/a-stateful-component.md

@@ -1,7 +1,7 @@
 ---
-title: A Stateful Component
+title: Un composant dynamique
 order: 1
 domid: timer-example
 ---
 
-In addition to taking input data (accessed via `this.props`), a component can maintain internal state data (accessed via `this.state`). When a component's state data changes, the rendered markup will be updated by re-invoking `render()`.
+En plus de pouvoir recevoir des données (auxquelles on peut accéder via `this.props`), un composant peut maintenir un état et des données associées (auxquelles on peut accéder via `this.state`). Lorsque l'état d'un composant change, son affichage est mis à jour en appelant `render()` une nouvelle fois.

content/home/examples/an-application.js

@@ -9,19 +9,19 @@ class TodoApp extends React.Component {
   render() {
     return (
       <div>
-        <h3>TODO</h3>
+        <h3>A faire</h3>
         <TodoList items={this.state.items} />
         <form onSubmit={this.handleSubmit}>
           <label htmlFor="new-todo">
-            What needs to be done?
+            Que faut-il faire ?
           </label>
           <input
             id="new-todo"
             onChange={this.handleChange}
             value={this.state.text}
           />
           <button>
-            Add #{this.state.items.length + 1}
+            Ajouter #{this.state.items.length + 1}
           </button>
         </form>
       </div>

content/home/examples/an-application.md

@@ -1,7 +1,7 @@
 ---
-title: An Application
+title: Une application
 order: 2
 domid: todos-example
 ---
 
-Using `props` and `state`, we can put together a small Todo application. This example uses `state` to track the current list of items as well as the text that the user has entered. Although event handlers appear to be rendered inline, they will be collected and implemented using event delegation.
+En utilisant `props`et `state` on peut créer une petite application de gestion des taches. Cet exemple utilise `state` pour maintenir la liste des taches et le texte que l'utilisateur y a associé. Bien que les gestionnaires d'évènements soient définies directement dans le gabarit, ils seront collectés et gérés en utilisant les principes de délégation des évènements.

content/home/marketing/component-based.md

@@ -1,8 +1,8 @@
 ---
-title: Component-Based
+title: A base de composants
 order: 1
 ---
 
-Build encapsulated components that manage their own state, then compose them to make complex UIs.
+Créez des composants autonomes qui maintiennent leur propre état, puis assemblez les pour créer des interfaces graphiques complexes.
 
-Since component logic is written in JavaScript instead of templates, you can easily pass rich data through your app and keep state out of the DOM.
+Dans la mesure où les composants sont gérés via JavaScript plutôt que sous la forme de gabarits, vous pouvez facilement utiliser des données complexes avec vos applications et préserver leur état sans toucher au <abbr lang="en" title="Document Object Model">DOM</abbr>.

content/home/marketing/declarative.md

@@ -1,8 +1,8 @@
 ---
-title: Declarative
+title: Déclarative
 order: 0
 ---
 
-React makes it painless to create interactive UIs. Design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes.
+React rend la création d'interfaces graphiques plaisante. Définissez simplement les vues des différents états de vos applications et React s'occupera de mettre à jour et de rendre les composants qui en on besoin en fonction de vos données.
 
-Declarative views make your code more predictable and easier to debug.
+Le vues déclaratives rendent votre code plus prédictif et plus facile a corriger.

content/home/marketing/learn-once-write-anywhere.md

@@ -1,8 +1,8 @@
 ---
-title: Learn Once, Write Anywhere
+title: Apprendre une fois pour toutes
 order: 2
 ---
 
-We don't make assumptions about the rest of your technology stack, so you can develop new features in React without rewriting existing code.
+Nous ne présumons rien sur les divers technologies que vous utilisez. De cette manière vous pouvez developper de nouvelles fonctionnalités avec React sans réécrire votre code existant.
 
-React can also render on the server using Node and power mobile apps using [React Native](https://facebook.github.io/react-native/).
+React peut aussi être utilisé coté serveur avec Node ou être utilisé pour créer des applications mobiles grâce à [React Native](https://facebook.github.io/react-native/).

gatsby-config.js

@@ -8,10 +8,10 @@
 
 module.exports = {
   siteMetadata: {
-    title: 'React: A JavaScript library for building user interfaces',
+    title: 'React: Une bibliothèque JavaScript pour créer des interfaces graphiques',
     siteUrl: 'https://reactjs.org',
     rssFeedTitle: 'React',
-    rssFeedDescription: 'A JavaScript library for building user interfaces',
+    rssFeedDescription: 'Une bibliothèque JavaScript pour créer des interfaces graphiques',
   },
   mapping: {
     'MarkdownRemark.frontmatter.author': 'AuthorYaml',

src/components/TitleAndMetaTags/TitleAndMetaTags.js

@@ -8,7 +8,7 @@
 import Helmet from 'react-helmet';
 import React from 'react';
 
-const defaultDescription = 'A JavaScript library for building user interfaces';
+const defaultDescription = 'Une bibliothèque JavaScript pour créer des interfaces graphiques';
 
 type Props = {
   title: string,

src/pages/index.js

@@ -51,7 +51,7 @@ class Home extends Component {
     return (
       <Layout location={location}>
         <TitleAndMetaTags
-          title="React &ndash; A JavaScript library for building user interfaces"
+          title="React &ndash; Une bibliothèque JavaScript pour créer des interfaces graphiques"
           ogUrl={createOgUrl('index.html')}
         />
         <div css={{width: '100%'}}>
@@ -134,7 +134,7 @@ class Home extends Component {
                         fontSize: 30,
                       },
                     }}>
-                    A JavaScript library for building user interfaces
+                    Une bibliothèque JavaScript pour créer des interfaces graphiques
                   </p>
                   <Flex
                     valign="center"
@@ -149,12 +149,12 @@ class Home extends Component {
                       <ButtonLink
                         to="/docs/getting-started.html"
                         type="primary">
-                        Get Started
+                        Bien démarrer
                       </ButtonLink>
                     </CtaItem>
                     <CtaItem>
                       <ButtonLink to="/tutorial/tutorial.html" type="secondary">
-                        Take the Tutorial
+                        Suivre le tutoriel
                       </ButtonLink>
                     </CtaItem>
                   </Flex>
@@ -286,12 +286,12 @@ class Home extends Component {
               <Flex valign="center">
                 <CtaItem>
                   <ButtonLink to="/docs/getting-started.html" type="primary">
-                    Get Started
+                    Bien démarrer
                   </ButtonLink>
                 </CtaItem>
                 <CtaItem>
                   <ButtonLink to="/tutorial/tutorial.html" type="secondary">
-                    Take the Tutorial
+                    Suivre le tutoriel
                   </ButtonLink>
                 </CtaItem>
               </Flex>
@@ -312,7 +312,7 @@ Home.propTypes = {
 
 function renderExamplePlaceholder(containerId) {
   ReactDOM.render(
-    <h4>Loading code example...</h4>,
+    <h4>Chargement de l'exemple de code...</h4>,
     document.getElementById(containerId),
   );
 }