1.依赖的资源:

<script type="text/javascript" src='../asset/react.js'></script>  
<script type="text/javascript" src='../asset/react-dom.js'></script>
<script type="text/javascript" src='../asset/JSXTransformer.js'></script>  //解析text/jsx语法
<script type="text/javascript" src='../asset/browser.min.js'></script> //解析text/babel语法

2.基本写法:

html:<div id='demo1'></div>
JS:
ReactDOM.render(
    <h1>Hello, I.m demo1!</h1>,
    document.getElementById('demo1')
);

3.定义组件式写法createClass(!组件名称开头字母一定要大写)

html:<div id='demo2'></div>
JS:
var Demo2Box=React.createClass({
    render:function(){
        return(
            <div className="demo2Box">
                hello,I.m demo2
            </div>
        );
    }
});
ReactDOM.render(
    <Demo2Box />,
    document.getElementById('demo2')
);

4.React.createElement使用,参数( ReactElement element, [object props], [children ...]

基本用法: React.createElement('a', {href: 'http://facebook.github.io/react/'}, 'Hello React!')
html:<div id='demo3'></div>
JS:
var Demo3Box=React.createClass({
    render:function(){
        return(
            React.createElement('div',{className:'demo3Box'},
                "hello,I.m demo3"
            )
        )
    }
});
ReactDOM.render(
    React.createElement(Demo3Box,null),
    document.getElementById('demo3')
);

5.引用多个组件的写法:

html:<div id='demo4'></div>
JS:
var Demo4List=React.createClass({
    render:function(){
        return (
            <div className="demo4List">
                "hello,I.m demo4List"
            </div>
        );
    }
});
var Demo4Form=React.createClass({
    render:function(){
        return (
            <div className="demo4Form">
                "hello,I.m demo4Form"
            </div>
        );
    }
});
var Demo4Box=React.createClass({
    render:function(){
        return (
            <div className="demo4Box">
                <h1>demo4Box</h1>
                <Demo4List />
                <Demo4Form />
            </div>
        );
    }
});
ReactDOM.render(
    <Demo4Box />,
    document.getElementById('demo4')
);

6.this.props[属性名]得到组件的属性。(用于获取外面传入的参数或者回调方法)

特例:this.props.children:表示组件的所有子节点(!没有子节点时就是undefined,如果有一个子节点,数据类型是Object,多个节点时,数据类型就是array。)
外部data,内部通过props遍历:
var data = [
  {id: 1, author: "Pete Hunt", text: "This is one comment"},
  {id: 2, author: "Jordan Walke", text: "This is *another* comment"}
];
var Demo5Box=React.createClass({
    render:function(){
        var commentNodes=this.props.data.map(function(comment) {
            return (
                <li author={comment.author} key={comment.id}>
                    {comment.text}
                </li>
            );
        });
        return(
            <ul className="comment">
                {commentNodes}
            </ul>
        )
    }
});
ReactDOM.render(
    <Demo5Box data={data} />,
    document.getElementById('demo5')
);
使用props.children及React.Children:
 

7.this.state属性对象,可以改变。(比如用户输入、服务器请求、时间变化等)

getInitialState定义初始变量,这个对象可以通过this.state属性读取。

this.setState方法是修改状态值。

html:<div id='demo6'></div>
JS:
var Demo6Box=React.createClass({
    getInitialState:function(){
        return {liked:false}
    },
    handleClick:function(){
        this.setState({liked:!this.state.liked});
    },
    render:function(){
        var text=this.state.liked?'like':'haven\'t liked';
        return (
            <p onClick={this.handleClick}>
                You {text} this,click to toggle.
            </p>
        )
    }
});
ReactDOM.render(
    <Demo6Box />,
    document.getElementById('demo6')
);

8.组件的propTypes属性,用于验证传入的参数是否符合要求。

 组件的 getDefaultProps方法,用来设置组件传入参数的默认值。

html:<div id='demo7'></div>
JS:
/*demo7*/
var title='title';
var bool=true;
var count=10;
var arr=[1,2,3];
var obj={'a':1};
var callback=function(){
    console.log('dddddd');
};
var content="dsfsdffdd";
var Demo7Box=React.createClass({
    propTypes:{
        title:React.PropTypes.string.isRequired,
        bool:React.PropTypes.bool.isRequired,
        count:React.PropTypes.number.isRequired,
        arr:React.PropTypes.array.isRequired,
        obj:React.PropTypes.object,
        callback:React.PropTypes.func.isRequired,
        content:React.PropTypes.any.isRequired
    },
    getDefaultProps:function(){
        return{
            contentDefault:'sdsfsfdsaafdsfds'
        }
    },
    render:function(){
        return (
            <div>
                <h2>{this.props.title}</h2>
                <h2>{this.props.bool}</h2>
                <h2>{this.props.count}</h2>
                <h2>{this.props.arr}</h2>
                <h2>{this.props.obj.a}</h2>
                <h2>{this.props.callback()}</h2>
                <h2>{this.props.content}</h2>
                <h2>{this.props.contentDefault}</h2>
            </div>
        )   
    }
});
ReactDOM.render(
    <Demo7Box title={title} bool={bool} count={count} arr={arr} obj={obj} callback={callback} content={content} />,
    document.getElementById('demo7')
);

9.this.refs:从组件中获取真实DOM的节点。

html:<div id='demo8'></div>
JS:
/*demo8*/
var Demo8Box=React.createClass({
    handleClick:function(){
        this.refs.myInput.focus();
    },
    render:function(){
        return (
            <div>
                <input type='text' ref='myInput' />
                <input type='button' value='getFocus' onClick={this.handleClick} />
            </div>
        );
    }
});
ReactDOM.render(
    <Demo8Box />,
    document.getElementById('demo8')
);

10.组件的生命周期的处理函数。

组件的生命周期分成三个状态: Mounting:已插入真实 DOM 、Updating:正在被重新渲染 、Unmounting:已移出真实 DOM。
React 为每个状态都提供了两种处理函数,will 函数在进入状态之前调用,did 函数在进入状态之后调用,三种状态共计五种处理函数。
componentWillMount()
componentDidMount()
componentWillUpdate(object nextProps, object nextState)
componentDidUpdate(object prevProps, object prevState)
componentWillUnmount()
此外,React 还提供两种特殊状态的处理函数。
componentWillReceiveProps(object nextProps):已加载组件收到新的参数时调用
shouldComponentUpdate(object nextProps, object nextState):组件判断是否重新渲染时调用。
html:<div id='demo9'></div>
JS:
/*demo9*/
var Demo9Box=React.createClass({
    getInitialState:function(){
        return {
            num:100
        }
    },
    componentDidMount:function(){
        var num=this.state.num;
        this.timer=setInterval(function(){
            if(num<=0){
                this.setState({num:100})
            }
            else{
                this.setState({num:num-1})
            }
        }.bind(this),1000)
    },
    render:function(){
        return (
            <div>
                {this.state.num}
            </div>
        )
    }
});
ReactDOM.render(
    <Demo9Box />,
    document.getElementById('demo9')
);
 

ReactJS学习笔记(一)的更多相关文章

  1. ReactJS学习笔记(三)

    需要注意的问题: 1.组件名称开头字母一定要大写.(PS:原因是 React 的 JSX 里约定分别使用首字母大.小写来区分本地组件的类和 HTML 标签.) 2.this.props.childre ...

  2. ReactJS学习笔记(二)

    1.Ajax: componentDidMount 方法设置 Ajax 请求,等到请求成功,再用 this.setState 方法重新渲染 UI. /*demo1*/ var Demo1Box=Rea ...

  3. reactjs 学习笔记

    1.安装 npm install -g create-react-app create-react-app my-app cd my-app npm start

  4. 【原】redux异步操作学习笔记

    摘要: 发觉在学习react的生态链中,react+react-router+webpack+es6+fetch等等这些都基本搞懂的差不多了,可以应用到实战当中,唯独这个redux还不能,学习redu ...

  5. react学习笔记1--基础知识

    什么是react A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES[React是一个用于构建用户界面的JavaScript库.] React之所以快, ...

  6. The Road to learn React书籍学习笔记(第二章)

    The Road to learn React书籍学习笔记(第二章) 组件的内部状态 组件的内部状态也称为局部状态,允许保存.修改和删除在组件内部的属性,使用ES6类组件可以在构造函数中初始化组件的状 ...

  7. React入门基础(学习笔记)

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

  8. js学习笔记:webpack基础入门(一)

    之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...

  9. PHP-自定义模板-学习笔记

    1.  开始 这几天,看了李炎恢老师的<PHP第二季度视频>中的“章节7:创建TPL自定义模板”,做一个学习笔记,通过绘制架构图.UML类图和思维导图,来对加深理解. 2.  整体架构图 ...

随机推荐

  1. JavaScript分离代码理解

    window.onload=prepareLinks; //页面加载触发onload事件 function prepareLinks(){ //定义函数 var links=document.getE ...

  2. IOS 制作启动画面

    启动方式简述 IOS 8 及之前: Launch Images Source方式, IOS8 及之后:    1, Launch Images Source方式 : 2 , LaunchScreen. ...

  3. javascript——Array

    # js数组分为属性和方法 ## 属性 1.constructor返回对创建此对象的数组函数的引用. 这个其实在javascript中的对象都有 var a = [] console.log(a.co ...

  4. CentOS中的常用命令

    1. 网络 1.1 查看所有端口 netstat -ntlp 1.2 查看被打开的端口 netstat -anp 1.3 查看端口占用情况 lsof -i: 或 lsof -i tcp: 2. 硬盘 ...

  5. 修复sublime text系统右键菜单

    修复sublime text系统右键菜单 安装完Sublime Text2后,拿掉电脑里面的备用硬盘,导致每次使用Open with Sublime Text2的时候,都会出错,打开注册表,找到 HK ...

  6. FLASH结构

    mergedir/code.tmp.bin 压缩未加密文件的FLASH文件 mergedir/sfs/nvm.bin   shareData数据文件,未加密.未压缩 数据克隆:DATA/ALL APP ...

  7. 重载Python FTP_TLS 实现Implicit FTP Over TLS方式下载文件

    对于Python2.7来说,内置的FTP_TLS类并不支持Implicit FTP Over TLS加密方式的FTP Server操作,为支持Implicit FTP Over TLS加密方式,必须重 ...

  8. MyBatis与Spring整合

    1.单独使用MyBatis 单独使用MyBatis,不结合其他框架,主要步骤是: 1.创建SqlSessionFactory对象 创建方法是通过SqlSessionFactoryBuilder这个类从 ...

  9. SQL Server的高级知识

    DataSet的内容介绍,两种单例模式(并发量的考虑),SQL高级中的case语句.连接操作.子查询.派生表 -------------------------------- 1.Case的用法 使用 ...

  10. Tomcat Connector三种运行模式(BIO, NIO, APR)的比较和优化

    Tomcat Connector的三种不同的运行模式性能相差很大,有人测试过的结果如下: 这三种模式的不同之处如下: BIO: 一个线程处理一个请求.缺点:并发量高时,线程数较多,浪费资源. Tomc ...