1
00:00:00,000 --> 00:00:03,054
Let's get you all set up
to code along with me.

2
00:00:03,054 --> 00:00:06,918
In the industry,
you'll work with existing React apps, so

3
00:00:06,918 --> 00:00:10,645
I've created a base scoreboard app for
you to work off of.

4
00:00:10,645 --> 00:00:14,885
I created this app using
the crew Create React App tool.

5
00:00:14,885 --> 00:00:20,142
Shortly after the release of this course,
React Updated is documentation and

6
00:00:20,142 --> 00:00:23,885
no longer recommends using
the Create React App tool for

7
00:00:23,885 --> 00:00:26,045
setting up a new React project.

8
00:00:26,045 --> 00:00:30,633
I've added a link in the teacher's
notes to another workshop

9
00:00:30,633 --> 00:00:33,466
which covers how to set up a React App.

10
00:00:33,466 --> 00:00:36,681
Download the project files from
the teacher's notes below.

11
00:00:36,681 --> 00:00:39,852
Since we're in Stage 1,
open up the Stage 1 folder.

12
00:00:39,852 --> 00:00:43,579
This video is called
Setting Up With Create React App, so

13
00:00:43,579 --> 00:00:45,220
open that folder, too.

14
00:00:45,220 --> 00:00:50,023
Finally, open the BEGIN folder since
this is the beginning of the video.

15
00:00:50,023 --> 00:00:53,802
If you're on a Mac, you can open
up the folder by just clicking and

16
00:00:53,802 --> 00:00:57,327
dragging the folder to
the Visual Studio Code application.

17
00:00:57,327 --> 00:01:01,670
Or you can open a new window
in Visual Studio Code and

18
00:01:01,670 --> 00:01:04,298
then drag and drop the folder.

19
00:01:04,298 --> 00:01:06,540
When working with an existing React app,

20
00:01:06,540 --> 00:01:09,943
first we need to make sure all
the dependencies are installed.

21
00:01:09,943 --> 00:01:12,545
To do that, we'll open up the terminal.

22
00:01:12,545 --> 00:01:17,438
Make sure you're in the scoreboard
directory because it contains our app and

23
00:01:17,438 --> 00:01:22,189
the package.json file, which tells
NPM which dependencies to install.

24
00:01:22,189 --> 00:01:26,383
Now run npm i,
which is short for NPM install.

25
00:01:26,383 --> 00:01:28,763
The dependencies will start installing.

26
00:01:28,763 --> 00:01:33,095
All right, let's start the scoreboard app
by running npm start in the terminal.

27
00:01:37,022 --> 00:01:42,063
In our starter files, we have a Scoreboard
app where we're able to increase

28
00:01:42,063 --> 00:01:46,806
someone's score, decrease someone's score,
and remove players.

29
00:01:46,806 --> 00:01:49,295
Let's take a look at the App.js file.

30
00:01:49,295 --> 00:01:52,168
Open up the source folder and
open up components.

31
00:01:52,168 --> 00:01:54,518
That's where you'll find App.js.

32
00:01:54,518 --> 00:01:59,563
App.js file contains four components,
a header component,

33
00:01:59,563 --> 00:02:04,903
a player component, a counter component,
and an app component.

34
00:02:04,903 --> 00:02:09,236
The CSS for the scoreboard app
is saved in the Index.css file.

35
00:02:09,236 --> 00:02:14,968
Over in Index.js, you'll see
a familiar ReactDOM.createRoot method,

36
00:02:14,968 --> 00:02:19,547
which is rendering the app
component into the root element.

37
00:02:19,547 --> 00:02:24,309
The HTML file containing this root
element is inside the public folder.

38
00:02:24,309 --> 00:02:27,935
All right, we're all set up
to continue building our app.

39
00:02:27,935 --> 00:02:31,987
In the next video, you'll learn how
to break out components into modules.