react安装教程（react+springBoot 项目部署到腾讯云）

本文目录

• react+springBoot 项目部署到腾讯云
• 基于umi的React项目结构介绍
• react native 每次编译都需要重启么
• React作为时下最热的前端框架，各位有什么经验分享下吗
• 手把手教你创建Ant Design Pro的React项目
• react动态表单为什么很卡
• react-native 怎么运行在android

react+springBoot 项目部署到腾讯云

本文主要介绍如何搭建个人网站，并将项目部署到腾讯云。 前端：React， 后端：SpringBoot， 云服务：centos7 建议使用create-react-app创建react项目包，简单快捷。 进入项目路径，开始运行 直接使用项目自身的build指令进行打包，完成后会在项目根目录多出一个build文件夹 build文件中包含项目打包后的js、css、html...等资源。下一步的部署，就是将这一build文件上传到云服务器，并通过nginx指向build。 将上一过程中的build文件上传到云服务器，推荐使用ForkLift， 使用教程 。 进入云服务器，找到nginx文件，修改root指向build路径， nginx配置教程 。 上述操作完成后，打开域名后，页面即为react项目的首页。 建议使用idea进行springboot项目的开发(专业的事情交给专业的工具，简单些)。 idea搭建一个springboot项目 mysql： 官方地址 mysql管理工具Navicat： 官网地址 如果本地不想安装mysql，也可以直接在服务器上进行安装，然后在本地访问， 服务器安装mysql并实现远程访问 。 将本地springboot项目打包后，上传到云服务器并启动， Spring boot项目部署到腾讯云服务器 。 关于项目的启动并保持一致运行：可以在控制台输入 回车，nohup命令可以让你的shell命令忽略SIGHUP信号，即可以使之脱离终端运行；“&”可以让你的命令在后台运行。 至此，前后端项目都已安装在云服务器上。 原文地址： react+springBoot 项目部署到腾讯云

基于umi的React项目结构介绍

本项目是基于umi搭建的，具体可以参考 Ant Design 实战教程（beta 版） 以下命令顺序执行，用来完成umi的初始化 然后，我们开始建项目的文件目录 修改package.json 我们运行 npm run dev 就能看到hello world. 现在我们使用的都是umi的默认配置，我们还需要自己的配置 添加 umi-plugin-react 插件 配置 config/config.js 文件 首先我们使用antd的Layout布局，修改src/pages/index.js 重新运行 npm run dev，页面就会显示出当前的界面 在pages下新建home.js文件 修改文件 保存后页面就会发生变化，Content中就会显示 Home的内容 在umi中可以直接使用css，但是并不支持scss，我们需要加两个loader， 直接npm安装 node-sass和sass-loader 即可，剩余的事情umi已经帮我们做好了。 在src/assets下新建文件夹 在src/pages/index.js 引用style.scss 在home.js同级新建home.scss 文件 在home.js引用，并修改render 用第二种方法的情况： 刷新页面发现并没有变化，打开浏览器调试窗口，查看sources 找到引用的css文件，搜索可以看到好像我们的样式确实是存在的，只不过被加上了其他的后缀(为了保证不会出现全局污染) ps:这个问题当时我找了好久 这个是umi自己默认加上，我们并不想要这个东西，在config/config.js文件中添加配置 现在我们的项目只有一个home页面，我们多加几个，来实现跳转的功能 在home.js同级添加文件 center.js 修改home.js 修改config.js 点击页面的"个人中心"，即可跳转到个人中心页面 除了点击Link跳转页面外，我们还有其他的跳转需求，比如：返回上一个页面，或者登录后跳转。这些都可以算是事件跳转， 修改center.js 在umi中，redux是封装在dva中的，但是我们想用原始的那种redux (仅仅是个人原因)，我们就不去使用dva的模式。 在项目中actions文件主要用于处理请求、异步等，reducers文件则是处理数据以及其他的改变 在reducers目录下新建文件 因为在umi中会自动导入redux和react-redux包，所以我们不需要在安装，可以直接使用 store文件创建好了之后，修改pages/index.js 这样我们可以在所有的页面都使用store内容 修改 pages/home.js 重新启动 npm run dev 此时页面上看不到详情内容， 手动修改一下reducers/home.js 的isShowDesc值为true，保存之后在页面上就能看到详情内容 手动修改只是测试一下 下面我们来利用dispatch修改isShowDesc的值(这里不使用更简单的组件state属性来处理) 给home页面添加一个button，点击button来显示/隐藏详情 这样我们就能够点击按钮来改变详情的状态 网络请求使用fetch,使用mock模拟数据 安装 fetch、mockjs 封装一下请求方法，并使用mockjs模拟请求 在home.js中使用 保存，刷新页面后就能看到数据 Antd的主题定制有好几种方法，该项目是基于umi的，所以就是用umi配置的方法来定制。 在config/config.js 文件中添加配置 在src/assets/css 下新建theme.js文件 这里只修改一个属性值 (其他属性可以参考 文档 ) 编译后，home页面的按钮主题就被修改了 至此一个基于umi的react项目结构就讲完了。

react native 每次编译都需要重启么

本着什么都要搀和的原则，一起来看看React Native是如何开发iOS APP。围观本文需自备Mac OSX ， XCode ， node 以及 npm 。做好准备之后，打开你的终端（或其他命令行利器），键入下面命令：npm install -g react-native-cli和react-native init AwesomeProject此时，我们会看到一个名为AwesomeProject的文件夹，这就是工程文件的位置。使用XCode打开AwesomeProject.xcodeproj，并点击RUN，会看到iOS模拟器以及此项目对应的内容，效果如下：如果想要修改显示内容，请打开index.ios.js，里面是一堆Javascript模样的东西。修改之后，在iOS模拟器中cmd+R就可以看到修改后的效果。接下来，我们按照教程，来展示一张电影海报，为了方便，我们直接修改index.ios.js。一、模拟数据

React作为时下最热的前端框架，各位有什么经验分享下吗

知乎用户，詹彦峤、朱超强、赵鹏 等人赞同如果是技术选型调研的话，除了好处也应该了解一些需要注意的问题吧，下面随便列列，仅供参考。1. 不要陷入纠结工具的怪圈我们团队一开始用 React 的时候，工具栈应该是 grunt + grunt-react；写了一段时间感觉有局限，然后老大带头把工具换成了 gulp + browserify + watchify + reactify，然后又愉快的写了大概半年吧，发现流行的库都上 webpack 了；于是我们的工具栈又变成了 gulp + webpack + babel-loader。最后大家一致认为 gulp 是多余的，所以我们的工具栈又围绕 webpack 重新搭建了一遍。到最近我负责的一个内部项目，什么 hot-module-replacement、extract-text-plugin（让你在 js 里 require(’style.scss’); 这么写的玩意儿）一股脑的造。当然再后来因为业务需要我们又基于 webpack 搭建了自己的构建工具，这是后话……这将近一年半的折腾历史告诉大家，1) 前端就是个大坑，1个月不学新知识你就会被社区遗忘 2) 现在上 React 真幸福，工具栈基本都稳定了（什么看你还不懂看用 webpack！），不用花太多时间纠结。PS. HMR 也就那样，虽然 dan 吹得神乎其神，但实际在项目里我发现大家还是习惯手动 Cmd + R，因为项目大了以后 rebuild 也需要 1、2 秒。2. DOM 操作是不可避免的但凡是上点儿规模的前端项目，没有 DOM 操作基本是不可能的。且不说最常见的后端「埋点」，你总得用 DOM API 去取值吧；就说一个最简单的，比如右手边这个「回到顶部」的按钮，你纯用 React 写一个试试。当然你会说什么 requestAnimationFrame，什么 ReactCSSTransitionGroup blah blah blah，真正到项目里你会发现还是 DOM API 简单。3. 拥抱 ES 6，拥抱 React v0.14这俩为什么放在一起说呢看因为 React v0.14 里提出了一个全新的组件概念叫做：无状态的函数式组件（Stateless functional components）。它大概长这样：var Aquarium = ({species}) =》 ( {getFish(species)} );有没有发现被传统的 createClass 方法精简了很多看当然这样写组件也有很多局限，比如不能声明各种生命周期方法等等，但是在常见的前端业务场景中，纯 render 的组件不在少数。在这样的语法推出后，我们就能把这些组件更方便的抽出来复用了。此外，拥抱 ES 6 还有很多的好处，比如在加载依赖的时候不用先 var xxx = require(’xxx’); 再 var y = xxx.y; 而是可以直接 import {y} from ’xxx’; 简洁明了。4. 生态环境仍然在成长中，坑不少其中首先要口诛笔伐一下的就是 react-router，我们从 v0.10 开始用，到现在 v1.0。你知道为了升级这玩意儿我们改了多少次业务代码么看每次升级 API 都要变，无力吐槽。当年好不容易搞懂了 v0.11，在博客里写了篇技术文章分享，结果后面的日子就是各种被催更……一个月前抽空就 0.13 版又重写了一遍教程，这不 1.0 版又出了，API 基本全都不一样了！！不一样了！！一样了！！样了！当然除了坑也有不少高质量的生态环境产品，比如蚂蚁的 ant design。5. Server 端渲染很美，至今没看见哪个规模级的产品用到可能是我孤陋寡闻吧，欢迎评论中跟进。自己摸索着写过一个最简单的 server 端渲染，但是这套逻辑如果套到我们现在的业务逻辑中，几乎可以直接枪毙。为了实现 server 端渲染需要做出的 trade off 太多。6. React 很简单，也很难简单是因为 React 的 API 真的很少，官网的各种文档花一个下午也能看个七七八八（此时此刻再看看 Angular……）。但是当你以为你真的搞懂 React 的时候，看看React 源码剖析系列 － 解密 setState - pure render - 知乎专栏这篇文章开头提的问题，有多少人能不假思索的答对呢看（顺便安利一下，我们团队的知乎专栏，目前处于死磕 React 的状态）当你真正在业务项目中使用 React 的时候，你会发现它的生命周期比你想象的复杂；它的 API 背后的逻辑比你以为的麻烦。当然，首先你要踩进这个坑。7. 对于楼上某位仁兄表示《React：引领未来的用户界面开发框架》这本书太难的回答，作为译者之一表示对不起你。作为补偿，所有购买本书的同学均可凭拍照私信我咨询 React 相关的问题。最后再次安利一下我们团队的专栏： pure render - 知乎专栏8. 梦中惊醒补充一点，截止目前为止，Babel 6 是个大坑，业务中使用的时候一定要注意其与 Babel 5 的巨大区别。（关于补充的这一点，再额外的阐述一下，应该理解成 Babel 5 为了让大家愉快的用上 ES 6 做了一些非标准的转换，这些转换在 Babel 6 中都去掉了。所以你在 Babel 5 下面编译正常的代码在 Babel 6 编译时可能就会出错。这个问题不能确切的算作 Babel 的坑，但是会影响你的开发进度）

手把手教你创建Ant Design Pro的React项目

介绍 主要是使用 React 和 TypeScript 以及 Ant Design Pro 开发中后台项目，那么就会有人问“可不可开发前台”，回答是“可以”；Ant Design 是蚂蚁金服的UI框架，发展历程可以说是从 saga-redux -》 dva -》 umi -》 ant design ，说 ant design 是 react 的最佳实践确实是名副其实；其中我最喜欢或者说是 dva 最显著的地方就是修缮了 redux 的不足之处。 搭建 安装 cnpm，yarn，tyarn ``` ***隐藏网址*** ``` 2.  Ant Design Pro 立足于 umijs 、dva，需要安装 umi ```yarn global add umi ``` 3.  创建 Ant Design Pro 项目（先创建test文件夹） ```mkdir test cd test yarn create umi （这里选择 ant design pro -》 typescript -》 simple）tyarn yarn start ``` + config     - config.ts  路由设计     - proxy.ts  代理（打包后无效） + mock          模拟数据 + src     - assets    放一些静态资源文件（png，svg等）     - component  主要放全局组件     - layouts    权限、token获取     - models    详细内容见dva，换言之是redux （interface、数据交互）     - pages      页面     - serives    请求（get,post）     - utils      放一些公用方法 /* 以上为本人对ant design pro各个模块的理解，不足之处还请指教 */ 举个栗子（dva） TypeScript 最突出的就是类型注解，其目的就是减少对类型的试错，从而达到优化 /**  * 假设你现在要做一个博客网站，现在你要搭建的是你的博客首页 * 1. 现在你的 page 已经写好了（src/home/index.tsx和src/home/index.less） * 2. 你的后端接口也已经写好了，提供的接口就是 home (GET) * 3. 你也已经在 config/proxy.ts 中写好了代理，代理名 api **/ 现在你需要创建一个 src/services/home.ts 去对接后台的接口。 import request from ’@/utils/request’// ant design pro 自带（无须修改，每次请求自动携带 token）interfaceHomeParams{currentPage:number;pageSize:number;}exportasyncfunctionqueryGetMyHomeData(payload:HomeParams){returnrequest(`/api/home`,{method:’GET’,params:{// 填写你需要传给后端的字段...payload,}/**        * 如果是 POST 请求，请将 params 修改成 data        **/})} 接下来，你需要创建一个 src/models/home.ts 去调用上面那个接口 （详细教程看 dva），我这是临时起意边想边写的（俗称瞎编乱造）。 import{queryGetMyHomeData}from’@/services/home’import{Effect,Reducer}from’umi’;exportinterfaceDataItem{// 暂且假设后端回给你的只有（ID、博客标题、发布日期(毫秒数)、摘要）id:number;title:string;createdDate:number;brief:string;}// state 对应的类型（接口）exportinterfaceHomeState{currentPage:number;data:Array《DataItem》;}exportinterfaceHomeModelType{namespace:string;// 说好听点叫做 "命名空间"state:HomeState;// 就是 stateeffects:{// effects 里面的可以调用 reducers 里面的getData:Effect,changePage:Effect,};reducers:{setData:Reducer《HomeState》,setPage:Reducer《HomeState》,};}constHomeModel={namespace:’home’,state:{currentPage:1,data:;// 我这里假设返回的 res.data 就是我们所需要的数据yieldput({// 将数据放到 state 里面type:’setData’,payload:{data:arr,}})},*changePage({payload},{call,put}){yieldput({type:’setPage’,payload});// yield take( ’setPage/@@end’ );    // 阻塞等待完成再往下执行，当然我们这里并不存在一步造成的问题yieldput({type:’getData’,payload});},},reducers:{setData(state,{payload}){return{...state,...payload,}},setPage(state,{payload}){return{...state,...payload,}},}}exportdefaultHomeModel; 让 src/pages/home/index.tsx 去 connect HomeModel importReact,{useEffect}from’react’;import{connect,Dispatch}from’umi’;import{HomeState}from’@/models/home’interfaceHomeProps{dispatch:Dispatch;home:HomeState;}constHome:React.FC《HomeProps》=(props)=》{// 拿到的内容可以直接使用const{dispatch,home:{currentPage,data,}}=props;// 获取数据，或者说是初始化数据useEffect(()=》{dispatch({type:’home/getData’,payload:{currentPage,pageSize:8,}})},);// 页码改变事件functionpageChange(page){/**        * page的修改是两个操作        * 1. 修改 page        * 2. 获取数据        * 3. 如果面临异步问题（我们这里用阻塞）-- 这里不存在此问题        **/dispatch({type:’home/changePage’,payload:{currentPage:page,pageSize:8,}})}return(// ... 这里我就省略不写了);}exportdefaultconnect(home:HomeState=》home)(Home); 还有一点要 提醒 ，effects 里面的 和 reducers 里面的函数名不能一样。 有关于 Dva 对 Redux 的修改，见下图

react动态表单为什么很卡

因为参数显示也会动态改变。在Modal对话框中选择Select中的选项，每个选项对应了不同的参数，将这些参数显示在页面选项下方。当动态切换选项时，参数的显示也会动态改变。React 教程 React 是一个用于构建用户界面的 JAVASCRIPT 库，React 主要用于构建 UI,很多人认为 React 是MVC 中的 V(视图)。 React 起源于 Facebook 的内部项目，React 实现了单向响应的数据流，从而减少了重复代码，这也是它为什么比传统数据绑定更简单，通过 React 构建组件，使得代码更加容易得到复用，能够很好的应用在大项目的开发中。

react-native 怎么运行在android

***隐藏网址***

搭建好开发环境后，运行下面几个命令就可以得到一个RN项目：

react-native init AwesomeProject cd AwesomeProject react-native startreact-native run-android

你可以选择在手机上或者模拟器上运行项目，使用adb devices可以查看连接到你电脑的手机或者模拟器。

当然，如果想学习RN开发的话，需要了解的知识还是很多的，但是学任何一门技术都是有一定的困难，网上有很多关于RN的入门教程，但最重要的还是官方文档，近期我在做一个RN的实战项目教程，欢迎Q我：879942736了解学习。