资讯专栏INFORMATION COLUMN

React 项目初始化

seasonley / 539人阅读

摘要:安装构建工具构建项目安装弹出配置文件可自定义配置安装异步处理使用开启中间件安装连接提供和两个接口来连接组件在应用最外层,传入即可,只用一次负责从外部获取组件所需的参数安装装饰器的中加入的使用变得简洁属性方法

1.安装构建工具

npm install -g create-react-app

2.构建项目

create-react-app ProjectName

3.安装redux

npm install redux --save
npm run eject 弹出配置文件 可自定义配置webpack

4.安装异步处理 redux-thunk
npm install redux-thunk --save
使用applyMiddleware开启 thunk中间件

5.安装连接 react-redux
npm install react-redux --save
React-redux 提供 Provider和connect 两个接口来连接
Provider组件在应用最外层,传入store即可,只用一次
Connect负责从外部获取组件所需的参数

6.安装装饰器
npm install babel-plugin-transform-decorators-legacy --save-dev
package.json 的 babel 中加入

    "plugins": [  "transform-decorators-legacy" ]

connect的使用变得简洁

@connect(
    (state) => {{num: state}},                    // 属性
    { addGun, removeGun, addGunAsync }            // 方法
)

7.React-Router 4
npm install react-router-dom --save

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/95093.html

相关文章

  • 打造前端团队的 React CLI 工具

    摘要:关于前端工具对于,有官方的。所以我们使用了和类似的解决方案,创建自己团队专属的前端工具,这也是我们当前的解决方案。我推荐的方案回到文章的标题打造前端团队工具,我认为每个前端团队都应该有自己的工具,这是一个团队技术和经验沉淀的重要根据地。 关于前端 CLI 工具 对于 Angular,有官方的 Angular CLI。 对于 Vue,有官方的 Vue CLI。 对于 React,有官方...

    Scott 评论0 收藏0
  • React.js组件化开发第一步(框架搭建)

    摘要:开始前安装安装安装安装完成后将镜像替换成国内的安装查看安装版本项目初始化命令行切到需要创建项目的目录内然后执行是项目的名称也是文件夹的名称命令行切到刚创建的项目运行项目执行以下命令会自动打开浏览器并防问初始化生成 开始前 安装 node.js; 安装 cnpm; 安装 yarn; 安装完成yarn后, 将镜像替换成国内的: $ yarn config set registry h...

    Betta 评论0 收藏0
  • 从 1 到完美,用 js 和 react-native 写一个 APP

    摘要:从到完美,用和写一个在年开源了后,紧接着在年就又开源了,就此打开了用和前端技术写原生之路。对应来看,程序只有两个部分,和,而部分则分为组件和。所以,在端的纯库无在中同样适用,如等。应用实例便是使用开发的一个日记。 从 1 到完美,用 js 和 react-native 写一个 APP facebook 在 2013 年开源了 react 后,紧接着在 2015 年就又开源了 react...

    CollinPeng 评论0 收藏0
  • 深度解析`create-react-app`源码

    摘要:这个选项看意思就知道了,默认使用来安装,运行,如果你没有使用,你可能就需要这个配置了,指定使用。 2018-06-13 更新。昨天突然好奇在Google上搜了一波关于create-react-app 源码的关键词,发现掘金出现好几篇仿文,就连我开头前沿瞎几把啰嗦的话都抄,我还能说什么是吧?以后博客还是首发在Github上,地址戳这里戳这里!!转载求你们注明出处、改编求你们贴一下参考链...

    waruqi 评论0 收藏0
  • webpack工程化集成React技术栈(一)

    项目开始前,我们先聊一聊关于项目的一些说明。该项目起始于2017年初,当时公司主要技术栈为gulp+angular,鉴于react的火热的生态,在公司决定研发bss管理系统时选用react开发,目的也是为react native打下基础,以解决后期公司大前端技术栈的逐步成熟。(当时没有选择vue开发的主要原因是weex生态还不够特别成熟),既然决定换新,项目的构建也跟着一起换,从gulp转向火热的...

    tianhang 评论0 收藏0
  • React项目实战:react-redux-router基本原理

    摘要:组件将元素作为结果返回。是把数据从项目传到的有效载荷。有以下职责维持应用的提供方法获取提供方法更新通过注册监听器通过返回的函数注销监听器。系列目录前端大统一时代即将来临项目实战环境搭建项目实战基本原理项目实战登录页面编辑中 React相关 React 是一个采用声明式,高效而且灵活的用来构建用户界面的框架。 JSX 本质上来讲,JSX 只是为React.createElement(co...

    MorePainMoreGain 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<