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 needed to make React work, such asReact.createElement()
andReact.Component
.On line 2,
import ReactDOM from 'react-dom'
creates another JavaScript object. This object contains methods that help React interact with the DOM, such asReactDOM.render()
.On line 4, by subclassing
React.Component
, you create a new component class. This is not a component! A component class is more like a factory that produces components. When you start making components, each one will come from a component class.Whenever you create a component class, you need to give that component class a name. That name should be written in UpperCamelCase. In this case, your chosen name is
MyComponentClass
.
Something that we haven’t talked about yet is the body of your component class: the pair of curly braces after React.Component
, and all of the code between those curly braces.
Like all JavaScript classes, this one needs a body. The body will act as a set of instructions, explaining to your component class how it should build a React component.
Here’s what your class body would look like on its own, without the rest of the class declaration syntax. Find it in app.js:
{ render() { return <h1>Hello world</h1>; } }
That doesn’t look like a set of instructions explaining how to build a React component! Yet that’s exactly what it is.
Click Next, and we’ll go into how these instructions work.