/lab-react-dev-squad-152

Primary LanguageJavaScript

Screenshot

Goal

To goal of this exercise is to create a React website (with create-react-app) similar to this: image

List of components

For this exercise, we will create 6 components:

  • App
  • Navbar
  • SectionStudents
  • Flag with a props country
  • SectionTopicsToRecap
  • PostIt with a props color and a props children

Tips

Generate a React application

To generate a React application, you need to type:

npx create-react-app the-name-of-my-application

Display a flag

To get the picture of a flag, you can rely on these links:

Loop in JSX

One way to loop through an array in JavaScript is to do:

<ul>
  {myArray.map((element,i) => <li key={i}>
    My element {i} is: {JSON.stringify(element)}
  </li>)}
</ul>

Inline styling

To do inline styling, you have to give an attribute style where the value is an object.

Example:

<span style={{color: gender === "male" ? "blue" : "red"}}>...</span>