天天瞎忙活,QQ:705719110,欢迎来撩!

搭建React开发环境

JS学习 随风 583℃ 0评论

由于项目需要,最近在学习React那一套,目前是做的web开发,随后做移动端开发,这里介绍一下环境的搭建,我这里采用的是react+ant.design(蚂蚁金服的框架)+redux来搭建的。

1.使用脚手架创建一个web工程

首先确保自己的电脑上安装了node,安装就很简单了,mac直接

windows直接下载安装包啊~
设置好环境变量,然后使用下面的命令创建项目

创建成功之后可以使用下面的命令启动

2.安装依赖包

我这里使用的yarn管理的依赖,其实跟npm差不多,只是是国人搞的,速度快些

react-redux把状态映射到子组件 分发reducer
redux 创建reducer action store等
react-thunk thunk处理发送请求异步。
react-router-dom 用来创建路由
antd-mobile@next 最新版的antd-mobile 模板 手机端用的 假设要是做响应式安装 react-responsive ant-design@next 是pc端 ant-pro@next 是ipad端
babel-plugin-transform-decorators-legacy 语法转换 用@后面加上函数名字 也可以用来转换view层中的class属性
browser-cookies 客户端获取,设置cookie
babel-plugin-import 按需加载
utility 登录注册的时候进行md5加密用的。设置uuid等等
body-parser 读取前端发送的数据
cookie-parser用于服务端设置cookie

安装:prop-types (验证props的属性的类型)

(yarn 下 –save-dev 可以为-d –save可以为-s)

安装 react-helmet 支持单页面应用对seo的友好性

或者

3.安装完成之后,设置配置项

弹出配置文件,可以自定义配置 webpack
完成之后可以在package.json中查看相关的配置。

4.package.json中配置babel

package.json中配置babel的babel-plugin-transform-decorators-legacy和babel-plugin-import插件
修改package.json中的babel和presets同级别
添加:

5.设置后台端口反向代理.处理跨域请求

如果多个可以设置成数组 “proxy”:[“tapi.12yuwen.com”,”tapia.12yuwena.com”]

6.基本配置完成,启动项目:

7.创建项目目录

Actions redux中创建action
Components 创建木偶组件(纯展示不涉及数据交互)
Config里是一些基本配置。接口名字等等
Constants 里是一些常量
Containers 智能组件 处理数据层和业务层。传递属性到视图层等等
Fetch是发送请求
Reducer redux中各个子reducer合并起来
Router 创建路由
Store 存放redux中相应的状态
Uil(可以不要。处理公共数据用的)

这样就搭建好了一个项目工程,后面的随后再说,不过我这里推荐一个蚂蚁金服的集成解决方案 ant.design.pro ,上面的东西都集成好了,直接可以开发,只是坑不少,目前我采用的就是这个集成环境,自己选择了~

转载请注明:怼码人生 » 搭建React开发环境

喜欢 (0)
头像
发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址