Embedded Files
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 as React.createElement() and React.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 as ReactDOM.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.
Page updated
Report abuse