React Components
Learn to make React Components, the building blocks of all React.js applications.
Start
Key Concepts
Review core concepts you need to learn to master this subject
render() Method
React Component Base Class
Importing React
React Components
JSX Capitalization
ReactDOM.render()
Multi-line JSX Expressions
Code in render()
render() Method
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
- 1React 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 …
- 2Wooo! 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…
- 3Now 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…
- 4You’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 …
- 5Good! 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…
- 6Let’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…
- 7A 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…
- 8MyComponentClass 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…
- 9You 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
How you'll master it
Stress-test your knowledge with quizzes that help commit syntax to memory
React Components
Start