作reacat小项目的过程（我感受适合那种刚刚接触react感受很深奥的亲们，经过这个能够创建一个很垃圾的项目，入门吧，往深处就须要本身再看了），这个是组件写的继承component，若是用hook那

时间 2020-06-21

标签 reacat 小项目的过程感受适合那种刚刚接触 react 深奥亲们经过这个能够创建一个垃圾项目入门深处须要本身再看组件写的继承 component 若是 hook 栏目 React 繁體版

原文原文链接

需求：作一个react框架的前端框架（包括路由，请求后端等），大概就是作一个左边导航右边显示组件页面的东西，ui为material-uiphp

环境:css

软件：vscodehtml

包含的知识点:使用路由来导航，使用axios来进行先后台的交互。前端

前端环境: node（懒用msi安装包,不懒就用zip安装包，性能上什么区别我也不知道）java

步骤1：搭建项目框架startnode

一、使用create-react-app来搭建小框架(这时候遇到第一个问题，可能在公司中会遇到这种问题，即上篇文章https://www.cnblogs.com/heibo/p/12012357.html)react

在你的npm可以使用以后ios

在vscode中操做，打开控制台，选定一个文件夹打开es6

a、输入命令npm install -g create-react-app下载脚手架的依赖npm

b、利用脚手架命令生成一个基本的react框架 npx create-react-app my-app（项目名称）

　搭建项目框架end

步骤2：写页面start

二、写页面，也就是写组件

a、能够在src（写代码的主要的地方）下面新建文件夹page(我的习惯，能够新建其余名称的文件夹，或者根据本身喜爱建立其余文件目录)

　　注意：能够适当分页面，大的页面能够分红多个小的页面（即小组件），也能够不分，这个看我的习惯

　　大概写react组件的格式很简单（目前看来）步骤以下

　　一、搭建一个react组件的template

　　　　由于本身没有用快捷键，因此我就把其余人的页面直接搬过来了，我通常直接复制粘贴第一个页面的模板，而后修改内容，或者是直接敲。因此就不扯这个快捷键的事情了。随便找了个设置快捷键和使用的连接https://blog.csdn.net/hbiao68/article/details/101113155, 感受这种都差很少，没啥区别。而后直接生成的模板大约就是这样的（感受跟java的哪些东西很像了），类比java的类

　　　　import React from 'react'; //引入react的包,跟java同样，由于须要用到这里面的api嘛

　　　　export default class 类的名称 extends React.Component{ //继承component类，由于继承他你这个才是个组件，才能有组件应有的功能

　　　　　　//接下来是构造方法，这个跟java中的构造方法差很少，就是父组件调用子组件的时候能够传递参数,而后根据参数来生成相对应的页面

　　　　　　//若是说不须要父组件传递参数，那么这个能够省略。

　　　　　　constructor(props){

　　　　　　super(props);

　　　　　　this.state={

　　　　　　　　　a:"我是黑子"

　　　　　　}//这个构造方法和java不一样的是，他既要拿到外界给的参数还须要初始化本身的属性（对比java的属性，官方好像叫作状态），若是都没有那就不用写了

　　　　　　}

　　　　　　//接下来就该建立页面了，其实感受也挺简单的，其实当你会写普通的html，css,那么这个就会写了　

　　　　　　render(){

　　　　　　　　return({

　　　　　　　　　　//这个里面就是你的html文件中body里面的部分，直接把你平时写的html中的东西扔进去就好了

　　　　　　　　　　须要注意的点：

　　　　　　　　　　　　　　一、咱们的class不能写class,要写成className,为了规范化，不要再标签中写style,另外写一个文件引入就好了，在开头写上　　　　　　　　　　　　　　　　　　　　require("css文件的路径");如require("./nav.css")(由于我习惯于把组件和css文件放到一个文件夹下面，因此直接./css名称就好了)

　　　　　　　　　　　　　　　css就把咱们平时写的css扔进去就行，和平时同样。

　　　　　　　　　　　　　　二、引入图片不要直接src="路径"，应该写成src={require("图片路径")}，不然咱们的react是不认的，好像这种静态文件都要这么引入　　　　　　　　　　　　　　　　吧，css不也是这么引入的嘛。我也不知道为啥，多是什么es6仍是什么其余的什么东西的标准吧。

　　　　　　　　　　　　　　　以上是静态页面的书写组件的方式

　　　　　　　　　　　　　　　若是说加入了数据的话，须要在须要数据的地方加{里面是变量}，这种看起来有点像java中的jsp了，静态页面直接写，数据的地方用　　　　　　　　　　　　　　　表达式，只不过这种是前端拿到数据本身渲染，jsp是后端去渲染，而后传到前端。若是说须要用循环遍历数据渲染页面的话，用数　　　　　　　　　　　　　　　组的map,将这种代码放到{}中，好像就是说当涉及到逻辑不是那种静态页面的话，都要用{}包裹住，去写逻辑，好比你须要循环渲染　　　　　　　　　　　　　　　一个ul列表，你能够这样写，

　　　　　　　　　　　　　　　render(){

　　　　　　　　　　　　　　　　return(

　　　　　　　　　　　　　　　　　　　　<ul>

　　　　　　　　　　　　　　　　　　　　{

　　　　　　　　　　　　　　　　　　　　foodList.map(function(item,index)){//知道es6的都应该会写这个

　　　　　　　　　　　　·　　　　　　　　return(<li><a href={item.url}></a>{item.name}</li>)　　　//嗯，这个须要渲染的变量是表达式，要写在{}里面

　　　　　　　　　　　　　　　　　　　　}

　　　　　　　　　　　　　　　　　　　　}//注意这里，是须要重复渲染的控件才须要写在这里面欧，其余的放外边就行

　　　　　　　　　　　　　　　　　　　　</ul>

　　　　　　　　　　　　　　　　　　　　//总之，你外边的+{}里面拼出来的是你想要的页面就行，若是多层循环，直接在须要重复渲染的位置写一个就行，这个是　　　　　　　　　　　　　　　　　　　　//能够嵌套的。map里面return的就是重复渲染的控件，加上{包裹的数据}

　　　　　　　　　　　　　　　　　　　　还有就是，若是你的数据须要处理能够在render函数里面，return以前处理就能够。这个没有问题。

　　　　　　　　　　　　　　　　　　)

　　　　　　　　　　　　　　　　}

　　　　　　　　)

　　　　　　　　}

　　　　这时候若是咱们的大页面须要融合小页面的话，，总共要两步。一、把页面导入进来，import 子组件 from '子组件的路径'。二、在父页面的须要添加子页面的　　　　地方进行添加。如

　　　　import Head from '../Head'

　　　　<Head /> 好像是在哪里看到的，咱们的子组件第一个字母要大写，好像是为了区分html标签什么的，反正大写就没问题了。

　　　　而后咱们的render部分就写到这里，由于是初次接触懂得的可能颇有限。

　　　　这个东西给个人感受就是他把那个小组件的render直接给塞到你写的位置了，为了显示正常，最好在外面套上一个div，这样的话就能防止小组件乱跑了。

　　写页面end

步骤三、获取数据start

三、获取数据

　　2步骤只能作一堆静态的页面，由于你尚未可以获取到外界的数据，这时候咱们经过axios去获取接口中的数据

　　　　一、导入axios的依赖，使用npm工具，npm install axios

　　　　二、引入axios import 'axios' from axios(就跟java同样，你须要人家里面的方法/api，你就须要引入进来)

　　　　你能够在适当的时候使用axios调用接口得到数据，如点击事件中等等，若是说第一次render须要axios获取的数据，咱们能够在适当的生命周期中调用，以保证　　　　在执行render时能够拿到新鲜的数据，我写在了componentWillMount中，可是这个生命周期好像不建议使用了，也能够写在咱们的构造方法中。写法以下

　　　　axios.get('./data.json')
　　　　 .then(function (response) {
　　　　　　let data = response.data
　　　　　　 // console.info("个人数据是");
　　　　　　 that.setState({ navList: eval(data) });
　　　　 })
　　　　.catch(function (error) {
　　　　　　 console.log(error);
　　　　 });//简单的一批，直接把你的请求地址替换，把请求到的数据放在state里面就能够了。若是是post请求那你就去找api（用api这个东西仍是很简单的，网上应该　　　　随手可以查到
）//查到咱们的数据以后直接按照render中如何把数据放到页面中的方式弄进去，这个动态页面就有了

可是当你运行完以后，会发现你的请求数据会被浏览器拦截，这是浏览器的同源策略，就是说（不是同一ip，同一端口的信息之间是不可以通讯的），这时候咱们就须要解决跨域问题解决跨域问题的方法：

　　　　安装依赖：http-proxy-middleware

　　　　建立一个Js文件来配置跨域：如src/setupProxy.js

　　　　引入这个依赖：const proxy = require("http-proxy-middleware");

　　　　而后写上这个：

　　module.exports = function(app) { 　　 app.use( 　　 proxy("/base/**", {//配置axios访问路径 　　 target: "http://45.32.15.21:8090/",//真正访问host,当访问的时候会拼接上这个组成真正的请求地址 　　 changeOrigin: true 　　 }) 　　 ); 　　};
　　详细请见某位大神的博客：（http://www.javashuo.com/article/p-rvvkyxuf-kq.html）,跨域问题，我就是大概复制过来的

　　获取数据end

步骤四、添加路由start

四、添加路由。

　直到第三步，咱们只是写出了一大堆动态页面，可是他们并无什么联系，因此咱们须要添加路由来把这些页面关联起来。

　这个有两种，一种是页面内路由，一种是页面间跳转路由。解释一下：

　假若有两个大的页面，即登陆页面和主页面，可是主页面是那种左边导航栏，右边是内容的那种。

　那么登陆页面跳转到主页面就称为页面间跳转路由（感受就是一级路由），主页面内容切换就是页面内路由（就是二级路由或者多级路由）

　以上应该是react-router 4以前的作法，就是将这种路由放在一个路由文件中，经过嵌套的方式来肯定咱们的一级路由或者n级路由，这样造成一个目录的形式

　可是在react-router 4开始咱们就不分这种一级路由和多级路由了，react-router 4建议咱们将路由写入页面中，他的大概思想是，你的页面应该显示在哪里，那么你的

　路由就应该写在哪里（这里包括一级路由和多级路由），当你刚刚接触这个思想的时候，可能有点别扭，可是当你理解这个东西的时候，这个路由会很好写。这时候　首先去掉你的router.js文件。

　其实主要的思想差很少就是：在可能须要渲染不一样页面的地方，写router,来让react根据地址栏判断应该渲染那个组件，你能够想成if判断，在不须要改变的地方，就直接写页面。哇，这么解释是真滴抽象，举个例子：

　登陆页和主页面

　在你刚刚输入什么http://localhost:3000的时候，react把<root></root>根组件渲染出来了（能够把<root>当作根路径），可是你但愿根据地址来让react选择在root div中渲染什么组件（感受react路由的工做方式就是在适当的地方更换组件），若是这时候你在root中加上一个一堆route，这时候react就会去进行if判断，先看浏览器地址栏，react一看："奥，是http://localhost:3000/main ,那我就去看看哪一个是匹配的把"，而后他发现root的route中正好有一个/main匹配了一个组件（"http://localhost:3000"+"/main"=http://localhost:3000/main），react说："我擦，怎么能这么匹配，那么就在root里面渲染这个组件吧"，这时候就把这个组件渲染到了<root>div里面(须要知道的是，route在哪里定义，渲染到哪里,而后再根据你的路由地址，去匹配渲染哪个组件)，贴个代码：

这段代码是被挂载到root div下的，从脚手架这句话能够看出

当react渲染完root后，看到这下面有须要渲染的组件（div（不必定是div）下有route定义，那就有须要渲染的组件），那就先看浏览器导航栏地址，而后根据route定义来决定root下面应该渲染哪一个组件，你能够将那两个route当作 java中的if 转换成java代码就是

String NavLink=浏览器地址栏地址字符串

String parentLink=访问把router包裹起来的那一层的地址字符串 //这一个是错的，不要看这个，看下面的那个，我觉得react-router4的路由 path，只须要写本层的，没想到是要写除了localhost:3000以外全部的

String parentLink=http://localhost:3000 //这个是对的，原来没有测试，后来发现跳转不正常

List<Route> Routes =那一堆Route定义

for(int i=0;i<Routes.size();i++){

String routeLink=Routes.get(i).path;

if(NavLink.equals(parentLink+routeLink)){

在包裹层的下面渲染Routes.get(i)

break;

}else{

continue;

}

就是这样的，反正就这么个意思吧，看不懂也没治了。

还有就是，只定义这个不行，须要有一个触发这个跳转的东西。目前发现有两种

一、react-router自带的LInk标签，在to属性中加入，对应路由的地址，也就是Route中的path属性

二、经过点击事件。调用这个方法：this.props.history.push('Route中的path'),也许link标签的点击事件就是这东西吧

 
  this 
  . 
  props 
  . 
  history 
  . 
  push 
  ( 
  '/app' 
  ) 
 