Challenge for Section 1

Now that you have completed Section 1 (“Intro, Setup, and ES6 Basics”), here’s a set of challenging tasks to test the skills and knowledge you have acquired.

You are given a person’s name data in the form of an object.

const name = {
  given: "John",
  family: "Doe"
};

Using the name object, employ a multi-line template literal, interpolate destructured given name and family name variables, and return the resulting string in a React component, called Greeting. such that it looks like the image below.

Create the Greeting component using the following React setups:

1. An online playground, such as CodePen, or CodeSandbox.
2. An HTML page which loads React and a stand-alone JSX compiler from a CDN, for development purposes only.
3. An HTML page which loads React from a CDN, and pre-processes JSX, to create a production build.
4. The popular Create React App toolchain.

This is the end of Section 1.

Next Up…

In the next section, we will introduce the concepts of React in a step-by-step way.