Course: Section

Get Started with Modern React: Intro, Setup, and ES6 Basics

Episode: Title

S01・V14: Challenge (Section 1)

Date Created: July 17th, 2019
Last Updated: 27 days ago

Watch Video
Duration: 1m 22s

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.

Greeting component

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.