Key Concepts

Review core concepts you need to learn to master this subject

Importing React

React Components

React Component Base Class

render() Method

JSX Capitalization

ReactDOM.render()

Multi-line JSX Expressions

Code in render()

See more

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
    Hello World, Part II... THE COMPONENT
    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 …
    Start
  2. 2
    Import React
    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…
    Start
  3. 3
    Import ReactDOM
    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…
    Start
  4. 4
    Create a Component Class
    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 …
    Start
  5. 5
    Name a Component Class
    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…
    Start
  6. 6
    Component Class Instructions
    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…
    Start
  7. 7
    The Render Function
    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…
    Start
  8. 8
    Create a Component Instance
    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…
    Start
  9. 9
    Render A Component
    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 …
    Start

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