• 10 hours
  • Medium

Free online content available in this course.



Got it!

Last updated on 3/31/22

Check out the `App` component

Log in or subscribe for free to enjoy all this course has to offer!

 <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.

Example of certificate of achievement
Example of certificate of achievement