Preview
Video Player
00:00
00:00
Installing and Using Create React App
6:10Create React App lets you create a modern build setup for your React apps in no time. You install the tool and focus on just building your actual app.
With create-react-app,
you create a modern build setup for
0:00
your React apps in no time.
0:03
You install the tool and
focus on just building your actual app.
0:05
To get started, you'll need to
install create-react-app globally.
0:09
So open your terminal or console and
0:12
run npm install -g followed
by create-react-app.
0:15
Once it's installed, you create
a new react project with the command
0:42
create-react-app, followed
by the name of your project.
0:46
So I'll navigate to my desktop and
run create-react-app.
0:50
And I'll name my project search-app.
0:57
Running the command installs the
dependencies needed to build your project.
1:01
It also generates the initial
project structure.
1:05
Now, it may take a couple of minutes
to complete the installation.
1:07
And once it's complete, you'll see
the success message in the console,
1:11
letting you know that your project was
successfully created at this location.
1:15
And it says that inside the directory,
you can run several commands.
1:19
These instructions list four important
commands for create react app, start,
1:24
build, test, and eject.
1:28
Npm start starts
the development server and
1:31
auto reloads the page
anytime you make edits.
1:34
Npm run build bundles the app
into static files for production.
1:38
Npm test starts the test runner, and
1:42
this will let you start testing
your app with Jest as you build it.
1:44
And npm run eject takes your app
out of the create-react-app setup,
1:49
which lets you customize
your project configuration.
1:53
You'll learn more about these
commands in a later video.
1:57
But now create-react-app suggests that we
navigate to our new search app folder and
1:59
run npm start to start
the development server.
2:04
So let's do that now.
2:07
Starting the server automatically
launches your app in the browser on
2:17
localhost port 3000.
2:21
In addition to the localhost address, the
console output displays a LAN address so
2:22
that you can access the app from
a mobile device on the same network.
2:27
Now in the browser,
2:31
you can see the template create-react-app
provides to help you get started.
2:32
An app lets us know that to get
started building out the App,
2:37
edit the app.js file in
the source directory.
2:40
And save the file to
reload in the browser.
2:43
So now open the project in your
text editor, I'm using Atom, and
2:46
let's explore the project structure and
files.
2:49
Create-react-app generates only the files
you need to start your React project.
2:53
And if you've built react apps before,
you're not going to see or have access to
2:56
configuration files for Webpack, Babel,
ESLint, or even see a bundle.js file.
3:01
Most of the files you are going
to be working with are located in
3:06
the src folder.
3:09
For example, App.js is currently
the main wrapper component of the app.
3:10
Its importing App.css which contains
style specific to the app component.
3:15
And the logo.svg you see
at the top of the page.
3:20
Now, index.js is the entry file for
the app.
3:24
It imports index.css,
the apps-based style sheet.
3:28
And imports and renders the app
component into the DOM via the root
3:32
div located in the index.html
file inside the public folder.
3:37
So this is the app's HTML template file.
3:42
In the previous video, I mentioned
that create-react-app sets up a fully
3:46
functional offline first
progressive web app by default.
3:50
Progressive web apps, or PWAs,
3:53
are web applications that use a collection
of modern web technologies to
3:55
provide native app-like experiences
on all types of devices.
4:00
What they do is they take advantage
of the latest browser features,
4:04
to make your apps more performant,
reliable, and safe.
4:07
Even send push notifications and work when
there's no Internet connection available.
4:10
So, progressive web apps rely on special
scripts called service workers to give
4:14
users that app-like experience.
4:19
An index.js imports and
enables a service worker created for
4:21
you here in the file
registerServiceWorker.js.
4:26
So, this file caches
your static assets and
4:30
serves them from local caching production,
4:33
ensuring that your web app is reliably
fast even on a slower, unreliable network.
4:35
Another key feature in progressive
web apps is the web app manifest.
4:41
The manifest is a JSON file containing
metadata associated with your app,
4:46
like the app's name, author,
description, and more.
4:49
So create-react-app sets
up a manifest,json file for
4:53
you that describes
the configuration of your app.
4:56
The main purpose of the manifest is to
install the app to the home screen of
5:00
a device, providing your users with
quicker access and a richer experience.
5:04
Manifest.json also contains
information about the icon to
5:09
display on a device's home screen.
5:13
And by default sets the app
to display in standalone mode
5:15
when launched from the home screen.
5:18
This will make the application look and
feel like a standalone native app.
5:21
You'll customize this file with details
specific to your web application.
5:24
For example, the icons, names, and
5:28
branding colors to use when
the web app is displayed.
5:31
You can learn a whole lot more
about progressive web apps and
5:34
the resources posted in
the teacher's notes.
5:36
Finally, the Jest testing framework
is already configured when you
5:40
use create-react-app.
5:43
So the file App.test.js runs a simple test
5:46
that checks if the app component
renders to the DOM without crashing.
5:48
And you'll learn more about
running tests in a later video.
5:53
So just like that, we have a React
project running on our computer.
5:56
And we didn't have to install any extra
dependencies, configure a build tool or
6:00
module bundler and
create the project structure.
6:04
In the next video, I'll teach you how to
customize and build out your project.
6:07