react 结合gitte 创建项目(详情步骤)
作者:互联网
创建项目第一步 基本搭建 在创建之前,需要有一个git 仓库,我们要把项目搭建到git 中 目录介绍 cd 到某个盘 mkdir workspace 创建workspace文件夹 cd workspace 进入workspace文件夹 workspace一般为我们仓库和项目总目录 git@1 仓库一(前端自己项目,如果自己是前端leader) www.bdplus.cn 为上线文件夹 pc或w 为 pc 电脑端项目 h5或m 为h5 网页或app 中网页或公众号 minstore 小程序(如果分微信和支付宝可wminstore tminstore) app 前端app 用户开发 mkdown (一些备注文件) 以下为正常开发项目,以上为对应上线打包后文件 w h5 minstore app mkdown 如果有其他方式可自己组织 git@2 仓库二 (其他项目比如后端等) git@3 仓库三 Cmd Copy 查看node 版本 node -v 或 使用nvm 进行node 版本安装与切换 1、node 版本 nvm use v14 Now using node v14.15.3 (npm v6.14.9) node -v v14.15.3 为了保证同步,选择node 版本14 2、开始创建项目 npx create-react-app my-app 官方标准命令,my-app 为项目名称 npx create-react-app scss-route-mobx .... 3、git仓库提交 这块你要进行git 提交 主要在企业做项目就应该放到仓库中,如果企业没有,那自己也要弄个仓库,哪天在家改个东西,或像今年的疫情在家办公所以,只要远程仓库有代码,电脑就是另一个事了。 4、cd scss-route-mobx 进入项目目录 先进入到这个项目目录 5、yarn eject 开启配置文件 这时候先不着急启项目,先把配置文件开启就是webpack 这些基础配置开启 6、yarn start 启动项目 这时候你再起项目。 算是勉强创建了一个项目 Cmd Copy 创建项目第二步 sass安装 1、sass 安装 yarn add node-sass-chokidar yarn add npm-run-all 2、修改package.json "scripts": { "build-css": "node-sass-chokidar src/ -o src/", "watch-css": "npm run build-css && node-sass-chokidar src/ -o src/ --watch --recursive --use-polling --polling-interval 1000", "start-js": "node scripts/start.js", "start": "npm-run-all -p watch-css start-js", "build-js": "node scripts/build.js", "build": "npm-run-all build-css build-js", "test": "node scripts/test.js --env=jsdom" }, Cmd Copy 创建项目第三步 yarn build 打包注意事项 新建一个.env文件与package.json 同在根目录下 GENERATE_SOURCEMAP=false 以下三种路径 PUBLIC_URL=https://www.a.com/ PUBLIC_URL=./ PUBLIC_URL=/ JSON Copy 启动成功并编译成功表示react项目创建成功 至此 一个基本的react 项目算是创建成功了 创建项目第四步 设置代理、nginx 路由配置、跨域处理 src/setupProxy.js 创建文件 yarn add http-proxy-middleware axios const { createProxyMiddleware } = require('http-proxy-middleware'); module.exports = function(app) { app.use( '/home',createProxyMiddleware({ target: 'https://#####.com/', changeOrigin: true, }) ); app.use( '/wp-json',createProxyMiddleware({ target: 'https://#####.cn/', changeOrigin: true, }) ); }; 以下是具体某个页面中使用 obj = { mediareports:{ page_number:'2', page_size:'10' } } const cfg = this.state.mediareports; this.getApi('/home/mediareports',cfg,{}).then((res)=>{ console.log(res.data) }) this.getApi('/wp-json/wp/v2/posts',{},{}).then((res)=>{ console.log(res.data) }) async getApi(url,cfg,headers){ let data = await axios.get(url,{params:cfg}, { headers: headers }) return data; } React JSX Copy 创建项目第五步 react react-router 路由 react 的文件目录是怎么样 1、pubilc - index.html - favicon.ico - manifest.json 移动App的配置文件,用于指定应用的显示名称、图标、入口页面等信息. 2、src - components - alert index.jsx - footer index.jsx - nav index.jsx 比如: 导航、弹出层、loading加载动画、分页器等 - images 凡事页面中<img src>标签使用的图片 - js 页面中编写的js功能及开发文件 - store mobx context - styles img/ css、less、scss - unit js一些组件 比如, 如果不用jq,自己封装一些js 的方法 如果手机端有活动页面都需要下载app,同的app 的判断 如果有弹出去js等 - view home index.jsx about index.jsx joined index.jsx list.jsx other.jsx - other HTML Copy 1、导入包 yarn add react-router-dom; PS: react-router 和 react-router-dom react-router: 实现了路由的核心功能。 react-router-dom: 基于react-router,加入了在浏览器运行环境下的一些功能。 react-router-dom 是 react-router 的加强版呗 因为 React Native 也要路由系统呀。所以还有一个库叫 react-router-native,这个库也是基于 react-router 的,它类似 react-router-dom,加入了 React Native 运行环境下的一些功能。 react-router-dom react-router-native React BrowserRouter和HashRouter的区别 BrowserRouter:h5路由(history API) HashRouter:哈希路由 主要区别 BrowserRouter 和 HashRouter 都可以实现前端路由的功能 BrowserRouter 实现的是单页面的路由切换 HashRouter 实现的是全局路由切换 从原理上 HashRouter在路径中包含了#,相当于HTML的锚点定位。(# 符号的英文叫hash,所以叫HashRouter,和散列没关系哦)) 而BrowserRouter使用的是HTML5的新特性History,没有HashRouter(锚点定位)那样通用,低版本浏览器可能不支持。 从用法上 BrowserRouter进行组件跳转时可以传递任意参数实现组件间的通信,而HashRouter不能(除非手动拼接URL字符串),因此一般配合Redux或mobx使用,实现组件间的数据通信。 Cmd Copy 2、新增加Router.js文件 import React from 'react'; import { BrowserRouter, HashRouter, Route, Link, Switch } from 'react-router-dom'; import App from './App.js'; const Router = () => ( <BrowserRouter> <App/> </BrowserRouter> ) export default Router; JavaScript Copy 3、修改index.js 原App 换成 import Router from './Router'; <Router /> JavaScript Copy 4、App.js(需增加代码分割) import React , { Component, Suspense, lazy } from 'react'; import { withRouter,NavLink,Switch,Redirect,Route} from 'react-router-dom'; const Home = lazy(() => import('./views/Home')); import Input from './view/input'; import Event from './view/event'; class App extends Component { render(){ return ( <Suspense fallback={<div>Loading...</div>}> <Switch> <Route exact path="/" component={Home} /> <Route path="/input" component={Input} /> <Route path="/event" component={Event} /> </Switch> </Suspense> ); } } export default App; JavaScript Copy 5、新增页面 ./view/home/index.jsx ./view/input/index.jsx ./view/event/index.jsx 内容自定义 import { withRouter,NavLink,Switch,Redirect,Route} from 'react-router-dom'; <NavLink to="/">首页</NavLink> <NavLink to="/input">表单</NavLink> <NavLink to="/event">事件</NavLink> React JSX Copy import React , { Component } from 'react'; import { withRouter,NavLink,Switch,Redirect,Route} from 'react-router-dom'; class View extends Component { render(){ return ( <React.Fragment> <div className="mian">这是首页面</div> <NavLink to="/">首页</NavLink><br/> <NavLink to="/input">表单</NavLink><br/> <NavLink to="/event">事件</NavLink> </React.Fragment> ) } } export default View; React JSX Copy 创建项目第六步 Redux 1、安装yarn add react-redux redux 2、router store 注入 import {Provider} from 'react-redux'; <Provider stores={store}> <App/> </Provider> 完整代码 import React from 'react'; import { BrowserRouter, HashRouter} from 'react-router-dom'; import App from './App.js'; import {Provider} from 'react-redux'; import Store from './store/store.js'; const Router = () => ( <BrowserRouter> <Provider store={Store}> <App/> </Provider> </BrowserRouter> ) export default Router; React JSX Copy 3、创建整个项目 store.js src/store/store.js import {createStore, combineReducers} from 'redux'; import {reducer as addReducer} from './views/action/_index.js'; const reducer = combineReducers({ add:addReducer, // remove:removeReducer, // edit:editReducer, }) export default createStore(reducer); ---- 我需要创建 Store.js 引入 多个 reducer (store数据片段) combineReducers 合并整合多个reducer 再进行 createStore() 第一参数 reducer (纯函数,返回新的state) 第二个参数 state 初始化值 null 第三个 中间件 到这个位置 router 基本不需要再修改了 store 只需引入 所需 view下的页面中的reducer createStore React JSX Copy 第四步 关于每个view 页面 views home 每个页面都需要一个state state 如何生成 Reducer(返回新的state) action 对象 return{} type 每个action 名称 ActionTypes reducer 根据具体的action 名称(type对应) 来编写或计算返回新的state [...new,..state] Object.assign() 以上是具体当前view 页面内部以外的redux jsx about 每个页面都需要一个state news 每个页面都需要一个state usercenter 每个页面都需要一个state React JSX Copy 第五步
如何与页面交互
导入
import {connect} from ‘react-redux’;
导出
export default connect(mapStateToProps,mapDispatchToProps)(View);
function mapStateToProps(state) {
return {
isList:state.add
}
}
state.add
add 是哪来的 就是我们Store.js
自定义的reducer
const reducer = combineReducers({
add:addReducer,
// remove:removeReducer,
// edit:editReducer,
})
isList
当前组件 this.props 可以接受到
const {onAddFn,isList,onRemoveFn} = this.props;
轻松的拿到对应 reducer 返回的 State
怎么操作 action
//是一个函数,会得到dispatch和ownProps(容器组件的props对象)两个参数。
const mapDispatchToProps = (dispatch, ownProps) => {
// const {id} = ownProps;
return {
onAddFn: () => dispatch(AddTodo(‘add’))
}
};
onAddFn: () => dispatch(AddTodo(‘add’))
dispatch 操作action
onAddFn 通过this.props 来使用
onClick = {onAddFn}
onAddFn 为自定义 在当前view 页面使用
本章CSDN地址:https://mp.csdn.net/mp_blog/creation/editor/117437129
注:商业用途 禁止转载
标签:js,react,state,详情,import,router,Copy,gitte 来源: https://www.cnblogs.com/xfswy/p/14980945.html