爱上编程网

React第六篇: 搭建React + Router + antd + nodejs + express框架搭建(nodejs做前后端server)

  • 时间:2019-11-02 08:01 编辑:青柠小助手 来源:计算机/互联网 阅读:99946
  • 扫一扫,手机访问
摘要:React第六篇: 搭建React + Router + antd + nodejs + express框架搭建(nodejs做前后端server)

标签:func   font   enter   star   wired   前端   样式   run   这一   

前提: nodejs >= 10.0; 

这里不推荐用官网的yarn安装antd的模块,因为后续会出错,错误如图:

技术图片

 

也不推荐用npx方法来搭建react骨架,也会出错,让我们开始吧!!

 


 

前端React+Antd框架搭建

 

1.安装并启动create-react-app骨架应用

 

打开cmd按顺序执行以下指令:

 

npm install -g create-react-app   (全局安装create-react-app, 默认会安装在C盘个人用户下)

create-react-app my-app (此步安装my-app以及需要的模块到当前文件夹下)

cd my-app (进入到my-app目录)

npm start (启动react项目Demo,可输入localhost:3000进入看demo)

结果如图所示:

技术图片

 

2.引入antd

 

①npm install antd --save-dev

 

②修改 src/App.js,引入 antd 的按钮组件,代码如下:

import React, { Component } from ‘react‘;
import Button from ‘antd/lib/button‘;
import ‘./App.css‘;

class App extends Component {
  render() {
    return (
      <div className="App">
        <Button type="primary">Button</Button>
      </div>
    );
  }
}

export default App;

 

③修改 src/App.css,在文件顶部引入 antd/dist/antd.css

 

@import ‘~antd/dist/antd.css‘;

.App {
  text-align: center;
}

 

④执行npm run start,结果如图

技术图片

 

3.高级配置

 

我们现在已经把组件成功运行起来了,但是在实际开发过程中还有很多问题,例如上面的例子实际上加载了全部的 antd 组件的样式(对前端性能是个隐患)。

此时我们需要对 create-react-app 的默认配置进行自定义,这里我们使用 react-app-rewired (一个对 create-react-app 进行自定义配置的社区解决方案)。

引入 react-app-rewired 并修改 package.json 里的启动配置。由于新的 [email protected] 版本的关系,我们还需要安装 customize-cra

 

①npm install react-app-rewired customize-cra --save-dev

 

②更改package.json

/* package.json */
"scripts": {
-   "start": "react-scripts start",
+   "start": "react-app-rewired start",
-   "build": "react-scripts build",
+   "build": "react-app-rewired build",
-   "test": "react-scripts test",
+   "test": "react-app-rewired test",
}

 

③然后在项目根目录创建一个 config-overrides.js 用于修改默认配置。

module.exports = function override(config, env) {
  // do stuff with the webpack config...
  return config;
};

 

④引入babel插件,执行指令:npm install babel-plugin-import --save-dev

 

⑤更改config-overrides.js文件

const { override, fixBabelImports } = require(‘customize-cra‘);


module.exports = override(
  fixBabelImports(‘import‘, {
    libraryName: ‘antd‘,
    libraryDirectory: ‘es‘,
    style: ‘css‘, }), );

 

⑥移除前面在 src/App.css 里全量添加的 @import ‘~antd/dist/antd.css‘,并且修改App.js

import React, { Component } from ‘react‘;
import { Button } from ‘antd‘;
import ‘./App.css‘;

class App extends Component {
  render() {
    return (
      <div className="App">
        <Button type="primary">Button</Button>
      </div>
    );
  }
}

export default App;

  

⑦执行命令npm run start,发觉服务已正常启动,至此我们的react+antd框架已搭建完毕

 


 

后台nodejs+express框架搭建与服务合一

 

1.express骨架搭建

 

①我们在react根目录下建立server文件夹,如图

技术图片

 

②我们cd进server文件夹,执行express骨架生成器指令:npm install express-generator -g

 

③执行语句:express --view=pug .

 

④执行语句:npm install,执行完了后,我们执行npm run start(这里先关掉react的服务),执行结果如图:

技术图片

 

2.服务合一

 

①到这一步,让我们想想,前后端同样是以nodejs+server为基础的,难道我们需要起两个服务不成?当然不对啊。

 我们重新进到react的根目录,执行指令:npm run build

 

②我们将根目录build目录下的文件全部拷贝至server/public目录,然后我们刷新一下网页。诶,出来了。

 

③在最终部署服务环节时,我们即需要用服务合一的方法来部署运行服务(非开发阶段使用,开发阶段使用在下一章会讲解)。

技术图片

 


 

 

后续:诶,标题不是有router么?怎么没有router相关的么?到这里,其实我们已经把相关框架大致都搭好啦。

 

下一章我们讲具体该如何运用这个框架进行开发,就不放在这章讲了,不然太长啦!!

React第六篇: 搭建React + Router + antd + nodejs + express框架搭建(nodejs做前后端server)

标签:func   font   enter   star   wired   前端   样式   run   这一   

原文地址:https://www.cnblogs.com/tianshu/p/11108576.html



技术交流学习或者有任何问题欢迎加群

编程技术交流群 : 154514123 爱上编程
Java技术交流群 : 6128790  Java

  • 全部评论(0)
最新发布的资讯信息
【数码/游戏/手机|网络游戏】some try on func swap about & and *(2019-12-06 18:04)
【数码/游戏/手机|网络游戏】“云小蜜”使用总结(2019-12-06 18:03)
【数码/游戏/手机|网络游戏】测验6: 组合数据类型 (第6周)-程序题(2019-12-06 18:03)
【数码/游戏/手机|网络游戏】Django大纲(2019-12-06 18:03)
【数码/游戏/手机|网络游戏】自下而上语法分析(2019-12-06 18:03)
【数码/游戏/手机|网络游戏】RocketMq安装(2019-12-06 18:03)
【数码/游戏/手机|网络游戏】JVM内存和JVM调优(十)--总结(2019-12-06 18:03)
【数码/游戏/手机|网络游戏】JVM-基本操作(2019-12-06 18:03)
【数码/游戏/手机|网络游戏】如何用Jpype创建HashMap和ArrayList(2019-12-06 18:03)
【数码/游戏/手机|网络游戏】Pandas操作excel(2019-12-06 18:03)
展开