博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
实现简单组件到部署服务器——react
阅读量:5876 次
发布时间:2019-06-19

本文共 1028 字,大约阅读时间需要 3 分钟。

本人工作栈为dva+antd,使用阿里开源出来的组件有一段时间之后,决定不依赖阿里的框架自己打个环境写一些组件出来,一来为了熟悉工作流程,二来也是为了更好的理解原理,从而更好的满足工作中的需求

源码地址:

预览地址: (目前只兼容chrome和IEedge)

1. 技术点 react + webpack + antd

2. 学习流程

  • 首先电脑上要有nodejs环境,本文并不涉及nodejs,主要是用nodejs环境中的npm安装需要的依赖包(nodejs安装即可,npm如果在下载包的时候很慢,可以将镜像换成淘宝的镜像)
  • npm i create-react-app -g 全局安装create-react-app脚手架
  • create-react-app创建自己的工程文件
  • 写自己的webpack配置文件
  • 跨域请求时,在webpack中配置代理,在服务器上采用nginx代理转发
  • 打包
  • 部署到服务器中

3. 详解

安装nodejs环境和用create-react-app创建react脚手架过程省略,因为比较简单,安装都比较方便,不会出什么问题

  • webpack配置文件

    1. 对webpack简单的理解可以参考博文:;
    2. 在本程序中的一个难点在于既想要引入antd的样式文件,又想要使用css modules,本程序中的解决方案就是针对不同目录中的css文件分别进行匹配,antd组件中的样式文件一定都在node_modules文件夹中,而本地自己写的文件一定都在src文件夹中,具体解决方案详见;
    3. 在文件配置中遇到的坑详见 ;
    4. 遇到跨域问题在本地的解决方案为在本地配置代理:
    devServer: {contentBase: './public',publicPath: '/',historyApiFallback: true,inline: true,proxy: {  '/search/*': {    target: 'https://image.baidu.com',    changeOrigin: true  }}},
    复制代码
  • 部署服务器

    服务器申请的为centos阿里云服务器,将打包好的静态文件部署在nginx中,nginx服务器默认监听80端口,启动nginx时可能访问不到,这时需要在“安全组规则”中添加一条规则:

转载于:https://juejin.im/post/5ad72362f265da50463e3666

你可能感兴趣的文章
远程主机探测技术FAQ集 - 扫描篇
查看>>
C++中调用python函数
查看>>
Nomad添加acl认证
查看>>
“TI门外汉”网路知识笔记一 OSI参考模型
查看>>
你不需要jQuery(五)
查看>>
DatanodeDescriptor说明
查看>>
ServlertContext
查看>>
eclipse编辑器生命周期事件监听
查看>>
Python WOL/WakeOnLan/网络唤醒数据包发送工具
查看>>
sizeof(long)
查看>>
pxe网络启动和GHOST网克
查看>>
2.5-saltstack配置apache
查看>>
http状态响应码大全(复制转帖)
查看>>
django数据库中的时间格式与页面渲染出来的时间格式不一致的处理
查看>>
Python学习笔记
查看>>
java String
查看>>
renhook的使用
查看>>
Linux学习笔记(十二)--命令学习(用户创建、删除等)
查看>>
DOCKER windows 7 详细安装教程
查看>>
养眼美女绿色壁纸
查看>>