1
00:00:00,670 --> 00:00:03,945
With create-react-app,
you create a modern build setup for

2
00:00:03,945 --> 00:00:05,377
your React apps in no time.

3
00:00:05,377 --> 00:00:09,240
You install the tool and
focus on just building your actual app.

4
00:00:09,240 --> 00:00:12,630
To get started, you'll need to
install create-react-app globally.

5
00:00:12,630 --> 00:00:15,531
So open your terminal or console and

6
00:00:15,531 --> 00:00:19,990
run npm install -g followed
by create-react-app.

7
00:00:42,475 --> 00:00:46,347
Once it's installed, you create
a new react project with the command

8
00:00:46,347 --> 00:00:50,260
create-react-app, followed
by the name of your project.

9
00:00:50,260 --> 00:00:57,240
So I'll navigate to my desktop and
run create-react-app.

10
00:00:57,240 --> 00:00:59,290
And I'll name my project search-app.

11
00:01:01,440 --> 00:01:05,440
Running the command installs the
dependencies needed to build your project.

12
00:01:05,440 --> 00:01:07,890
It also generates the initial
project structure.

13
00:01:07,890 --> 00:01:11,170
Now, it may take a couple of minutes
to complete the installation.

14
00:01:11,170 --> 00:01:15,057
And once it's complete, you'll see
the success message in the console,

15
00:01:15,057 --> 00:01:19,670
letting you know that your project was
successfully created at this location.

16
00:01:19,670 --> 00:01:24,150
And it says that inside the directory,
you can run several commands.

17
00:01:24,150 --> 00:01:28,860
These instructions list four important
commands for create react app, start,

18
00:01:28,860 --> 00:01:31,450
build, test, and eject.

19
00:01:31,450 --> 00:01:34,311
Npm start starts
the development server and

20
00:01:34,311 --> 00:01:38,000
auto reloads the page
anytime you make edits.

21
00:01:38,000 --> 00:01:42,680
Npm run build bundles the app
into static files for production.

22
00:01:42,680 --> 00:01:44,921
Npm test starts the test runner, and

23
00:01:44,921 --> 00:01:49,410
this will let you start testing
your app with Jest as you build it.

24
00:01:49,410 --> 00:01:53,701
And npm run eject takes your app
out of the create-react-app setup,

25
00:01:53,701 --> 00:01:57,700
which lets you customize
your project configuration.

26
00:01:57,700 --> 00:01:59,790
You'll learn more about these
commands in a later video.

27
00:01:59,790 --> 00:02:04,668
But now create-react-app suggests that we
navigate to our new search app folder and

28
00:02:04,668 --> 00:02:07,500
run npm start to start
the development server.

29
00:02:07,500 --> 00:02:08,917
So let's do that now.

30
00:02:17,423 --> 00:02:21,150
Starting the server automatically
launches your app in the browser on

31
00:02:21,150 --> 00:02:22,610
localhost port 3000.

32
00:02:22,610 --> 00:02:27,580
In addition to the localhost address, the
console output displays a LAN address so

33
00:02:27,580 --> 00:02:31,710
that you can access the app from
a mobile device on the same network.

34
00:02:31,710 --> 00:02:32,759
Now in the browser,

35
00:02:32,759 --> 00:02:37,270
you can see the template create-react-app
provides to help you get started.

36
00:02:37,270 --> 00:02:40,782
An app lets us know that to get
started building out the App,

37
00:02:40,782 --> 00:02:43,603
edit the app.js file in
the source directory.

38
00:02:43,603 --> 00:02:46,090
And save the file to
reload in the browser.

39
00:02:46,090 --> 00:02:49,582
So now open the project in your
text editor, I'm using Atom, and

40
00:02:49,582 --> 00:02:53,180
let's explore the project structure and
files.

41
00:02:53,180 --> 00:02:56,990
Create-react-app generates only the files
you need to start your React project.

42
00:02:56,990 --> 00:03:01,597
And if you've built react apps before,
you're not going to see or have access to

43
00:03:01,597 --> 00:03:06,840
configuration files for Webpack, Babel,
ESLint, or even see a bundle.js file.

44
00:03:06,840 --> 00:03:09,622
Most of the files you are going
to be working with are located in

45
00:03:09,622 --> 00:03:10,780
the src folder.

46
00:03:10,780 --> 00:03:15,218
For example, App.js is currently
the main wrapper component of the app.

47
00:03:15,218 --> 00:03:20,270
Its importing App.css which contains
style specific to the app component.

48
00:03:20,270 --> 00:03:24,420
And the logo.svg you see
at the top of the page.

49
00:03:24,420 --> 00:03:28,640
Now, index.js is the entry file for
the app.

50
00:03:28,640 --> 00:03:32,376
It imports index.css,
the apps-based style sheet.

51
00:03:32,376 --> 00:03:37,494
And imports and renders the app
component into the DOM via the root

52
00:03:37,494 --> 00:03:42,670
div located in the index.html
file inside the public folder.

53
00:03:42,670 --> 00:03:46,050
So this is the app's HTML template file.

54
00:03:46,050 --> 00:03:50,504
In the previous video, I mentioned
that create-react-app sets up a fully

55
00:03:50,504 --> 00:03:53,992
functional offline first
progressive web app by default.

56
00:03:53,992 --> 00:03:55,980
Progressive web apps, or PWAs,

57
00:03:55,980 --> 00:04:00,311
are web applications that use a collection
of modern web technologies to

58
00:04:00,311 --> 00:04:04,390
provide native app-like experiences
on all types of devices.

59
00:04:04,390 --> 00:04:07,512
What they do is they take advantage
of the latest browser features,

60
00:04:07,512 --> 00:04:10,450
to make your apps more performant,
reliable, and safe.

61
00:04:10,450 --> 00:04:14,840
Even send push notifications and work when
there's no Internet connection available.

62
00:04:14,840 --> 00:04:19,605
So, progressive web apps rely on special
scripts called service workers to give

63
00:04:19,605 --> 00:04:21,714
users that app-like experience.

64
00:04:21,714 --> 00:04:26,585
An index.js imports and
enables a service worker created for

65
00:04:26,585 --> 00:04:30,645
you here in the file
registerServiceWorker.js.

66
00:04:30,645 --> 00:04:33,130
So, this file caches
your static assets and

67
00:04:33,130 --> 00:04:35,685
serves them from local caching production,

68
00:04:35,685 --> 00:04:40,405
ensuring that your web app is reliably
fast even on a slower, unreliable network.

69
00:04:41,540 --> 00:04:46,000
Another key feature in progressive
web apps is the web app manifest.

70
00:04:46,000 --> 00:04:49,950
The manifest is a JSON file containing
metadata associated with your app,

71
00:04:49,950 --> 00:04:53,240
like the app's name, author,
description, and more.

72
00:04:53,240 --> 00:04:56,780
So create-react-app sets
up a manifest,json file for

73
00:04:56,780 --> 00:05:00,220
you that describes
the configuration of your app.

74
00:05:00,220 --> 00:05:04,189
The main purpose of the manifest is to
install the app to the home screen of

75
00:05:04,189 --> 00:05:09,010
a device, providing your users with
quicker access and a richer experience.

76
00:05:09,010 --> 00:05:13,348
Manifest.json also contains
information about the icon to

77
00:05:13,348 --> 00:05:15,991
display on a device's home screen.

78
00:05:15,991 --> 00:05:18,882
And by default sets the app
to display in standalone mode

79
00:05:18,882 --> 00:05:21,070
when launched from the home screen.

80
00:05:21,070 --> 00:05:24,760
This will make the application look and
feel like a standalone native app.

81
00:05:24,760 --> 00:05:28,930
You'll customize this file with details
specific to your web application.

82
00:05:28,930 --> 00:05:31,241
For example, the icons, names, and

83
00:05:31,241 --> 00:05:34,730
branding colors to use when
the web app is displayed.

84
00:05:34,730 --> 00:05:36,931
You can learn a whole lot more
about progressive web apps and

85
00:05:36,931 --> 00:05:38,700
the resources posted in
the teacher's notes.

86
00:05:40,100 --> 00:05:43,954
Finally, the Jest testing framework
is already configured when you

87
00:05:43,954 --> 00:05:46,010
use create-react-app.

88
00:05:46,010 --> 00:05:48,971
So the file App.test.js runs a simple test

89
00:05:48,971 --> 00:05:53,698
that checks if the app component
renders to the DOM without crashing.

90
00:05:53,698 --> 00:05:56,630
And you'll learn more about
running tests in a later video.

91
00:05:56,630 --> 00:06:00,160
So just like that, we have a React
project running on our computer.

92
00:06:00,160 --> 00:06:04,117
And we didn't have to install any extra
dependencies, configure a build tool or

93
00:06:04,117 --> 00:06:07,100
module bundler and
create the project structure.

94
00:06:07,100 --> 00:06:10,200
In the next video, I'll teach you how to
customize and build out your project.