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. 客户端使用java,服务端使用c++的corba编程环境搭建

    我们先用c++实现服务端和客户端,然后再用java编写客户端. 1. 首先安装omniORB,omniORB提供 omniidl命令,以及一些头文件和库. omniORB一般是需要你自己进行编译. 2 ...

  2. 最简单的推送--uexGetui

    个推插件使用指南 配置方法这里不再复述,详情请参见插件接入指引 怎样创建一个最简单的推送? //只需要两个方法 uexGetui.initialize(data); uexGetui.onInitia ...

  3. 像Maven一样构建java项目的目录,更好的管理java工程的源码

    都知道maven具有管理Java或者Javaweb的功能.我个人尤其看中的是其代码层次的分离.不同的代码在不同的文件夹下.这是在eclipse新建一个普通的工程无法实现的.而如果用maven实现有时候 ...

  4. Android动画之淡入淡出

    为了更好的说明Android动画的淡入淡出效果,这里以一个场景为例: 界面上有两个View 控件,两个View交替显示,当一个View淡入显示,另一个View淡出不可见. 我们把当前要显示的View叫 ...

  5. mysql 擎特点

  6. POJ 3233 Matrix Power Series(构造矩阵求等比)

    Description Given a n × n matrix A and a positive integer k, find the sum S = A + A2 + A3 + … + Ak. ...

  7. JAVA可阻塞队列-ArrayBlockingQueue子类BlockingQueue的应用,使用它来实现子线程打印10次,主线程打印100次,如此反复

    /** * 使用BlockingQueue实现主子线程互相打印 * @author duwenlei * */ public class BlockingQueueTest { public stat ...

  8. winform 对话框,保存,另存为,还有打印控件

    学习的对话框的种类: 1.打开文件对话框(OpenFileDialog) 2.保存文件对话框(SaveFileDialog) 3.字体对话框(FontDialog) 4.颜色对话框(ColorDial ...

  9. 【前端】Three.js

    Three.js 基本概念 渲染器(Renderer) 渲染器将和Canvas元素进行绑定 场景(Scene) 在Three.js中添加的物体都是添加到场景中的,因此它相当于一个大容器.一般说,场景里 ...

  10. docker设置并运行部分命令及原文

    1.设置开机启动 If you want Docker to start at boot, you should also: $ sudo systemctl enable docker 2. 启动, ...