17/05/2023, 22:28 How to Build a React Project with Create React App in 10 Steps

Forum Donate

Learn to code — free 3,000-hour curriculum

FEBRUARY 5, 2021 / #REACT

How to Build a React Project

with Create React App in 10
Steps
Reed Barger

The package Create React App makes creating and

developing React apps a breeze.

It is one of the easiest ways to spin up a new React project and is an

ideal choice to use for your own personal projects as well as for
serious, large-scale applications.

We're going to cover, step-by-step, how to use all of the major

features of Create React App to quickly and easily build your own
React projects.

Throughout this guide, I've also included a lot of helpful tips I've
learned through building apps with Create React App to make your
workflow even easier.

Let's get started.

Tools You Will Need:

https://www.freecodecamp.org/news/how-to-build-a-react-project-with-create-react-app-in-10-steps/ 1/24
17/05/2023, 22:28 How to Build a React Project with Create React App in 10 Steps

Node installed on your computer. You can download Node at Donate

Forum
nodejs.org. Create React App requires a Node version of at
Learn to code — free 3,000-hour curriculum
least 10.

A package manager called npm. It is automatically included in

your installation of Node. You need to have an npm version of
at least 5.2.

A good code editor to work with our project files. I highly

recommend using the editor Visual Studio Code. You can
grab it at code.visualstudio.com.

Step 1. How to Install Create

React App
To use Create React App, we first need to open our terminal or
command line on our computer.

To create a new React project, we can use the tool npx , provided
you have an npm version of at least 5.2.

Note: You can check what npm version you have by running
in your terminal npm -v

npx gives us the ability to use the create-react-app package

without having to first install it on our computer, which is very
convenient.

Using npx also ensures that we are using latest version of Create
React App to create our project:

npx create-react-app my-react-app

https://www.freecodecamp.org/news/how-to-build-a-react-project-with-create-react-app-in-10-steps/ 2/24
17/05/2023, 22:28 How to Build a React Project with Create React App in 10 Steps

Once we run this command, a folder named "my-react-app"

Forumwill be Donate
created where we specified on our computer and all of the packages
Learn to code — free 3,000-hour curriculum
it requires will be automatically installed.

Note: Creating a new React app with create-react-app will

usually take 2-3 minutes, sometimes more.

Create React App also gives us some templates to use for specific
types of React projects.

For example, if we wanted to create a React project that used the

tool TypeScript, we could use a template for that instead of having
to install TypeScript manually.

To create a React app that uses TypeScript, we can use the Create
React App TypeScript template:

npx create-react-app my-react-app --template typescript

Step 2. Reviewing the Project

Structure
Once our project files have been created and our dependencies have
been installed, our project structure should look like this:

my-react-app
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── public
└── src

https://www.freecodecamp.org/news/how-to-build-a-react-project-with-create-react-app-in-10-steps/ 3/24
17/05/2023, 22:28 How to Build a React Project with Create React App in 10 Steps

What are each of these files and folders for? Forum Donate

Learn to code — free 3,000-hour curriculum

README.md is a markdown file that includes a lot of helpful
tips and links that can help you while learning to use Create
React App.

node_modules is a folder that includes all of the dependency-

related code that Create React App has installed. You will
never need to go into this folder.

package.json that manages our app dependencies and what

is included in our node_modules folder for our project, plus
the scripts we need to run our app.

.gitignore is a file that is used to exclude files and folders

from being tracked by Git. We don't want to include large
folders such as the node_modules folder

public is a folder that we can use to store our static assets,

such as images, svgs, and fonts for our React app.

src is a folder that contains our source code. It is where all

of our React-related code will live and is what we will
primarily work in to build our app.

Note: A new Git repository is created whenever you make a

new project with Create React App. You can start saving
changes to your app right away using git add . and git
commit -m "your commit message" .

Step 3. How to Run your React

Project
Once you have dragged your project into your code editor, you can
open up your terminal (in VSCode, go to View > Terminal).

To start your React project, you can simply run:

https://www.freecodecamp.org/news/how-to-build-a-react-project-with-create-react-app-in-10-steps/ 4/24
17/05/2023, 22:28 How to Build a React Project with Create React App in 10 Steps

Forum Donate
npm start
Learn to code — free 3,000-hour curriculum

When we run our project, a new browser tab will automatically open
on our computer's default browser to view our app.

The development server will start up on localhost:3000 and, right

away, we can see the starting home page for our app.

Where is our app content coming from?

It's coming from the App.js file within the src folder. If we head over
to that file, we can start making changes to our app code.

// src/App.js

import logo from "./logo.svg";

import "./App.css";

function App() {
https://www.freecodecamp.org/news/how-to-build-a-react-project-with-create-react-app-in-10-steps/ 5/24
17/05/2023, 22:28 How to Build a React Project with Create React App in 10 Steps

return (
<div className="App">
Forum Donate
<header className="App-header">
Learn to code — free 3,000-hour curriculum
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
}

export default App;

In particular, let's remove the p and a tags, and add an h1 element

with the name of our app, "React Posts Sharer":

// src/App.js

import logo from "./logo.svg";

import "./App.css";

function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h1>React Posts Sharer</h1>
</header>
</div>
);
}

export default App;

https://www.freecodecamp.org/news/how-to-build-a-react-project-with-create-react-app-in-10-steps/ 6/24
17/05/2023, 22:28 How to Build a React Project with Create React App in 10 Steps

When you save by using Command/Ctrl + S, you will see our page Donate
Forum
immediately update to look like this:
Learn to code — free 3,000-hour curriculum

What is great about the development server is that it automatically

refreshes to reflect our changes. There is no need to manually
refresh the browser.

Note: The only time you may need to refresh the browser
when working with Create React App is when you have an
error.

Step 4. How to Run Tests with the

React Testing Library
Create React App makes it very simple to test your React app.

It includes all of the packages you need to run tests using the React
Testing Library ( @testing-library/react ).

https://www.freecodecamp.org/news/how-to-build-a-react-project-with-create-react-app-in-10-steps/ 7/24
17/05/2023, 22:28 How to Build a React Project with Create React App in 10 Steps

A basic test is included in the file App.test.js in src. It tests

Forumthat our Donate
App component successfully displays a link with the text "learn
Learn to code — free 3,000-hour curriculum
react".

We can run our tests with the command:

npm run test

Note: Tests will be run in all files that end in .test.js when you
run the command npm run test

If we run this, however, our test will fail.

This is because we no longer have a link element, but a title element.

To make our test pass we want to get a title element with the text
"React Posts Sharer".

// src/App.test.js

import { render, screen } from "@testing-library/react";

import App from "./App";

test("renders app title element", () => {

render(<App />);
const titleElement = screen.getByText(/React Posts Sharer/i);
expect(titleElement).toBeInTheDocument();
});

Once we run our test again, we see that it passes:

PASS src/App.test.js

✓ renders app title element (54 ms)

https://www.freecodecamp.org/news/how-to-build-a-react-project-with-create-react-app-in-10-steps/ 8/24
17/05/2023, 22:28 How to Build a React Project with Create React App in 10 Steps

Test Suites: 1 passed, 1 total

Forum Donate
Tests: 1 passed, 1 total
Learn to code — free 3,000-hour curriculum
Snapshots: 0 total
Time: 2.776 s, estimated 3 s
Ran all test suites related to changed files.

Note: When run the test command, you do not need to start
and stop it manually. If you have a failing test, you can jump
into your app code, fix your error, and once you hit save, all
tests will automatically re-run.

Step 5. How to Change the App's

Meta Data
How does our project work? We can see how by going to the index.js
file.

// src/index.js

import React from 'react';

import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);

The package ReactDOM renders our application (specifically the

App component and every component within it), by attaching it to a
HTML element with an id value of 'root'.

https://www.freecodecamp.org/news/how-to-build-a-react-project-with-create-react-app-in-10-steps/ 9/24
17/05/2023, 22:28 How to Build a React Project with Create React App in 10 Steps

This element can be found within public/index.html Forum

. Donate

Learn to code — free 3,000-hour curriculum

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-sc
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png"
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</nos
<div id="root"></div>
</body>
</html>

The entire React app is attached to this HTML page using the div
with the id of root you see above.

We don't need to change anything within the body tags. However, it

is useful to change the metadata in the head tags, to tell users and
search engines about our specific app.

We can see that it includes meta tags for a title, description, and
favicon image (the little icon in the browser tab).

You'll also see several other tags like theme-color, apple-touch-icon

and manifest. These are useful if users want to add your application
to their device or computer's home screen.

https://www.freecodecamp.org/news/how-to-build-a-react-project-with-create-react-app-in-10-steps/ 10/24
17/05/2023, 22:28 How to Build a React Project with Create React App in 10 Steps

In our case, we can change the title to our app name and the
Forum Donate
description to suit the app we're making:
Learn to code — free 3,000-hour curriculum

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-sc
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="App for sharing peoples' posts from around the web
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png"
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<title>React Posts Sharer</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</nos
<div id="root"></div>
</body>
</html>

Step 6. How to Work with Images

and Other Assets
If we look at our App component, we see that we are using an img
element.

What's interesting is that we are importing a file from our src folder,
as if it was a variable being exported from that file.

// src/App.js

import "./App.css";
import logo from "./logo.svg";

https://www.freecodecamp.org/news/how-to-build-a-react-project-with-create-react-app-in-10-steps/ 11/24
17/05/2023, 22:28 How to Build a React Project with Create React App in 10 Steps

function App() {
return (
Forum Donate
<div className="App">
Learn to code — free 3,000-hour curriculum
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h1>React Posts Sharer</h1>
</header>
</div>
);
}

export default App;

We can import image files and other static assets directly into our
React components. This feature comes from Create React App's
webpack configuration.

Instead of including static assets directly within our src folder, we

also have the option to include them in our public folder.

If we move our logo.svg file from src to public, instead of importing

our file by using the import syntax, we can write the following:

// src/App.js

import "./App.css";

function App() {
return (
<div className="App">
<header className="App-header">
<img src="/logo.svg" className="App-logo" alt="logo" />
<h1>React Posts Sharer</h1>
</header>
</div>
);
}

export default App;

https://www.freecodecamp.org/news/how-to-build-a-react-project-with-create-react-app-in-10-steps/ 12/24
17/05/2023, 22:28 How to Build a React Project with Create React App in 10 Steps

Any file that's placed in the public folder can be used in .js or .css files
Forum Donate
with the syntax: /filename.extension .
Learn to code — free 3,000-hour curriculum

What is convenient about Create React App is that we do not need

to use an img element at all to display this svg.

We can import this svg as a component using the following syntax:

// src/App.js

import { ReactComponent as Logo } from "./logo.svg";

import "./App.css";

function App() {
return (
<div className="App">
<header className="App-header">
<Logo style={{ height: 200 }} />
<h1>React Posts Sharer</h1>
</header>
</div>
);
}

export default App;

What is happening here? We can import the svg file as a

ReactComponent and then rename it to whatever name we like
using the as keyword.

In other words, we can use our imported svg just like we would a regular
component.

Svg files have traditionally been challenging to use in React. This

component syntax makes it very easy and allows us to do things
such as use inline styles (like you see above, where we set the logo's
height to 200px).

https://www.freecodecamp.org/news/how-to-build-a-react-project-with-create-react-app-in-10-steps/ 13/24
 Step 7. How to Install
17/05/2023, 22:28 How to Build a React Project with Create React App in 10 Steps

Forum Donate

Dependencies Learn to code — free 3,000-hour curriculum

For our post sharing app that we're making, let's grab some post
data to display in our app from the JSON Placeholder API.

We can use a dependency called axios to make a request to get our

posts.

To install axios, run:

npm install axios

Note: You can more easily install packages using the

shorthand command npm i axios instead of npm install

When we install axios, it will be added to our node_modules folder.

We can review all dependencies we have installed directly within

our package.json file and see that axios has been added to the
"dependencies" section:

{
"name": "my-react-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^5.11.4",
"@testing-library/react": "^11.1.0",
"@testing-library/user-event": "^12.1.10",
"axios": "^0.21.1",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-scripts": "4.0.2",

https://www.freecodecamp.org/news/how-to-build-a-react-project-with-create-react-app-in-10-steps/ 14/24
17/05/2023, 22:28 How to Build a React Project with Create React App in 10 Steps

"web-vitals": "^1.0.1"
}
Forum Donate
}
Learn to code — free 3,000-hour curriculum

We will not include it in this project, but if you are interested in

using TypeScript with your existing Create React App project, the
process is very simple.

You simply need to install the typescript dependency and the

appropriate type definitions to use for React development and
testing:

npm install typescript @types/node @types/react @types/react-dom

After that, you can simply restart your development server and
rename any React file that ends with .js to .tsx and you have a
working React and TypeScript project.

Step 8. How to Import

Components
Instead of writing all of our code within the App component, let's
create a separate component to fetch our data and display it.

We'll call this component Posts, so let's create a folder within src to
hold all of our components and put a file within it: Posts.js.

The complete path for our component file is

src/components/Posts.js .

To fetch our posts, we will request them from JSON Placeholder, put
them in a state variable called posts, and then map over them to
https://www.freecodecamp.org/news/how-to-build-a-react-project-with-create-react-app-in-10-steps/ 15/24
17/05/2023, 22:28 How to Build a React Project with Create React App in 10 Steps

display their title and body: Forum Donate

Learn to code — free 3,000-hour curriculum

// src/components/Posts.js

import React from "react";

import axios from "axios";

function Posts() {
const [posts, setPosts] = React.useState([]);

React.useEffect(() => {
axios
.get("http://jsonplaceholder.typicode.com/posts")
.then((response) => setPosts(response.data));
}, []);

return (
<ul className="posts">
{posts.map((post) => (
<li className="post" key={post.id}>
<h4>{post.title}</h4>
<p>{post.body}</p>
</li>
))}
</ul>
);
}

export default Posts;

We are fetching and returning our post data from the Posts
component, but to see it in our app, we need to import it into the
App component.

Let's head back to App.js and import it by going into the components
folder and getting the Posts component from Posts.js.

After that, we can place our Posts component under our header :

https://www.freecodecamp.org/news/how-to-build-a-react-project-with-create-react-app-in-10-steps/ 16/24
17/05/2023, 22:28 How to Build a React Project with Create React App in 10 Steps

// src/App.js
Forum Donate

Learn to code — free 3,000-hour curriculum

import Posts from "./components/Posts";
import "./App.css";

function App() {
return (
<div className="App">
<header className="App-header">
<img src="/logo.svg" className="App-logo" alt="logo" />
<h1>React Posts Sharer</h1>
</header>
<Posts />
</div>
);
}

export default App;

And we can see all of our fetched posts on our home page below our
header:

https://www.freecodecamp.org/news/how-to-build-a-react-project-with-create-react-app-in-10-steps/ 17/24
 Step 9: How to Style our App with
17/05/2023, 22:28 How to Build a React Project with Create React App in 10 Steps

Forum

CSS
Donate

Learn to code — free 3,000-hour curriculum

Our app could benefit from some improved styles.

Create React App comes with CSS support out of the box. If you
head to App.js, you can see at the top that we are importing an
App.css file from src.

Note: You can import .css files into any component you like,
however these styles will be applied globally to our app. They
are not scoped to the component into which the .css file is
imported.

Within App.css, we can add some styles to improve our app's

appearance:

/* src/App.css */

.App {
text-align: center;
margin: 0 auto;
max-width: 1000px;
}

.App-logo {
height: 40vmin;
pointer-events: none;
}

.App-header {
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: calc(10px + 2vmin);
}

li {

https://www.freecodecamp.org/news/how-to-build-a-react-project-with-create-react-app-in-10-steps/ 18/24
17/05/2023, 22:28 How to Build a React Project with Create React App in 10 Steps

list-style-type: none;
}
Forum Donate

Learn to code — free 3,000-hour curriculum

.post {
margin-bottom: 4em;
}

.post h4 {
font-size: 2rem;
}

There is also another global stylesheet called index.css that has

more general style rules.

In it, we can add some additional properties for the body element to
make our background dark and our text white:

/* src/index.css */

body {
background-color: #282c34;
color: white;
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Ro
"Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

After adding these styles, we have a much better looking app:

https://www.freecodecamp.org/news/how-to-build-a-react-project-with-create-react-app-in-10-steps/ 19/24
17/05/2023, 22:28 How to Build a React Project with Create React App in 10 Steps

Forum Donate

Learn to code — free 3,000-hour curriculum

Be aware that it is also very easy to add a more advanced CSS

configurations, such as if you want to add CSS modules or SASS to
your React app.

More helpful resources for CSS styling are included in your

README.md file.

Step 10. How to Build the App and

Publish It
Once we are happy with our app and are ready to publish it, we can
build it with the following command:

npm run build

This command will create an optimized production build for our

project and will output what files it has generated and how large
each file is:

https://www.freecodecamp.org/news/how-to-build-a-react-project-with-create-react-app-in-10-steps/ 20/24
17/05/2023, 22:28 How to Build a React Project with Create React App in 10 Steps

Forum Donate
Compiled successfully.
Learn to code — free 3,000-hour curriculum
File sizes after gzip:

46.62 KB build/static/js/2.1500c654.chunk.js
1.59 KB build/static/js/3.8022f77f.chunk.js
1.17 KB build/static/js/runtime-main.86c7b7c2.js
649 B build/static/js/main.ef6580eb.chunk.js
430 B build/static/css/main.5ae9c609.chunk.css

The output is coming from the build tool Webpack.

It helps to give us an idea of the size of our app files because the size
of our .js files in particular can make a large impact on our app's
performance.

Each chunk includes a unique string or hash, which will change on

every build to make sure any new deployment is not saved (cached)
by the browser.

If we did not have this cache-busting hash for each of our files, we
likely couldn't see any changes we made to our app.

Finally, we can run our built React project locally with the help of the
npm package serve .

This is helpful to detect any errors we might have with the final
version of our project before pushing live to the web.

Like create-react-app, we can use npx to run serve without

installing it globally on our computer.

npx serve

https://www.freecodecamp.org/news/how-to-build-a-react-project-with-create-react-app-in-10-steps/ 21/24
17/05/2023, 22:28 How to Build a React Project with Create React App in 10 Steps

Using serve , our app will start up on a different development

Forum portDonate
instead of 3000. In this case, localhost:5000.
Learn to code — free 3,000-hour curriculum

And with that, we have a completed React application ready to

publish live to the web on any deployment service, such as Netlify,
Github Pages, or Heroku!

Enjoyed this tutorial? Here's a

special bonus.
Reading tutorials are a great way to learn React, but there is no
replacement for hands-on coding.

Introducing: the Learn React app

The Learn React app is an interactive learning experience designed

to make you a confident React developer through 100s of fun
challenges.

Ready to level up your React skills? Click the link below to get
started!

https://www.freecodecamp.org/news/how-to-build-a-react-project-with-create-react-app-in-10-steps/ 22/24
17/05/2023, 22:28 How to Build a React Project with Create React App in 10 Steps

Forum Donate
Click to join the Learn React App
Learn to code — free 3,000-hour curriculum

Reed Barger
React developer who loves to make incredible apps.

If this article was helpful, tweet it .

Learn to code for free. freeCodeCamp's open source curriculum has

helped more than 40,000 people get jobs as developers.
Get started
ADVERTISEMENT

freeCodeCamp is a donor-supported tax-exempt 501(c)(3) charity organization (United States

Federal Tax Identification Number: 82-0779546)

Our mission: to help people learn to code for free. We accomplish this by creating thousands of
videos, articles, and interactive coding lessons - all freely available to the public. We also have
thousands of freeCodeCamp study groups around the world.

https://www.freecodecamp.org/news/how-to-build-a-react-project-with-create-react-app-in-10-steps/ 23/24
17/05/2023, 22:28 How to Build a React Project with Create React App in 10 Steps

Donations to freeCodeCamp go toward our education initiatives, and help

Forumpay for servers,
Donate
services, and staff.
Learn to code — free 3,000-hour curriculum
You can make a tax-deductible donation here.

Trending Guides

What is a Framework? SQL HAVING

What Do CS Majors Do? What is OOP?

Discord Update Failed HTML textarea

Center an Image in CSS NVM for Windows

What is the MVC Model? Git Revert File

JavaScript replaceAll() GROUP BY in SQL

Python Switch Statement 2D Array in Java

Python string.replace() How to Install NVM

What is a Relational DB? Percentages in Excel

Split a String in Python JavaScript Timestamp

Git List Remote Branches Remove Item from Array JS

Git Delete Remote Branch Dual Boot Windows + Ubuntu

Software Developer Career Python Round to 2 Decimals

Three Dots Operator in JS String to Int in JavaScript

How to Format Dates in JS What’s the .gitignore File?

Our Charity

About Alumni Network Open Source Shop Support Sponsors Academic Honesty

Code of Conduct Privacy Policy Terms of Service Copyright Policy

https://www.freecodecamp.org/news/how-to-build-a-react-project-with-create-react-app-in-10-steps/ 24/24