create react app
create-react-app
1
2
3
| npx create-react-app my-app
cd my-app
npm start
|
install redux
redux
redux router
1
2
3
4
| yarn add @reduxjs/toolkit
yarn add redux
yarn add react-redux
yarn add redux-logger redux-thunk
|
install router
react router
1
2
| yarn add react-router
yarn add react-router-dom
|
install material ui
1
2
3
| yarn add @material-ui/core
yarn add @material-ui/icons
yarn add @material-ui/lab
|
edit public/index.html
1
2
| <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
|
add to <head></head>
replace
1
| <meta name="viewport" content="width=device-width, initial-scale=1" />
|
with
1
| <meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width" />
|
edit webpack.config.js
come from the issue
其他解决方案 - 中文
edit package.json
1
2
3
4
5
6
7
8
9
10
11
12
13
|
{
"babel": {
"presets": [
[
"react-app",
{
"runtime": "automatic"
}
]
]
}
}
|
webpack resolve alias
now, your project is like this:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
| ▸ config/ |~
▸ node_modules/ |~
▸ public/ |~
▸ scripts/ |~
▾ src/ |~
▸ assets/ |~
▸ common/ |~
▸ components/ |~
▸ layouts/ |~
▸ redux/ |~
▸ routes/ |~
App.css |~
App.js |~
App.test.js |~
index.css |~
index.js |~
logo.svg |~
reportWebVitals.js |~
setupTests.js |~
package.json |~
README.md |~
yarn.lock |~
|
edit config/webpack.config.js
1
2
3
4
5
6
7
8
9
10
| resolve: {
alias:{
'~redux': path.resolve(__dirname, '../src/redux'),
'~assets': path.resolve(__dirname, '../src/assets'),
'~components': path.resolve(__dirname, '../src/components'),
'~common': path.resolve(__dirname, '../src/common'),
'~layouts': path.resolve(__dirname, '../src/layouts'),
'~routes': path.resolve(__dirname, '../src/routes'),
}
}
|
styles
1
2
| yarn add node-sass
yarn add styled-jsx
|
