Chevron Left Icon
Your First React Component
Lesson 1 of 2
Chevron Right Icon
  1. 1
    React applications are made out of components. What’s a component? A component is a small, reusable chunk of code that is responsible for one job. That job is often to render some HTML. Take …
  2. 2
    Wooo! Your first React component! Take a look at the code on line 1: import React from ‘react’; This line of code creates a new variable. That variable’s name is React, and its value is a partic…
  3. 3
    Now take a look at the code on line 2: import ReactDOM from ‘react-dom’; This line of code is very similar to line 1. Lines 1 and 2 both import JavaScript objects. In both lines, the imported obj…
  4. 4
    You’ve learned that a React component is a small, reusable chunk of code that is responsible for one job, which often involves rendering HTML. Here’s another fact about components: every compon…
  5. 5
    Good! Subclassing React.Component is the way to declare a new component class. When you declare a new component class, you need to give that component class a name. On line 4, notice that ou…
  6. 6
    Let’s review what you’ve learned so far! Find each of these points in app.js: - On line 1, import React from ‘react’ creates a JavaScript object. This object contains properties that are ne…
  7. 7
    A component class is like a factory that builds components. It builds these components by consulting a set of instructions, which you must provide. Let’s talk about these instructions! For star…
  8. 8
    MyComponentClass is now a working component class! It’s ready to follow its instructions and make some React components. So, let’s make a React component! It only takes one more line: To…
  9. 9
    You have learned that a component class needs a set of instructions, which tell the component class how to build components. When you make a new component class, these instructions are the body of …
  1. 1
    In this lesson, you will learn some common ways that JSX and React components work together. You’ll get more comfortable with both JSX and components, while picking up some new tricks. Take a l…
  2. 2
    Take a look at this JavaScript object named redPanda: const redPanda = { src: ‘https://upload.wikimedia.org/wikipedia/commons/b/b2/Endangered_Red_Panda.jpg’, alt: ‘Red Panda’, width: ‘200px…
  3. 3
    A render() function must have a return statement. However, that isn’t all that it can have. A render() function can also be a fine place to put simple calculations that need to happen right bef…
  4. 4
    How might you use a conditional statement inside of a render() function? Select TodaysPlan.js to see one way of doing it. Notice that the if statement is located inside of the render f…
  5. 5
    The word this gets used in React a lot! You are especially likely to see this inside of the body of a component class declaration. Here’s an example: class IceCreamGuy extends React.Component { …
  6. 6
    Render functions often contain event listeners. Here’s an example of an event listener in a render function: render() { return ( ); } Recall that an event handler is a function…
  7. 7
    Congratulations! You have finished the unit on React components. React components are complicated. Their syntax is complicated, and the reasoning behind their syntax is especially complicated. …

What you'll create

Portfolio projects that showcase your new skills

Pro Logo

How you'll master it

Stress-test your knowledge with quizzes that help commit syntax to memory

Pro Logo