React Jsx Lab

Overview

In this lab, you'll compile your JavaScript into JSX, defining a React component.

Setup

We'll focus on writing JSX code to render components. Make sure you export your components; otherwise the tests won't be able to access your code! The tests will not run until you create components and export them for each of the files below.

Registration form

  1. In the components/RegistrationForm.js file, create a React component called RegistrationForm.
  2. This component should contain the following:
    • One <form> element
    • Two <input> elements — one has a text type, the other one is a password
    • One <button> element with the submit type

FillerText

  1. In the components/FillerText.js file, create a React component called FillerText.
  2. This component should be a paragraph containing the following text: I am a filler text. I can be used to fill your screen. Amazing!

Webpage

  1. In the components/Webpage.js file, create a React component called Webpage.
  2. This component should contain a title with the text The world's coolest webpage.
  3. This component should also contain two instances of the FillerText component.

Note

In JSX, all tags must close. A good example of where this can cause problems is the <input> tag. Writing the tag like this will throw an error if you're not following it somewhere with a corresponding </input> tag. However, if the element has no children — that is, you don't need to put anything between the opening and closing tags — you can just use a self-closing tag like this: <input />.

Resources

Unlock your future in tech
Learn to code.

Learn about Flatiron School's Mission

With a new take on education that falls somewhere between self-taught prodigy and four-year computer science degree, the Flatiron School promises to turn students with little programming experience into developers.

In the six months since the Manhattan coding school was acquired by WeWork, it has spawned locations in Washington, D.C., Brooklyn, and London. Now, WeWork is opening a fourth Flatiron School location, this time in Houston.

Adam Enbar, Flatiron School's cofounder, believes now is the time to grow. "How the world is changing has impacted working and learning in very similar ways. We think education fundamentally is about one thing: enabling people to pursue a better life."

Learn. Love. Code.
Students come to Flatiron School to change their lives. Join our driven community of career-changers and master the skills you need to become a software engineer or a data scientist.
Find Us