Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed How to Set Up a React App!
You have completed How to Set Up a React App!
Preview
Create React App is a tool developed by Meta to assist with building React applications. While it was previously the recommended approach for setting up a React app, it is still commonly used in real-world applications.
Resources
Related Courses and Workshops
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
In this video,
we'll cover Create React App,
0:00
a tool developed by the team at Meta to
help build React applications quickly.
0:03
While it was previously the recommended
tool for building React Apps,
0:09
React has since moved on to frameworks.
0:13
If you're a beginner in React or
0:17
want to create a client-side only
React App, I suggest using Vite.
0:19
Vite is a lightning fast build tool for
modern web development,
0:25
that is simple to use and
provides an instant development server,
0:30
hot module replacement, and fast builds.
0:34
We'll talk more about
it in the next video.
0:38
It's also worth noting that at
the time of this recording,
0:41
a member of the React team announced that
there will be changes to Create React App.
0:45
You can find a link to their post
in the teacher's notes below.
0:50
It's an interesting read that discusses
Create React Apps history and
0:54
future with React.
0:58
Now, you may be wondering, why should
you learn about Create React App if
1:00
it's no longer recommended by React and
will soon change?
1:05
Since it was React's recommended
build tool in the past,
1:09
you'll find apps in the industry that
were created using this tool, so
1:13
it's important to have
a basic understanding of it.
1:17
Let's get started.
1:21
To create a new React project using Create
React App, open your terminal or console.
1:23
I'll be using the terminal
in Visual Studio code,
1:29
and run the command, npx create-react-app,
1:33
followed by the name of your project,
I'll name mine, cra-project.
1:37
This command installs the dependencies
needed to build your project and
1:44
generates the initial project structure.
1:48
It may take a couple of minutes
to complete the installation.
1:51
Once it's complete, you'll see
the success message in the console,
1:55
letting you know that your project was
successfully created at this location.
1:59
And it says that inside that directory,
you can run several commands.
2:04
These instructions list four important
commands for Create React app.
2:09
Npm start to start the development server.
2:15
Npm run build to build your app
into static files for production.
2:18
Npm test to start the test runner.
2:24
And npm run eject to remove the Create
React App Tool from your React app.
2:27
if you'd like to learn
more about these commands,
2:34
I've added a link in
the teachers notes below.
2:37
Create React App suggests that we
navigate to our cra-project folder and
2:40
run npm start to start
the development server.
2:46
Let's do that now.
2:50
Starting the server automatically
launches your app in
2:56
the browser on local host port 3000.
2:59
In addition to the localhost address, the
console output displays a LAN address so
3:02
that you can access the app from
a mobile device on the same network.
3:08
In the browser,
3:13
you can see the template Create React App
provides to help you get started.
3:14
The App lets us know that to get started
building out the app, edit the App.js
3:20
file in the source directory and
say the file to reload in the browser.
3:25
Now open the project in your text editor,
3:32
let's explore the project structure and
files.
3:35
Create React App generates the files
you need to start your React project.
3:39
Most of the files you'll be working
with are located in the source folder.
3:44
For example, app.js is currently
the main wrapper component of the app,
3:49
which imports app.css,
containing styles specific
3:55
to the app component, and
the logo SVG at the top of the page.
3:59
Index.js is the entry file for the app,
4:04
which imports index.css,
the app's base style sheet,
4:08
and renders the app component
into the dom via the root div
4:13
located in the index.html file
inside the public folder.
4:18
This is the app's HTML template file.
4:24
Create React App also generates
a manifest.json file,
4:28
which serves as a configuration file for
your app.
4:32
This file contains metadata,
such as the app's name, icons, and
4:37
other details that describe your app
to web browsers and mobile devices.
4:42
The manifest that JSON file
is particularly useful for
4:49
providing a native like experience to
users who save your app to their phone and
4:53
launch it as a standalone app.
4:59
Additionally, the Jest testing framework
is already configured when you use
5:03
Create React App.
5:08
The file App.test.js runs
a simple test that checks if
5:09
the app component renders a link
with the text learn react.
5:14
Unit tests are optional,
it's up to you and
5:20
your team to write unit tests for
components.
5:23
You may write unit tests for
several components.
5:26
For example,
test the output of one component and
5:30
the component life cycle and
state changes of another.
5:33
I've posted a link to the Jest
documentation in the teacher's notes for
5:37
this video.
5:42
Great job, you've learned
the basics of Create React App.
5:43
As a reminder, if you're a beginner in
React or want to create a client-side only
5:47
React app, I suggest using Vite,
which we'll talk about in the next video.
5:52
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