1
00:00:00,007 --> 00:00:01,391
Hi, everyone.

2
00:00:01,391 --> 00:00:02,437
I'm Laura, and

3
00:00:02,437 --> 00:00:07,231
I'm happy you've joined me here to
continue your React learning journey.

4
00:00:07,231 --> 00:00:11,806
Before we get started, I want to make
sure we're all on the same page and

5
00:00:11,806 --> 00:00:13,491
know the basics of React.

6
00:00:13,491 --> 00:00:18,977
In React, you should know how to render an
element, create a component, and use JSX.

7
00:00:18,977 --> 00:00:22,900
Pass dynamic information down using props.

8
00:00:22,900 --> 00:00:27,474
Use hooks to create a stateful,
functional component, and use state and

9
00:00:27,474 --> 00:00:30,520
event handlers to add
interactivity to the app.

10
00:00:30,520 --> 00:00:35,352
If none of this sounds familiar,
be sure to complete the prerequisites for

11
00:00:35,352 --> 00:00:36,282
this course.

12
00:00:36,282 --> 00:00:39,857
Then meet me back here to
level up your React skills.

13
00:00:39,857 --> 00:00:43,463
Components as you've learned
are at the heart of React.

14
00:00:43,463 --> 00:00:47,038
Just about everything in
React is a component.

15
00:00:47,038 --> 00:00:50,688
As you may recall,
a component is a function or

16
00:00:50,688 --> 00:00:56,034
class that optionally accepts inputs
that renders part of your UI.

17
00:00:56,034 --> 00:01:01,429
The focus of this course is on different
approaches and best practices to writing

18
00:01:01,429 --> 00:01:07,079
components that communicate with each
other to create dynamic, interactive UIs.

19
00:01:07,079 --> 00:01:09,781
In this course,
you're given a scoreboard app.

20
00:01:09,781 --> 00:01:14,379
In this app, you're able to increase
people's score, decrease their score, and

21
00:01:14,379 --> 00:01:15,361
remove players.

22
00:01:15,361 --> 00:01:19,774
The scoreboard app only contains
four components at the moment.

23
00:01:19,774 --> 00:01:24,158
An App component that holds it
all together, a Header component,

24
00:01:24,158 --> 00:01:28,088
a Player component that also
has a Counter component in it.

25
00:01:28,088 --> 00:01:31,738
By the end of this course,
your scoreboard app will look like this.

26
00:01:31,738 --> 00:01:36,365
You'll add a Stopwatch component that adds
a timer feature to your scoreboard, so

27
00:01:36,365 --> 00:01:39,287
you're able to start,
stop, and reset the timer.

28
00:01:39,287 --> 00:01:42,691
You'll also write a Stats
component that keeps track of

29
00:01:42,691 --> 00:01:45,742
the total number of players and
the total points.

30
00:01:45,742 --> 00:01:47,490
We'll write a high score component,

31
00:01:47,490 --> 00:01:50,994
that displays this crown whenever
someone has the highest score.

32
00:01:50,994 --> 00:01:54,380
The last component you'll add
is a player form component,

33
00:01:54,380 --> 00:01:56,082
where you can add players in.

34
00:01:56,082 --> 00:01:58,740
Let's add me to the game.

35
00:01:58,740 --> 00:01:59,874
In this stage,

36
00:01:59,874 --> 00:02:04,949
I'll start off by introducing you
to a tool called Create React App.

37
00:02:04,949 --> 00:02:10,629
Developers normally use Create React App
for developing React applications,

38
00:02:10,629 --> 00:02:16,236
because it lets you quickly create and
run React apps with no configurations.

39
00:02:16,236 --> 00:02:18,985
Then I'll get you all set
up to code along with me.

40
00:02:18,985 --> 00:02:21,702
We'll walk through the project files, and

41
00:02:21,702 --> 00:02:24,869
make sure we understand
what each component does.

42
00:02:24,869 --> 00:02:30,184
Lastly, we'll separate our components
into individual JavaScript files.

43
00:02:30,184 --> 00:02:34,169
This provides a better way to organize and
maintain our code.

44
00:02:34,169 --> 00:02:35,390
Let's get started.