1、方法用()  里面的每个参数之间用,分隔
2、对象(函数、数组)用{}
3、{/*注释...*/}

4 组件的生命周期可分成三个状态:
Mounting:已插入真实 DOM
Updating:正在被重新渲染
Unmounting:已移出真实 DOM

5、.bind(this) 让函数里的this指向函数外面的对象
在这里指的是当前的组件对象

6 多个标签要用<div>包起来

7 绑定事件:onClick(驼峰式命名) (原生html中用全小写)

8 ref="box" , 给子组件起名字,通过

9 React.findDOMNode(this.refs.属性名) 这个方法用了获取真实的dom节点

10组件:封装起来具有独立功能的ui控件,高度可重用(许多方法的集合)

11React. createClass({这是一个许多方法组成的对象});

12 组件
(1)React自有方法(组件生命周期里的方法) render componentWillUpdate componentDidMount
(2)自定义方法 handleClick handleChange handleMouseover

这是一个带有事件处理函数的组件,它一共有4个方法
var Content=React.createClass({
getInitialState:function(){
这是react自有方法
},
handleChange:function(event){
这是一个事件处理函数
},
handleSubmit:function(){
这是一个事件处理函数
},
render:function(){
这是react自有方法
},
});

onClick是一个组件或者子组件的属性,用=来赋值,this指向的是组件这个对象,handleClick指的是函数(即对象的方法),如果handleClick()指的就是函数返回的方法。
onClick={this.handleClick}

13 实例
var HelloWorld=React.creactClass({
handleChange:function(event){
console.log(event.target.value);
},
render:function(){ //当input值改变时,就执行handleChange函数
return <div>
<input onChange={this.handleChange}></input>
</div>;
},
});
React.render( 把组件渲染到body中
<HelloWorld></HelloWorld>,
document.body
);

react1的更多相关文章

  1. react-1 react需要的环境配置

    一.nodeJs简介和安装 1. 官网 https://nodejs.org/en/         NPM https://www.npmjs.com/ 2.检查安装成功的命令 node -v np ...

  2. react-1

    react 创建方法 首先确定你的电脑上面已经安装了node和npm 检查方法:window键 输入cmd 输入node -v 或者 npm -v 在全局安装create-react-app这条命令 ...

  3. 如何选择前端框架:ANGULAR VS EMBER VS REACT

    最近一段时间是令前端工程师们非常兴奋的时期,因为三大Web框架陆续发布新版本,让我们见识到了更强大的Web框架.Ember2.0在2个月之前已经发布,从1.0升级到2.0非常简单.几周之前React发 ...

  4. React 学习资源分享 菜鸟刚学5天 博客写的不多 不懂写博客的套路

    http://www.ruanyifeng.com/blog/2015/03/react.html 首先个人强烈推荐 阮一峰的React基础 细细过一遍,看得出大师的用心良苦 然后就开始看书般的过ht ...

  5. Demo1

    <!DOCTYPE html> <html lang="zh"> <header> <meta charset="utf-8&q ...

  6. 利用Webpack+React(antd)+ES6+python(flask)实现代码转换

    之前的几篇博客是将flask 结合 antd本地化,但是这样使得antd无法按需加载(也不支持ES6的语法),而且在写的过程中还需要把每个组件都用antd对象,这样的做法虽然是实现了antd的本地化, ...

  7. 20.react库 入门

    vue插件: 使用方式:Vue.use(插件名称); {}/function 1.对象 export default { install(Vue,options){ } } 2.函数 export d ...

  8. [webpack]深入学习webpack核心模块tapable

    一.手动实现同步钩子函数 1.SyncHook class SyncHook { // 钩子是同步的 constructor(args){ this.tasks = []; } tap(name,ta ...

  9. npm加载包报错 :syscall access

    $ npm install --save-dev babel-plugin-syntax-dynamic-import npm WARN checkPermissions Missing write ...

随机推荐

  1. jQuery CSS操作及jQuery的盒子模型

    jQuery CSS-jQuery CSS方法 jQuery CSS-jQuery盒子模型

  2. paper122:多尺度与多分辨率的关系

    本文转自:http://blog.csdn.net/chgm_456d/article/details/8100513 我一直对于 多尺度与多分辨率没有一个准确的概念.后来看了一些文章,其中xiaow ...

  3. node 实现视频播放后端,前端使用video标签,视频文件视频mp4

    var fs = require("fs"), http = require("http"), url = require("url"), ...

  4. iOS传值之block传值(一)

    ios4.0系统已开始支持block,在编程过程中,blocks被Obj-C看成是对象,它封装了一段代码,这段代码可以在任何时候执行.Blocks可以作为函数参数或者函数的返回值,而其本身又可以带输入 ...

  5. 制作centos的U盘启动盘

    制作centos的U盘启动盘比ubuntu麻烦一些,因为可能涉及到fat32文件格式不支持大于4G的文件存储的问题,而最新版本的centos就是大于4G的,所以就需要对U盘进行分区. 一个做主引导,一 ...

  6. Xstream解析XML

    <oschina> <catalog>1</catalog> <newsCount>0</newsCount> <pagesize&g ...

  7. 技巧分享:解决Word 2010当中“分页符”造成的空白行

    技巧分享:解决Word 2010当中“分页符”造成的空白行 P1:关于“分页符” 在Word当中插入“分页符”之后,后面的内容就会“更起一段”.就好像“换行符”(回车)会让后面的内容“另起一行”一样. ...

  8. WCF、MongoDB

    http://www.cnblogs.com/quietwalk/archive/2011/08/09/2132573.html http://www.cnblogs.com/huangxinchen ...

  9. spring boot servlet 注入

    spring boot 注入servlet的方法是借助ServletRegistrationBean这个类 例子如下: 先建一个servlet import java.io.IOException; ...

  10. 马士兵Java视频教程 —— 学习顺序

    第一部分:J2se学习视频内容包括: 尚学堂科技_马士兵_JAVA视频教程_JDK5.0_下载-安装-配置 尚学堂科技_马士兵_JAVA视频教程_J2SE_5.0_第01章_JAVA简介_源代码_及重 ...