摘要:接入步骤安装依赖启用装饰器语法如果有的话,要将没有保存的文件上传之后或者删除之后才能跑命令在中找到项目在里面增加加入在下增加文件改写改写一下,来看看效果吧简要说明表示注入在中的的属性。
内容导航
简单开发react
将react与mobx结合开发
使用react-router进行多页面开发
将项目打包到后端项目中进行部署
将完成的项目做成脚手架,避免重复的环境搭建
需要环境确保node已经安装
确保npm已经安装
创建项目npx create-react-app test # test 为你需要创建项目的名字,会在命令当前目录下创建test的目录,包含项目所有的文件
你已经完成了创建,开始跑起来
npm start
你可以看到react已经能够在local host:3000访问了,只有一个欢迎页面
目录结构
node_modules
是当前目录安装的模块存放的地方
public
index.html 是单页面的入口
src
可存放自己编写的代码,App是默认生成的欢迎页面逻辑,index 是js的主入口
开始更改你的代码 A. react简单开发1.将App.js的代码更改如下
import React, {Component} from "react"; import "./App.css"; class App extends Component { constructor(props) { super(props) this.state = {todos: [{checked: false, text: "hello"}, {checked: true, text: "world"}]} this.handleClick=this.handleClick.bind(this) } handleClick(index) { let todos = this.state.todos todos[index].checked = !todos[index].checked this.setState({todos:todos}) } render() { let todos = this.state.todos let todosDiv = todos.map((item, index) => { return () }) return ( {todosDiv}); } } class Todo extends Component { constructor(props){ super(props) this.handleClick=this.handleClick.bind(this) } handleClick() { let index = this.props.index this.props.handleClick(index) }; render() { return ({this.props.text}:{this.props.index}
) } } export default App;
再次npm start一下看看效果吧~
可以看到我们组件已经能够响应点击了
B. 引入mobx作为状态管理 提出问题在上面我们可以看到想要更改状态是比较困难的,首先要将handClick方法由子组件传给父组件,再进行处理。如果我们的组件是
四五层组件的时候得一步一步的往上级传递,这就会导致组件传递写的很臃肿。这个时候就需要一个将状态(即state这个值)独立开来。
react有很多状态管理的组件,比如redux,mobx。但redux写起来还是不如mobx简单明了。下面我们就来接入mobx。
接入步骤
安装依赖
npm install mobx --save npm install mobx-react --save
启用装饰器语法
# 如果有git的话,要将没有保存的文件上传之后或者删除之后才能跑eject命令 yarn run eject npm install --save-dev babel-preset-mobx
在package.json中找到babel项目,在presets里面增加"mobx"
"babel": { "presets": [ "react-app", "mobx" ]},
加入core-decorators
npm install core-decorators --save
在src下增加store.AppStore.js文件
import {action, observable} from "mobx"; class AppStore { @observable todos; constructor() { this.todos = [{checked: false, text: "hello"}, {checked: true, text: "world"}] } @action.bound handleClick(index) { let todos = this.todos todos[index].checked = !todos[index].checked } } export default AppStore;
改写index.js
import React from "react"; import ReactDOM from "react-dom"; import "./index.css"; import App from "./App"; import * as serviceWorker from "./serviceWorker"; import {Provider} from "mobx-react"; import AppStore from "./store/AppStore" let rootStore = {} rootStore["app"] = new AppStore() ReactDOM.render(, document.getElementById("root")); // If you want your app to work offline and load faster, you can change // unregister() to register() below. Note this comes with some pitfalls. // Learn more about service workers: https://bit.ly/CRA-PWA serviceWorker.unregister();
改写App.js
import React, {Component} from "react"; import "./App.css"; import {inject, observer} from "mobx-react"; import {autobind} from "core-decorators"; @inject("app") @autobind @observer class App extends Component { constructor(props) { super(props) } render() { let todos = this.props.app.todos let todosDiv = todos.map((item, index) => { return () }) return ( {todosDiv}); } }
@inject("app") @autobind @observer class Todo extends Component { constructor(props) { super(props) } handleClick() { let index = this.props.index this.props.app.handleClick(index) }; render() { let index = this.props.index let todo = this.props.app.todos[index] return ({todo.text}:{index}
) } } export default App; ```
npm start一下,来看看效果吧
简要说明@inject("app")表示注入在index.js中的rootStore的属性app。是由
@autobind 将组件之间的绑定自动完成
@observer mobx用来将react组件转换为响应式组件的注解,详情查看mobx的文档
上面可以看出,将原本的state的属性抽离到AppStore中了,对值得更改方法也是直接调用AppStore的方法,从而避免了react组件的一级一级往上传递
C. 引入react-router作为多页面管理 提出问题上面我们完成了单页面的开发。当需要多个页面时我们就需要使用react-router来对不同路径进行渲染了
接入react-router步骤
安装依赖
npm install react-router mobx-react-router --save
增加新的页面,在src中增加component/Test.js
import * as React from "react"; class Test extends React.Component{ render() { return(welcome!
) } } export default Test;
更改index.js
import React from "react"; import ReactDOM from "react-dom"; import "./index.css"; import App from "./App"; import * as serviceWorker from "./serviceWorker"; import {Provider} from "mobx-react"; import AppStore from "./store/AppStore" import {Route, Router, Switch} from "react-router"; import {RouterStore, syncHistoryWithStore} from "mobx-react-router"; import createHashHistory from "history/createHashHistory" import Test from "./component/Test" let rootStore = {} const hashHistory = createHashHistory() const routerStore = new RouterStore() const history = syncHistoryWithStore(hashHistory, routerStore) rootStore["app"] = new AppStore() routerStore["routing"] = routerStore ReactDOM.render(, document.getElementById("root")); // If you want your app to work offline and load faster, you can change // unregister() to register() below. Note this comes with some pitfalls. // Learn more about service workers: https://bit.ly/CRA-PWA serviceWorker.unregister(); here is the menu
npm start一下,访问下/#/test,和/#/路径,看看效果吧
简要说明createHashHistory是单页面的访问,会在url加个#号作为定位,这个对于要打包到后台作为页面时是很方便的。
如果你直接使用node部署的话可以直接使用createBrowserHistory,url就会是没有#号的url。
D. 结合ui框架 接入步骤找到一个合适的react ui框架,install之后按照ui框架的教程就可以开发一个相对比较好看的页面了
常见的框架有semantic,bootstrap,ant等。
E. 结合maven打包进spring boot项目 提出问题当我们需要跟spring boot等后端项目结合,而又不想多带带部署前端页面时,就需要打包进后端项目了
接入步骤新建一个多模块的maven项目
按照之前创建的步骤,创建前端的模块,假设模块名字为view,并在前端模块的目录下增加pom.xml
com.github.eirslett frontend-maven-plugin 1.2 <-- Install our node and npm version to run npm/node scripts--> <-- Set NPM Registry --> install node and npm install-node-and-npm <-- 指定node的版本例如 v6.9.1 --> ${nodeVersion} ${npmVersion} https://npm.taobao.org/mirrors/node/ http://registry.npmjs.org/npm/-/ <-- Set SSL privilege --> npm set registry npm <-- config set registry https://registry.npmjs.org -->config set registry https://registry.npm.taobao.org <-- Install all project dependencies --> npm set non-strict ssl <-- Optional configuration which provides for running any npm command --> npm config set strict-ssl false <-- Build and minify static files --> npm install <-- optional: default phase is "generate-resources" --> npm generate-resources <-- Optional configuration which provides for running any npm command -->install npm run build npm run build
当进行mvn package时就会在目录下生成build目录,包含所有的页面和脚本了。
在spring boot后端项目中,将前端打包好的页面拷贝到后端目录中
maven-resources-plugin Copy App Content generate-resources copy-resources src/main/resources/public true ${project.parent.basedir}/view/build static/ index.html org.springframework.boot spring-boot-maven-plugin
其中outputDirectory指明要放入的文件夹
directory指明要拷贝哪里的资源文件,需要根据你的前端模块名进行相应的修改
mvn package 一下,后端模块的打包jar里面就会有相应的资源文件啦
F. 前后端联调 步骤在前端项目package.json中指明接口的代理
"proxy":"http://localhost:8080/"
如果servletPath不为/,则需要在后面补上相应的servletPath
当你的后端项目有设置servletPath的时候,需要相应配置前端的打包的servletPath,否则默认为/的servletpath
方法1: package.json 增加
"homepage": "."
方法2: config.paths.js文件下修改配置
function getServedPath(appPackageJson) { const publicUrl = getPublicUrl(appPackageJson); //将/修改为./ const servedUrl = envPublicUrl || (publicUrl ? url.parse(publicUrl).pathname : "./"); return ensureSlash(servedUrl, true); }G. 将你创建好的项目做成脚手架 提出问题
如果每个项目都要经历上面的步骤,才能完成,那前期工作量是在太繁琐又重复
借助maven的archetype来帮你自动生成一个初始项目吧
接入步骤按照上面的流程我们已经建好了项目
在项目目录下执行 mvn archetype:create-from-project,生成的target就是你的脚手架项目
cd target/generated-sources/archetype 目录下,执行mvn install 就把archetype放入了本地仓库了,可以进行使用了
为了deploy到远程仓库中,需要在target/generated-sources/archetype 目录下的pom.xml中加入自己的远程仓库的地址,然后在target/generated-sources/archetype 目录下mvn deploy就可以了
屏蔽掉部分不想打包进archetype的文件要屏蔽部分文件夹时在pom中加入plugin
maven-archetype-plugin 3.0.1 archetype.properties
新建archetype.properties文件,配置要忽略的通配符excludePatterns=/.idea/,**.iml
怎么使用archetype创建项目在idea中,在点击file-> new-> project后弹出的对话框中选择maven
在create from archetype打勾,点击Add archetype加入创建好的archetype
填写对应的groupId,artifaceId,version后在列表中选择已有的archetype
按引导进行后续步骤的创建,然后就会自动生成跟你项目一样的啦
跨store的访问 什么是跨store访问在上面我们有这样的代码
const routerStore = new RouterStore() rootStore["app"] = new AppStore() routerStore["routing"] = routerStore
有时候我们往往需要在一个store的方法中去访问下别的store的内容,这个时候就是跨store的访问,就需要在初始化时将rootStore传给这个store,通过rootStore去访问,改写index.js
rootStore["app"] = new AppStore(rootStore)
改写AppStore.js,增加构造函数
constructor(rootStore) { this.rootStore = rootStore }
这样就可以在AppStore.js的函数中通过this.rootStore 去获取所有store的json,从而访问所有的store了
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/73950.html
摘要:接入步骤安装依赖启用装饰器语法如果有的话,要将没有保存的文件上传之后或者删除之后才能跑命令在中找到项目在里面增加加入在下增加文件改写改写一下,来看看效果吧简要说明表示注入在中的的属性。 内容导航 简单开发react 将react与mobx结合开发 使用react-router进行多页面开发 将项目打包到后端项目中进行部署 将完成的项目做成脚手架,避免重复的环境搭建 需要环境 确保...
摘要:结合编辑器可以推导变量对应的类型以及内部的结构,提高代码的健壮性和可维护性。通过充分利用时间回溯的特征,可以增强业务的可预测性与错误定位能力。对于对象的哪部分需要成为可观察的,提供了细粒度的控制。 showImg(https://segmentfault.com/img/bVba6Ts?w=1218&h=525); 为什么要使用TypeScript 侦测错误 通过静态类型检测可以尽早检...
摘要:调试集成环境选择模块,简单分离开发,测试,线上环境。程序保护开机自启托盘最小化崩溃监控升级一行代码接入升级平台,实现客户端升级功能打包构建一个指令搞定打包项目地址 项目地址 : https://github.com/ConardLi/electron-react electron-react electron + react + react-router + mobx + webpac...
摘要:前言现在最热门的前端框架,毫无疑问是。对于小型应用,引入状态管理库是奢侈的。但对于复杂的中大型应用,引入状态管理库是必要的。现在热门的状态管理解决方案,相继进入开发者的视野。获得计算得到的新并返回。 前言 现在最热门的前端框架,毫无疑问是React。 React是一个状态机,由开始的初始状态,通过与用户的互动,导致状态变化,从而重新渲染UI。 对于小型应用,引入状态管理库是奢侈的。 但...
摘要:希望大家在这浮夸的前端圈里,保持冷静,坚持每天花分钟来学习与思考。 今天的React题没有太多的故事…… 半个月前出了248个Vue的知识点,受到很多朋友的关注,都强烈要求再出多些React相前的面试题,受到大家的邀请,我又找了20多个React的使用者,他们给出了328道React的面试题,由我整理好发给大家,同时发布在了前端面试每日3+1的React专题,希望对大家有所帮助,同时大...
阅读 3481·2019-08-30 15:53
阅读 3368·2019-08-29 16:54
阅读 2168·2019-08-29 16:41
阅读 2354·2019-08-23 16:10
阅读 3363·2019-08-23 15:04
阅读 1323·2019-08-23 13:58
阅读 326·2019-08-23 11:40
阅读 2438·2019-08-23 10:26