Key Concepts

Review core concepts you need to learn to master this subject

Importing React

import React from 'react';

In order to use React, we must first import the React library. When we import the library, it creates an object that contains properties needed to make React work, including JSX and creating custom components.

Your First React Component
Lesson 1 of 2
  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! In the last exercise, we started by importing from react. The line that did this is: import React from ‘react’; This creates an object named React which conta…
  3. 3
    In order to create our first component, we next imported the ReactDOM: import ReactDOM from ‘react-dom’; This line of code is very similar to line 1. Both import JavaScript objects. In both lin…
  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: we can use a …
  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 our finished component…
  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 …

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