take a peek at it
before we officially begin, let's take a look at what we can learn through this sharing.
- create a React project from scratch
- supports Sass/Scss/Less/Stylus
- Route usage: react-router-dom
- component creation and reference
- React Developer Tools browser plug-in
- redux, react-redux use
- redux-thunk
- creation and use of store
- Redux DevTools installation and use
- immutable.js uses
- Mock.js uses
- resolve local cross-domain reverse proxy
- Summary of other commonly used tools
- Super value bonus: integrated Ant Design
even if you are a novice, after following the operation, you can quickly get started with the React project!
Note: the "+" at the beginning of each line in the code area of this article indicates addition, "-" indicates deletion, and "M" indicates modification. Indicates omission.
1 create React-APP
through the official create-react-app, find a favorite directory and execute:
npx create-react-app react-app
The last react-app of the
command is the name of the project, which you can change on your own.
wait a moment to complete the installation. After the installation is complete, you can start the project using npm or yarn.
enter the project directory and start the project:
cd react-app
yarn start （or use npm start）
if you do not have yarn installed, you can go to the website to install:
after startup, you can access the project at the following address:
2 streamlined items
2.1 Delete files
next, delete the files that are not used in the general project to simplify the project.
├─ /node_modules
├─ package.json
├─ /public
| ├─ favicon.ico
| ├─ index.html
- | ├─ logo192.png
- | ├─ logo512.png
- | ├─ mainfest.json
- | └─ robots.txt
├─ README.md
├─ /src
- | ├─ App.css
| ├─ App.js
- | ├─ App.test.js (jTest Automation Testing)
- | ├─ index.css
- | ├─ index.js
- | ├─ logo.svg
- | ├─ serviceWorker.js
- | └─ setuoTests.js (PWA)
└─ yarn.lock
after the above files are deleted, the page will report an error. This is because the corresponding file reference no longer exists. You need to continue to modify the code.
2.2 simplify the code
now the directory structure is as follows, much more refreshing:
├─ /node_modules
├─ package.json
├─ /public
| ├─ favicon.ico
| └─ index.html
├─ README.md
├─ /src
| ├─ App.js
| └─ index.js
└─ yarn.lock
modify the following files one by one:
the src/App.js code is simplified as follows:
import React from 'react'
function App() {
return (
<div className="App">
<h1>This is React App.</h1>
</div>
)
}
export default App
the src/index.js code is simplified as follows:
import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'
ReactDOM.render(<App />, document.getElementById('root'))
public/index.html
<!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-scale=1" />
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>
the running effect is as follows:
2.3 use Fragment to remove the outer tag of the component
react requires that the outermost layer of each component HTML must be wrapped by a tag, and there can be no side-by-side tags. For example, in src/App.js, an error will be reported if this is the case:
// The following code will report an error, the outermost tags cannot exist side by side.
function App() {
return (
<div className="App">
<h1>This is React App.</h1>
</div>
<div className="App-other">
<h1>This is React App-other.</h1>
</div>
)
}
if you do need such a HTML and you don't want to add another parent tag, you can use Fragment as the outermost layer. The code is modified as follows:
M import React, { Fragment } from 'react'
function App() {
return (
+ <Fragment>
<div className="App">
<h1>This is React App.</h1>
</div>
<div className="App-other">
<h1>This is React App-ohter.</h1>
</div>
+ </Fragment>
)
}
export default App
the above is only to illustrate the effect of Fragment. Fragment is ideal for use in scenarios where some components are nested. For example, the parent component is & lt;table> , while child components can wrap multiple & lt;tr> with & lt;Fragment> .
3 Project directory structure
the project directory structure can be flexibly formulated according to the reality of the project. Here to share my commonly used structure, for reference only.
├─ /node_modules
├─ package.json
├─ /public
| ├─ favicon.ico <-- Web Icons
| └─ index.html <-- HTML page template
├─ README.md
├─ /src
| ├─ /common <-- Global Public Directory
| | ├─ /fonts <-- Font file directory
| | ├─ /images <-- Image file directory
| | ├─ /js <-- Public js file directory
| | └─ /style <-- Public style file directory
| | | ├─ frame.css <-- All common styles (import other css)
| | | ├─ reset.css <-- Zeroing Style
| | | └─ global.css <-- Global Common Style
| ├─ /components <-- Public Module Components Catalog
| | ├─ /header <-- Head navigation module
| | | ├─ index.js <-- header master file
| | | └─ header.css <-- header style file
| | └─ ... <-- Other Modules
| ├─ /pages <-- Page Components Catalog
| | ├─ /home <-- home page directory
| | | ├─ index.js <-- home master file
| | | └─ home.css <-- home style file
| | ├─ /login <-- login page directory
| | | ├─ index.js <-- login master file
| | | └─ login.css <-- login style file
| | └─ ... <-- Other pages
| ├─ App.js <-- Project Master Module
| └─ index.js <-- Project entry file
└─ yarn.lock
3.1 introduce global common styles
introduce other common styles into frame.css: src/common/style/frame.css
@import './reset.css';
@import './global.css';
then introduce frame.css into src/index.js
import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'
+ import './common/style/frame.css'
ReactDOM.render(<App />, document.getElementById('root'))
as shown in the figure, the global style of the page has taken effect.
3.2 support Sass/Less/Stylus
if you want to do a good job, you must sharpen its tools first. How can such a high-end react be matched with the most primitive css? Create-react-app does not expose the profile by default. To configure the project more flexibly, you need to expose the configuration file.
execute the following command to expose the configuration file:
Note: the operation of exposing the configured file is irreversible!
npm run eject
if git is not mentioned earlier, the following error may be reported:
Remove untracked files, stash or commit any changes, and try again
needs to be executed in the project root directory first:
git add .
git commit -m "Initialization items (Remarks)"
wait a moment. Eject is successful, and the directory changes are as follows:
+ ├─ /config
+ | ├─ /jest
+ | ├─ env.js
+ | ├─ module.js
+ | ├─ paths.js
+ | ├─ pnpTs.js
+ | ├─ webpack.config.js <-- webpack configuration files
+ | └─ webpackDevServer.config.js
├─ /node_modules
├─ package.json
├─ /public
| ├─ favicon.ico
| └─ index.html
├─ README.md
+ ├─ /scripts
+ | ├─ build.js
+ | ├─ start.js
+ | └─ test.js
├─ /src
| ├─ /common <-- Global Public Directory
| ├─ /components <-- Public Module Components Catalog
| ├─ /pages <-- Page Components Catalog
| ├─ App.js <-- Project Master Module
| └─ index.js <-- Project entry file
└─ yarn.lock
3.2.1 support Sass/Scss
after eject, although there is sass-related code in package.json and webpack.config.js, to use Sass/Scss correctly, you need to install node-sass.
execute the following command:
npm install node-sass --save-dev
After the
installation is complete, the project supports Sass/Scss. You can change the original css file suffix name to sacc/scss, and don't forget to change the frame.css suffix name introduced in src/index.js to sacc/scss.
3.2.2 support Less
support Less with a little more steps. Install less and less-loader first:
npm install less less-loader --save-dev
then modify config/webpack.config.js:
// style files regexes
const cssRegex = /\.css$/;
const cssModuleRegex = /\.module\.css$/;
const sassRegex = /\.(scss|sass)$/;
const sassModuleRegex = /\.module\.(scss|sass)$/;
+ const lessRegex = /\.less$/;
+ const lessModuleRegex = /\.module\.less$/;
...(summary)
// Opt-in support for SASS (using .scss or .sass extensions).
// By default we support SASS Modules with the
// extensions .module.scss or .module.sass
{
test: sassRegex,
exclude: sassModuleRegex,
use: getStyleLoaders(
{
importLoaders: 2,
sourceMap: isEnvProduction && shouldUseSourceMap,
},
'sass-loader'
),
// Don't consider CSS imports dead code even if the
// containing package claims to have no side effects.
// Remove this when webpack adds a warning or an error for this.
// See https://github.com/webpack/webpack/issues/6571
sideEffects: true,
},
// Adds support for CSS Modules, but using SASS
// using the extension .module.scss or .module.sass
{
test: sassModuleRegex,
use: getStyleLoaders(
{
importLoaders: 2,
sourceMap: isEnvProduction && shouldUseSourceMap,
modules: {
getLocalIdent: getCSSModuleLocalIdent,
},
},
'sass-loader'
),
},
// The following code is modeled after the sass code above and configured as less.
+ {
+ test: lessRegex,
+ exclude: lessModuleRegex,
+ use: getStyleLoaders(
+ {
+ importLoaders: 2,
+ sourceMap: isEnvProduction && shouldUseSourceMap,
+ },
+ 'less-loader'
+ ),
+ sideEffects: true,
+ },
+ {
+ test: lessModuleRegex,
+ use: getStyleLoaders(
+ {
+ importLoaders: 2,
+ sourceMap: isEnvProduction && shouldUseSourceMap,
+ modules: {
+ getLocalIdent: getCSSModuleLocalIdent,
+ },
+ },
+ 'less-loader'
+ ),
+ },
you need to execute yarn start to restart the project after modification.
then change the suffix name of the original css file to less, the frame.less introduced in src/index.js , and the page parses the less normally.
3.2.3 Stylus is supported
support Stylus is exactly the same as Less. Install stylus and stylus-loader first:
execute the following command:
npm install stylus stylus-loader --save-dev
After the
installation is complete, modify the config/webpack.config.js as described in the previous section that supports less. Restart the project after completion, and the stylus file can be parsed normally.
I am personally accustomed to using Stylus, so I will use Stylus in subsequent instructions. At the same time, rename the style directory under src/common/ to stylus.
├─ /config
├─ /node_modules
├─ package.json
├─ /public
├─ README.md
├─ /scripts
├─ /src
| ├─ /common <-- Global Public Directory
| | ├─ /fonts
| | ├─ /images
| | ├─ /js
M | | └─ /stylus
M | | | ├─ frame.styl
M | | | ├─ reset.styl
M | | | └─ global.styl
| ├─ /components <-- Public Module Components Catalog
| ├─ /pages <-- Page Components Catalog
| ├─ App.js <-- Project Master Module
| └─ index.js <-- Project entry file
└─ yarn.lock
the frame.styl code is as follows:
@import './reset.styl';
@import './global.styl';
the src/index.js code is modified as follows:
import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'
M import './common/style/frame.styl'
ReactDOM.render(<App />, document.getElementById('root'))
the most basic configuration is done, and now it's time to introduce the pages. Routing (Router) is required for page switching. Please continue to read the following chapter.