Fil d'Ariane
Mis à jour le mardi 7 mars 2017
  • 20 heures
  • Difficile

Ce cours est visible gratuitement en ligne.

Ce cours est en vidéo.

Vous pouvez obtenir un certificat de réussite à l'issue de ce cours.

J'ai tout compris !

Check out the `App` component

Connectez-vous ou inscrivez-vous pour bénéficier de toutes les fonctionnalités de ce cours !

 

 <App />  is the first component your React app will call, and it serves as the container for rendering all the other components in your application.

Open  src/app.js  in your text editor.

At the top you'll see the  import  statements familiar from  src/index.js .

This component imports a few modules, defines a new class  App , and then exports that class as a module.

You might take a minute to make sure you understand how line 1 works. It uses destructuring to set a constant  Component  equal to the property  Component  on the React module object. This is some syntactic sugar that allows you to directly reference  Component  in this file instead of  React.Component .

Line 5 defines the App component class. It inherits from the base  Component  class, and defines only one property here, the  render()  function. All components are expected to define a function called  render()  that is expected to return the elements for the component to render, and you can see that that's what this one does.

This component currently has some placeholder text, and mostly creates static elements that look like normal HTML, with the exception of the  src  attribute of the logo image. That's the only example here of an actual template expression, so let's see how it works.

Inside JSX template tags, curly brackets work differently than they do elsewhere in JavaScript. Here they indicate that the code inside the curly brackets is JavaScript, and that the evaluated value of the JavaScript expression therein should be printed in place of the bracketed code in the generated markup.

Try adding your own template expressions inside the render function's tags to figure out how to render dynamic values in a component. You can put any JavaScript expression (but not statements) inside a pair of curly brackets.

Exemple de certificat de réussite
Exemple de certificat de réussite