CREATE_REACT_APP

Get Started Immediately

You don’t need to install or configure tools like webpack or

Babel. They are preconfigured and hidden so that you can
focus on the code.

Create a project, and you’re good to go.

Creating an App

You’ll need to have Node >= 14 on your local development

machine (but it’s not required on the server). You can
use nvm (macOS/Linux) or nvm-windows to switch Node
versions between different projects.

To create a new app, you may choose one of the following

methods:

npx

npx create-react-app my-app

(npx comes with npm 5.2+ and higher, see instructions for
older npm versions)
npm

npm init react-app my-app

npm init <initializer> is available in npm 6+

Selecting a package manager

When you create a new app, the CLI will use npm or Yarn to
install dependencies, depending on which tool you use to
run create-react-app. For example:

# Run this to use npm

npx create-react-app my-app
# Or run this to use yarn
yarn create react-app my-app

Output

Running any of these commands will create a directory

called my-app inside the current folder. Inside that directory,
it will generate the initial project structure and install the
transitive dependencies:

my-app
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── public
│ ├── favicon.ico
│ ├── index.html
│ ├── logo192.png
│ ├── logo512.png
│ ├── manifest.json
│ └── robots.txt
└── src
 ├── App.css
├── App.js
├── App.test.js
├── index.css
├── index.js
├── logo.svg
├── serviceWorker.js
└── setupTests.js

Copy

No configuration or complicated folder structures, only the

files you need to build your app. Once the installation is
done, you can open your project folder:

cd my-app

Scripts

Inside the newly created project, you can run some built-in
commands:
npm start or yarn start

Runs the app in development mode.

Open http://localhost:3000 to view it in the browser.

The page will automatically reload if you make changes to

the code. You will see the build errors and lint warnings in
the console.
Create-react-app files/folders structure

Create React App is a comfortable environment for learning

React, and is the best way to start building a new single-page
application in React.

It sets up your development environment so that you can use

the latest JavaScript features, provides a nice developer
experience, and optimizes your app for production. You’ll
need to have Node >= 8.10 and npm >= 5.6 on your machine.

When we use create-react-app tool it creates a hierarchy of

files and folder. In this article we are going to have a look and
explain this structure in as minimalistic way as possible, more
or less like cheat-sheet so that you can come back to this
article if you are confused about a file or folder created by
create-react-app further down the road while learning react.

As on 13th June, 2020 the hierarchical structure that you are

going to end up with, when using CRA, will look something
like this:
Hierarchy of files and folders created by CRA

Node Modules and root folder files

node_modules(Folder)
Contains all the dependencies that are needed for an initial
working react app
.gitignore(file)
This file specifies intentionally untracked files that Git should
ignore

package.json(file)
This file contains various metadata that is relevant to our
project. It specifies the dependencies being used in the
project which helps npm setup same environment on
different machine for our project.

README.md(file)
This file can be used to define usage, build instructions,
summary of project, etc. It uses markdown markup language
to create content.

yarn.lock(file)
This file has same purpose as package-lock.json, it ensures
that your package is consistent across various machines by
storing the versions of which dependencies are installed with
your package.

Public folder and it’s files

public folder

public(folder)
Root folder that gets served up as our react app.

favicon.ico(file)
It’s an icon file that is used in index.html as favicon.

index.html(file)
It is the template file which is served up when we
run start script to launch our app. It is considered best
practice not to create multiple html file in public folder
instead use this file and inject react components in this file’s
root div container. Other css libraries, etc can be defined in
this files.

logo192.png & logo512.png(files)

These are react logo which is of dimension 192*192 px and
512*512 px and is used in the template file (index.html) by
default. [can be removed once you are using your own
component]
manifest.json(file)
It’s used to define our app, mostly contains metadata. Used
by mobile phones to add web app to the home-screen of a
device. Part of PWA.

robots.txt(file)
Defines rules for spiders, crawlers and scrapers for accessing
your app.

Src folder and its files

src folder

src(folder)
In simplest form it’s our react app folder i.e.
containing components, tests, css files etc. It’s the mind of
our app.

App.css(file)
Contains styles of our react component(App.js)
App.js(file)
This file has very basic react component defined which can be
replaced by our own root component

App.test.js(file)
A very basic test(for the default app) is defined in this file
which can be replace by our own tests. [make use of Jest]

index.css(file)
Contains styles for general setup of our app.

index.js(file)
This files renders our component and registers service
workers(unregistered by default)

logo.svg(file)
Svg file of react logo, being used in component(App.js) by
default.

serviceWorker.js(file)
Service worker for pre-caching the scripts files of our react
app thereby improving performance.

setupTests.js(file)
As the name suggest this files setups tests and runs them.
This file in directly invoked when we run tests from cli(npm
run test).[make use of Jest]