"Java Data Structures - Retired" was retired on May 31, 2019. You are now viewing the recommended replacement.
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