React6 实战项目1

本文为 React 的第一个项目,需要使用 livereload(此文中有使用介绍)

完整代码包下载         (运行时可能显示 gulp 版本不匹配,可重新自行下载 npm install -g -gulp      npm install --save-dev -gulp)

配置生产环境:

        1、cmd 进入项目文件夹

        2、创建 reactQa 并进入:mkdir reactQa && cd reactQa

        3、安装必要的组件:npm init,一直回车就好

        4、npm install react --save

        5、npm install -g gulp

        6、npm install --save-dev gulp gulp-browserify gulp-concat gulp-react gulp-connect lodash reactify

        7、安装 bootstrap(与 gulp 配合使用)

                       安装 bower : npm install bower -g

                       bower init (一直回车就好)

                       bower install bootstrap --save

         8、创建静态文件 app文件夹 dist文件夹(压缩后的文件存放位置) index.html  index-static.html gulpfile.js    

         9、dist 内创建 js 文件夹,新建 main.js 文件    

         10、app 内创建 js 文件夹

                      新建 main.js

                      新建 components 文件夹,新建  QuestionApp.js、QuestionForm.js、QuestionItem.js、QuestionList.js、ShowAddButton.js    

          11、gulp serve 

以下为项目中使用的知识点:

完整知识点下载

1、Hello World

      引用 react.js 以及 JSXTransformer.js 可自行下载

     

2、组件嵌套

     

3、state

     

4、props

     

5、events 与 ref

      对于不确定个数的 radio 与 checkbox 还是建议 onChange 事件而不使用 ref 属性

      ref 是 react 对象,所以在子组件中定义新的函数,在父组件中使用,ref 也是可以使用的

      ref 也可以被定义为函数,如 ref={function(comp){ React.findDOMNode(comp).focus()}}

     

6、双向数据流  使用 mixins

      需要多引用 react-with-addons.js

      在 script 中首先需要写入 mixins,mixins:[React.addons.LinkedStateMixIn]

      mixins 是一个 link 对象,可以一直传递到子组件

     

7、组件的生命周期

      周期分为三个阶段:装载阶段、更新阶段、卸载阶段

      装载阶段(Mounting)分为两个函数 componentWillMount(将要被装载)  componentDidMount(已经被装载)

              componentDidMount 此阶段可写 ajax

              函数 React.unmountComponentAtNode(传一个 DOM 节点) 删除一个组件

     

      更新阶段(Updating)分为四个个函数

              shouldComponentUpdate(可以做限制,暂时不太懂为什么写,请指教!

              componentWillUpdate(组件将要更新,做处理)

              componentDidUpdate(组件已经更新,可以进行dom操作)

              componentWillReceiveProps(放到子组件,子组件将接受更新)

     

8、Mixin

      与组件的生命周期密切相关,目的是让不同的组件共用一些逻辑,不用重复的写一些相似的代码

     








  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值