Key Concepts

Review core concepts you need to learn to master this subject

render() Method

class MyComponent extends React.Component { render() { return <h1>Hello from the render method!</h1>; } }

React class components must have a render() method. This method should return some React elements created with JSX.

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! 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: 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 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 …

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