Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
It’s important to think carefully about where state resides in your application. In this stage, you will restructure state and data flow to be more unidirectional.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
[MUSIC]
0:00
Hey, welcome back.
0:05
So in the last stage,
we went over Create React App.
0:06
It's a tool most developers
use to quickly install and
0:10
run React apps with no configurations.
0:15
It's well suited for projects of any size.
0:18
Then we got set up to code along together.
0:22
We downloaded the project files and
0:24
installed the dependencies by opening up
the terminal and running npm install.
0:26
Once the dependencies are installed,
this takes a couple of minutes or so.
0:31
We can run our React app by
running npm start in the terminal.
0:36
This will open up your React
app in your default browser.
0:41
Lastly, we learned a better
way to organize and
0:44
maintain our code using modules.
0:48
Modules is a JavaScript feature that
lets you break up your code into
0:50
individual JavaScript files.
0:55
It's also used in Create React App.
0:57
To do that,
we created a new JavaScript file.
1:00
And at the top, we imported React.
1:03
We wrote our component, and at the bottom,
we made sure to export the component so
1:06
that if a parent component needs
access to it, we can import it.
1:11
In this stage, we'll continue
to learn how to organize and
1:15
maintain our code, but
focusing on data flow.
1:19
In React, to store data,
we created a state.
1:21
And if any other child
component needs access
1:25
to that state,
we pass it down using props.
1:27
Stateful components
1:31
are powerful, but
1:32
can bring some complexity to the app.
1:34
For example,
if you have dozens of components,
1:36
each maintaining their own state,
it can be difficult to maintain your
1:39
application because data is stored
separately in all of these components.
1:44
In React, data naturally flows
down the component tree,
1:49
from the app's top level component
down to the child component via props.
1:52
For example, in the scoreboard app,
the app component tells
1:57
the player component all about
the player by passing it a set of props.
2:01
It also instructs the header component
about the total number of players.
2:05
If our data comes from one place, React
will flow any data changes at the top,
2:09
down through the component tree,
updating each component.
2:14
This is called unidirectional data flow.
2:18
Currently, the scoreboard app has
state in a couple of places.
2:21
The application state lives in
the main app component, and
2:26
all of its children can get
access to it via props.
2:30
The counter component has local
component state that's not shared or
2:33
visible outside of it.
2:38
In this stage, we'll improve
data flow by lifting state up.
2:40
When two or more components need access
to the same state, we'll lift the state
2:45
up to a shared parent component so
that they both have access to that state.
2:50
Currently, the header component displays
the title and the total number of players.
2:55
Eventually, we wanna add
a stat component that
3:00
will display the total number
of players and the total score.
3:03
But to do that, the stat component
needs access to the score state.
3:07
Next, we're gonna learn how to
communicate between components.
3:12
So with the score state lifted
up to the app component,
3:16
the counter needs a way to tell the parent
component that the score needs to change.
3:19
To communicate data upstream
from a child to a parent,
3:24
we can pass functions as props.
3:29
So in the app component,
3:31
we'll create a handleScore function
that will change the state.
3:33
We'll pass that function
down to counter as a prop.
3:37
So now, when the plus or
minus button is clicked,
3:41
a state change is invoked
at the application level.
3:44
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up