这篇博客是我通过阅读React官方文档的教程总结的学习笔记，翻译可能存在误差，如有疑问请参见http://reactjs.cn/react/docs/tutorial.html 。

一.所需文件

在编写react代码前需要在html文件中引入三个文件



我通过bower把react.js和react-dom.js下载在本地，这样在刷新浏览器时，浏览器加载会更快。第三个文件是react解码器，由于react用到的语法是jsx，浏览器是不能直接执行jsx语法的，要想你写的react代码在浏览器中运
行，就必须将jsx转换为js代码，第三个文件可以达到将jsx转换为js的目的，当然这并不是唯一一个将jsx转换为js的方法。你还可以使用创建工具gulp或者grunt来将jsx转化为jsx。

二.开始学习代码
　　1.编写第一个react程序
　　　　html文件的核心代码如下（html文件很简单）
　　　　　　<body>
    　　　　　<div id="contentOther"></div>
    　　　　　<script type="text/babel" src="index.js"></script>
　　　　　　</body>
　　　　html文件代码解释：
　　　　a:由于react并不是真正的js代码，所有script标签的type属性不能是text/js，而应该是text/babel
　　　　index.js的代码如下
　　　　　　
　　　　
　　　　index.js文件代码解释：
　　　　a:React.createClass()方法用于创建一个自定义组件，它接受一个对象作为参数
　　　　b:Content是一个自定义组件，在react中自定义组件必须以大写字母开头，dom自带的元素名以小写字母开头，如div，span等.
　　　　c:每个react组件可以拥有多个方法，其中最重要的方法是render方法，这个方法返回一个最终渲染到HTML中的组件树。render只能返回一个单一的组件，如果要返回多个组件，必须将将它们包裹到一个根组件里。
　　　　d:在react中有两种组件，分别为自定义组件（如：Content）和自带组件（如：div等），react可以为组件添加类，react为组件添加类使用的属性是className，在上述demo中为div组件添加了一个other的类
　　　　e:ReactDOM.render()方法用于实例化根组件，它接受两个参数，第一个参数是一个XML标签形式的组件名，它必须闭合，第二个参数是一个dom节点。意味着将指定的根组件渲染到指定的dom节点中。这个方法
　　　　必须放在组件定义之后。
　　　　二.using props
　　　　　　　html文件的核心代码
　　　　　　<body>
　　　　　　　　<div id="list"></div>
    　　　　　<script type="text/babel" src="index.js"></script>
　　　　　　</body>
　　　index.js文件的代码如下
　　　　
　　　　index.js文件代码解释
　　　　a:jsx语法规定，表达式必须要在花括号中，语句不能放在花括号中，如if语句不能放在花括号中。
　　　　b:有两种为组件添加属性的方法：（1）
　　　　　　　　　　　　　　　　<Component name="li" age="12"/>
　　　　　　　　　　　　　　　　　（2）
　　　　　　　　　　　　　　　　var props = {
　　　　　　　　　　　　　　　　　　name:"li",
　　　　　　　　　　　　　　　　　　age:"12"
　　　　　　　　　　　　　　　　};
　　　　　　　　　　　　　　　　<Component {...props}/>
　　　　可以将任何合法的数据类型添加到组建的属性，如函数，数组等
　　　　c:组件的所有数组都保存在组件的props对象中，通过this.props.propsName可以获得指定的属性值
　　三. state
　　html文件的代码如下
　　<body>
    <div id="contentList"></div>
    <script src="index.js" type="text/babel"></script>
　　</body>
　　index.js文件的代码如下
　　　　comments.json文件的内容如下：
　　　　　　[
    　　　　　　{
        　　　　　　"id": 1388534400000,
       　　　　　　 "author": "Pete Hunt",
        　　　　　　"text": "Hey there!"
    　　　　　　},
    　　　　　　{
        　　　　　　"id": 1420070400000,
        　　　　　　"author": "Paul O’Shannessy",
        　　　　　　"text": "React is great!"
    　　　　　　}
　　　　　　]
　　 
　　index.js文件代码解释
　　　a:在这个demo中用到了ajax请求,请求的操作是通过jQuery的$.getJSON()方法实现的，所有除了引入之前提到的那三个文件外，还要引入jquery。ajax请求的文件是comments.json，请求成功返回一个Json数据
　　　b:自定义组件都有state，在组件中通过this.state.stateName可以取得指定的state，与props不同的是在一个组件内部可以改变自己的state，但是不能改变props，组件的props只能通过父组件去改变。
　　　c:组件可以通过setState()去改变自己的state，当组件的state发生变化后会再次执行render函数，即重新渲染组件，
　　　d:getInitialState()用来设置组件的初始state，在组件的生命周期只被执行一次，而且它会比render先执行
　　　e:componentDidMount()是一个react组件首次被render后立即自动调用的方法。在这个demo中ContentList组件的初始state data是一个空数组，在组件ContentList第一次被render后会立即调用
　　　componentDidMount()方法去修改组件的state，在修改了state后，组件会再次被render，但是组件再次被render之后就不会在调用componentDidMount()方法了。
　　　f:在React中，组件有两种数据模型，分别是props和state，在react这篇官方文档中，详细的说明了props和state的区别，以及它们的应用场景。我看了这篇文章的结论是：在做交互性功能上才使用state，在
　　　　下面这三种情况下不要使用state：
　　　　　　　　　　　　　　　　（1）数据来自于父组件
　　　　　　　　　　　　　　　　（2）数据不会随时间改变
　　　　　　　　　　　　　　　　（3）数据可以基于其他state或props计算得到
　　
　　　四.event
　　html文件代码如下
　　<body>
    　　<div id="content2"></div>
    　　<script type="text/babel" src="index.js"></script>
　　</body>
　　js文件代码如下
　　

　　index.js文件的解释
　　a：组件的event是作为props存在，event名采用驼峰命名.
　　b:在这个demo中实现的效果是：在输入框中输入内容，当点击OK按钮后，将输入的内容插入下方的无序列表。为了实现这个效果我创建了三个组件，分别为：ContentBox，
　　Form以及List，其中Form和List是ContentBox的子组件。由于父组件ContentBox需要从子组件Form得到输入的值，所以我给Form添加了一个名为onContentSubmit的props
　　这个onContentSubmit是一个回调函数。这个回调函数在From触发submit事件（即ok按钮被点击）后被调用。onContentSubmit的执行会导致ContentBox的state被改变，
　　前面已经说过，组件的state改变，会使组件重新render。List的props item等于ContentBox的state data ，所以只要ContentBox重新render也会改变List的
　　props item改变。所以输入框输入的值可以插到无序列表中
　　关于event我还写了另位一个demo，在这里供大家参看，这个domo我就不做解释了，
　　html文件核心代码如下
　　<body>
    　　<div id="content"></div>
    　　<script type="text/babel" src="index.js"></script>
　　</body>
　　index.js文件核心代码如下
　　


　　　

React入门基础（学习笔记）的更多相关文章

  1. es6 Object.assign ECMAScript 6 笔记（六） ECMAScript 6 笔记（一） react入门——慕课网笔记 jquery中动态新增的元素节点无法触发事件解决办法 响应式图像 弹窗细节 微信浏览器——返回操作 Float 的那些事 Flex布局 HTML5 data-* 自定义属性 参数传递的四种形式

    es6 Object.assign   目录 一.基本用法 二.用途 1. 为对象添加属性 2. 为对象添加方法 3. 克隆对象 4. 合并多个对象 5. 为属性指定默认值 三.浏览器支持 ES6 O ...

  2. 尚学堂JAVA基础学习笔记

    目录 尚学堂JAVA基础学习笔记 写在前面 第1章 JAVA入门 第2章 数据类型和运算符 第3章 控制语句 第4章 Java面向对象基础 1. 面向对象基础 2. 面向对象的内存分析 3. 构造方法 ...

  3. 【C#编程基础学习笔记】4---Convert类型转换

    2013/7/24 技术qq交流群:JavaDream:251572072  教程下载,在线交流:创梦IT社区:www.credream.com [C#编程基础学习笔记]4---Convert类型转换 ...

  4. 【C#编程基础学习笔记】6---变量的命名

    2013/7/24 技术qq交流群:JavaDream:251572072  教程下载,在线交流:创梦IT社区:www.credream.com [C#编程基础学习笔记]6---变量的命名 ----- ...

  5. 1.C#基础学习笔记3---C#字符串（转义符和内存存储无关）

    技术qq交流群:JavaDream:251572072  教程下载,在线交流:创梦IT社区:www.credream.com ------------------------------------- ...

  6. Webpack新手入门教程(学习笔记)

    p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; text-align: center; font: 30.0px Helvetica; color: #000000 } ...

  7. Java基础学习笔记总结

    Java基础学习笔记一 Java介绍 Java基础学习笔记二 Java基础语法之变量.数据类型 Java基础学习笔记三 Java基础语法之流程控制语句.循环 Java基础学习笔记四 Java基础语法之 ...

  8. Mysql数据库基础学习笔记

    Mysql数据库基础学习笔记 1.mysql查看当前登录的账户名以及数据库 一.单表查询 1.创建数据库yuzly,创建表fruits 创建表 ) ) ,) NOT NULL,PRIMARY KEY( ...

  9. 0003.5-20180422-自动化第四章-python基础学习笔记--脚本

    0003.5-20180422-自动化第四章-python基础学习笔记--脚本 1-shopping """ v = [ {"name": " ...

  10. Java基础学习笔记（一）

    Java基础学习笔记(一) Hello World 基础代码学习 代码编写基础结构 class :类,一个类即一个java代码,形成一个class文件,写于每个代码的前端(注意无大写字母) XxxYy ...

随机推荐

  1. Dubbo实践（九）ExtensionFactory

    ExtensionLoader.java中注意到injectExtension函数是为了设置所生成的对象的field:其方法为对于有set函数的field进行设置.此时用到了ExtensionFact ...

  2. 404 Note Found队 Alpha7

    目录 组员情况 组员1(组长):胡绪佩 组员2:胡青元 组员3:庄卉 组员4:家灿 组员5:凯琳 组员6:翟丹丹 组员7:何家伟 组员8:政演 组员9:黄鸿杰 组员10:刘一好 组员11:何宇恒 展示 ...

  3. Strategy（策略）模式

    1.概述 在软件开发中也常常遇到类似的情况,实现某一个功能有多种算法或者策略,我们可以根据环境或者条件的不同选择不同的算法或者策略来完成该功能.如查找.排序等,一种常用的方法是硬编码(Hard Cod ...

  4. 接入Gobelieve IM开发平台的DEMO代码

    接入Gobelieve IM开发平台的DEMO代码, 请求头部: Authorization: Basic $base64(appid:$hex_md5(appsecret))意思是 appsecre ...

  5. 12c数据库重启后自动启动pdb

    由于最近管理12c数据库,创建了9个新的pdb.相对于以前11g版本每天一个一个的环境检查,方便了很多. 但是因为一次意外宕机,数据库重启.虽然数据库重启,但是管理的pdb确不能自动重启,所以需要手动 ...

  6. 百度地图中找不到BMap的解决

    一般情况下是引用的问题,产生的原因大概有两种 1.不同架构的引用方式不同,引用js的方式不同导致 2.自身调用顺序有误 官方的引用方式是使用标签引入,示例 <script type=" ...

  7. shiro使用框架，自定义过滤器

    1.shiro配置文件配置 <!-- Shiro Filter --> <bean id="shiroFilter" class="org.apache ...

  8. MySQL----MySQL数据库入门----第三章 添加、更新与删除数据

    3.1 添加数据 ①为所有字段添加数据 方法1:字段包含全部定义的字段 insert into 表名(字段1,字段2...字段n) values(值1,值2,......,值n); 方法2:值必须与字 ...

  9. Delphi XE5的Android开发平台搭建

    Delphi XE5支持Android ARM的开发,可以在Android虚拟机里运行,因此建议将XE5安装在64bit的Windows,内存可以大于3GB Delphi XE5安装光盘中包含了最基本 ...

  10. 初识HDFS原理及框架

    目录 HDFS是什么 HDFS的优缺点 HDFS的框架 HDFS的读写流程 HDFS命令 HDFS参数 1. HDFS是什么 HDFS(Hadoop Distributed File System)是 ...