React Components
Learn to make React Components, the building blocks of all React.js applications
Start![[missing "en.views.course_landing_page.react-101.course_illustration" translation]](http://www.codecademy.com/webpack/bf5c2cdedc7008c04ffe0b974fcd41b1.svg)
- 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
Wooo! Your first React component! Take a look at the code on line 1: [...] This line of code creates a new variable. That variable's name is [...] , and its value is a particular, imported Jav...
- 3
Now take a look at the code on line 2: [...] This line of code is very similar to line 1. Lines 1 and 2 both import JavaScript objects. In both lines, the imported object contains React-related ...
- 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: every compon...
- 5
Good! Subclassing [...] 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 our compon...
- 6
Let's review what you've learned so far! Find each of these points in app.js: - On line 1, [...] creates a JavaScript object. This object contains properties that are needed to make React...
- 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
[...] 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 make...
- 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 ...
- 1
In this lesson, you will learn some common ways that JSX and React components work together. You'll get more comfortable with both JSX and components, while picking up some new tricks. Take a l...
- 2
Take a look at this JavaScript object named [...] : [...] How could you render a React component, and get a picture with [...] 's properties? Select RedPanda.js to see one way to do it. N...
- 3
A [...] function must have a [...] statement. However, that isn't all that it can have. A [...] function can also be a fine place to put simple calculations that need to happen right befo...
- 4
How might you use a conditional statement inside of a [...] function? Select TodaysPlan.js to see one way of doing it. Notice that the [...] statement is located inside of the rend...
- 5
The word [...] gets used in React a lot! You are especially likely to see [...] inside of the body of a component class declaration. Here's an example: [...] In the code, what does [....
- 6
Render functions often contain event listeners. Here's an example of an event listener in a render function: [...] Recall that an event handler is a function that gets called in response to a...
- 7
Congratulations! You have finished the unit on React components. React components are complicated. Their syntax is complicated, and the reasoning behind their syntax is especially complicated. ...
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