- 1
Let’s learn our first programming pattern! In this lesson, we’ll take a look at a simple version of a programming pattern. The following lessons will expand upon that lesson, and by the end, we…
- 2
Let’s make a stateful component pass its […] to a stateless component. To make that happen, you need two component classes: a stateful class, and a stateless class.
- 3
Great! You just made a stateful component class named […] . Now, let’s make our stateless component class.
- 4
A […] is supposed to pass its […] to a […] . Before a […] can pass anything to a […] , you need to […] […] into Parent.js.
- 5
Great work! You just passed information from a stateful component to a stateless component. You will be doing a lot of that. You learned earlier that a component can change its state by c…
- 1
In the last lesson, you passed information from a stateful, parent component to a stateless, child component. In this lesson, you’ll be expanding on that pattern. The stateless, child component w…
- 2
To make a child component update its parent’s […] , the first step is something that you’ve seen before: you must define a state-changing method on the parent.
- 3
In the last exercise, you defined a function in […] that can change […] ‘s state. […] must pass this function down to […] , so that […] can use it in an event listener on the dro…
- 4
You just passed a function down to […] that can change […] ‘s state!
- 5
Great work! Stateless components updating their parents’ state is a React pattern that you’ll see more and more. Learning to recognize it will help you understand how React apps are organized. …
- 1
Patterns within patterns within patterns! In lesson 1, you learned your first React programming pattern: a stateful, parent component passes down a […] to a stateless, child component. I…
- 2
One of the very first things that you learned about components is that they should only have one job. In the last lesson, […] had two jobs: 1 - […] displayed a name. 2 - […] offered …
- 3
Look at Parent.js in the code editor. Three things have changed in this file since the last Lesson: 1. […] has been required on line 4. 2. A […] instance has been added to the ren…
- 4
You’re on the last step! You’ve passed the name down to […] as a […] . Now […] has to display that […] .
- 5
You just executed your first complete React programming pattern! Let’s review. Follow each step in the code editor: - A stateful component class defines a function that calls […] . (**Pa…
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