React Create Element Lab

Overview

In this lab, you'll build a simple view using createElement().

Representing

Internet.

Your task will be to create a React element that represents you (or a close approximation, hopefully)! In the src/index.js file create a variable called meInReact. This variable should be a React element, and should have the following structure:

<div class="me">
  <h1>An Awesome Person</h1>
  <p>Who is learning React</p>

  <ul class="my-interests">
    <li>JavaScript</li>
    <li>React</li>
    <li>Movies</li>
    <li>Ice cream</li>
  </ul>
</div>

To start the application type this in the terminal:

npm install
npm start

To run the test suite type this in the terminal:

npm test

Feel free to render out the component in the DOM using ReactDOM.render().

NOTE!!

Ignore this error message:

Warning: Each child in an array or iterator should have a unique "key" prop. Check the top-level render call using

    in li.

We will cover how to fix this error in a later lesson.

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