初始化 react 專案
阿新 • • 發佈：2020-08-27
初始化一個 react 專案
記一個完整的
react+antd-mobile+redux
- 下載腳手架工具
npm install -g create-react-app - 初始化 react 專案:
create-react-app project-name - 測試執行:
- 載入剛剛下載的目錄：
cd project-name - 執行：
npm start - 檢視結果：
localhost:3000
- 編碼測試與打包釋出專案
- 編碼測試：
npm start- 訪問網址： http://localhost:3000
- 自動編譯打包重新整理(live-reload)
- 打包釋出
npm run build- 全域性安裝
npm install -g serveserve build- 訪問網址： http://localhost:5000
- 如果不想使用
serve build啟動打包好的專案，也可以自定義package.json檔案的scripts, 如：
"scripts": {
"prod": "serve build"
}
這樣子就可以通過 npm prod啟動打包好的專案
- 專案目錄設計
- node_modules - public |-- favicon.icon |-- index.html - src |-- api |-- assets |-- components |-- containers |-- redux |-- actions.js |-- actions-type.js |-- reducers.js |-- store.js |-- utils - index.js - .gitignore - package.json - package-lock.json - README.md - yarn.lock
- 引入
antd-mobile
- 下載：
npm install antd-mobile --save - 頁面處理:
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, maximum-scale=1, minimum-scale=1, user-scalable=no" /> <meta name="theme-color" content="#000000" /> <meta name="description" content="Web site created using create-react-app" /> <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" /> <link rel="manifest" href="%PUBLIC_URL%/manifest.json" /> <title>React App</title> <script src="https://as.alipayobjects.com/g/component/fastclick/1.0.6/fastclick.js"></script> <script> if ('addEventListener' in document) { document.addEventListener('DOMContentLoaded', function() { FastClick.attach(document.body); }, false); } if(!window.Promise) { document.writeln('<script src="https://as.alipayobjects.com/g/component/es6-promise/3.2.2/es6-promise.min.js"'+'>'+'<'+'/'+'script>'); } </script> </head> <body> <noscript>You need to enable JavaScript to run this app.</noscript> <div id="root"></div> </body> </html>
- 元件打包方式與元件樣式定製參考：https://www.cnblogs.com/serahuli/p/13569980.html
-
引入路由
react-router-dom
npm install --save react-router-dom -
引入
redux
npm install --save [email protected] react-redux redux-thunk
npm install --save-dev redux-devtools-extension
整合之後程式碼如下
建立路由元件：
containers/Register.jsx
import React, {Component} from 'react'
export default class Register extends Component {
render() {
return (
<div>
Register
</div>
)
}
}
containers/Login.jsx
import React, {Component} from 'react'
export default class Login extends Component {
render() {
return (
<div>
Login
</div>
)
}
}
containers/main.js
import React, {Component} from 'react'
export default class Main extends Component {
render() {
return (
<div>
Main
</div>
)
}
}
redux/reducers.js
/*
包含多個 reducer 函式， 根據舊的 state 和指定的 action 返回一個 新的 state
*/
import { combineReducers } from 'redux'
function XXX(state = 0, action) {
return state
}
function YYY(state = 0, action) {
return state
}
export default combineReducers({
XXX,
YYY
})
redux/store.js
/*
redux 最核心的管理物件模組
*/
import { createStore, applyMiddleware } from 'redux'
import thunk from 'redux-thunk'
import { composeWithDevTools } from 'redux-devtools-extension'
import reducers from './reducers'
// 向外暴露 store
export default createStore(reducers, composeWithDevTools(applyMiddleware(thunk)))
index.js
import React from 'react'
import ReactDOM from 'react-dom'
// 路由
import { HashRouter, Route, Switch } from 'react-router-dom'
import Register from './containers/register/register'
import Login from './containers/login/login';
// store
import { Provider } from 'react-redux'
import store from './redux/store';
ReactDOM.render((
<Provider store={ store }>
<HashRouter>
<Switch>
<Route path='/register' component={ Register }></Route>
<Route path='/login' component={ Login }></Route>
<Route component={ Main }></Route>
</Switch>
</HashRouter>
</Provider>
), document.getElementById('root'))
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, maximum-scale=1, minimum-scale=1, user-scalable=no" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<title>React App</title>
<script src="https://as.alipayobjects.com/g/component/fastclick/1.0.6/fastclick.js"></script>
<script>
if ('addEventListener' in document) {
document.addEventListener('DOMContentLoaded', function() {
FastClick.attach(document.body);
}, false);
}
if(!window.Promise) {
document.writeln('<script src="https://as.alipayobjects.com/g/component/es6-promise/3.2.2/es6-promise.min.js"'+'>'+'<'+'/'+'script>');
}
</script>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>