Professional Documents
Culture Documents
2.create React App
2.create React App
Creating an App
npx
(npx comes with npm 5.2+ and higher, see instructions for
older npm versions)
npm
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:
Output
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
cd my-app
Scripts
Inside the newly created project, you can run some built-in
commands:
npm start or yarn start
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)
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.
robots.txt(file)
Defines rules for spiders, crawlers and scrapers for accessing
your app.
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]