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]
