This post focuses on proper file structures for the React project.

When creating a React project for the first time, use the scaffolding tool cerate-react-app to create a React project.

  1. After the project is built, the scaffolding hides all webPack-related configuration files for “elegance”. If you look at the generated folder directory, you will not find any WebPack configuration files. If we need to install some of our own loder or plugin in webpack, it becomes very difficult;
  2. Create-react-app automatically generates webpack with: Eslint (code detection), URL-loader (image BASE64) [images less than 10000KB]), babel-loader (ES6 and JSX syntax parsing), style-loader, CSS-loader (CSS code parsing), HtmlWebpackPlugin (output HTML plug-in) and other contents;
  3. Redux redux react-router-dom prop-types redux react-router-dom prop-types redux react-router-dom prop-types redux react-router-dom prop-types

The structure of the project file generated by the scaffolding tool is shown below:

├─ README. Md Introduction

├─ package.json NPM package configuration file, which defines the project NPM script, dependency package information

├─ Package-lock Locked version information

├─ Gitignore This is git optional upload configuration file

├─ SRC Source directory This directory is our open source code

│ ├ ─ ─ App. CSS

│ ├─ app.js This file is equivalent to a method module, also a simple modular programming

│ ├ ─ ─ App. Test. Js

│ ├ ─ ─ index. The CSS

│ ├─ index.js This is the entry file for the project

│ ├─ serviceworker.js This is for writing mobile development, PWA must use this file, with this file, as well as offline browsing function.

├─ public, with common templates and ICONS and stuff like that

├─ favicon.ico: This is an icon for a website or project, usually displayed in the top left corner of the browser TAB page

├─ index.html: Home page template file, we can try to change it, you can see the result.

├─ mainifest. Json: Mobile configuration file.