React Fundamentals

0% completed

Previous
Next
Code Challenge

Challenge 1: Create and Use Functional Components

Follow these instructions to complete your challenge:

  1. Inside the App.jsx file found in the component/src directory, create two separate functional components:
    • ComponentOne that returns an <h1> element with the text "This is Component One".
    • ComponentTwo that returns an <h1> element with the text "This is Component Two".
  2. Inside the App component, call ComponentOne and ComponentTwo in order, so they appear on the screen.

Expected Output on Screen:

This is Component One This is Component Two

Challenge 2: Create and Import Components

Follow these instructions to complete your challenge:

  1. In the component/src directory, create two files and name them - ComponentOne.jsx and ComponentTwo.jsx.
  2. Inside the ComponentOne.jsx file, create a functional component called ComponentOne that returns an <h1> element with the text "This is Component One".
  3. Inside the ComponentTwo.jsx file, create a functional component called ComponentTwo that returns an <h1> element with the text "This is Component Two".
  4. Import both files into the App.jsx file.
  5. Inside the App component in the App.jsx file, call ComponentOne and ComponentTwo in order, so they appear on the screen.

.....

.....

.....

Like the course? Get enrolled and start learning!
Previous
Next