A-A+

栾一峰react教程笔记

2016年09月15日 react 暂无评论 阅读 246 次

栾一峰react教程笔记

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <script src="js/react.js"></script>

  <script src="js/react-dom.js"></script>

  <script src="js/browser.min.js"></script>

  <script src="js/jquery.min.js"></script>

  <script src="js/marked.min.js"></script>

</head>

<body>

<div id="example"></div>

<script type="text/jsx">

//一:ReactDOM.render()

ReactDOM.render(

  <h1>Hello,world!</h1>,

  document.getElementById('example')

);

</script>

<div id="example2"></div>

<script type="text/jsx">

  //demo2 JSX语法

  //遇到 HTML 标签(以 < 开头),就用 HTML 规则解析;遇到代码块(以 { 开头),就用 JavaScript 规则解析。上面代码的运行结果如下。

var names =['alice','emily','kate'];

  ReactDOM.render(

    <div>

      {

        names.map(function(name){

          return <div>Hello,{name}!</div>

        })

      }

    </div>,

    document.getElementById('example2')

  );

</script>

<!--//demo3-->

<div id="example3"></div>

<script type="text/jsx">

 var arr=[

   <h1>Hello world!</h1>,

   <h2>React is awsome</h2>

 ] ;

  ReactDOM.render(

    <div>{arr}</div>,

    document.getElementById('example3')

  );

</script>

<!--demo4-->

<!--就是 class 属性需要写成 className ,for 属性需要写成 htmlFor ,这是因为 class 和 for 是 JavaScript 的保留字。-->

<div id="example4"></div>

<script type="text/jsx">

  var HelloMessage =React.createClass({

    render:function(){

      return <h1 className={this.props.className}>Hello {this.props.name}</h1>;

    }

  });

  ReactDOM.render(

    <HelloMessage name="John" className="ddd"/>,

    document.getElementById('example4')

  );

</script>

<!--demo5  this.props.children-->

<!--this.props 对象的属性与组件的属性一一对应,但是有一个例外,就是 this.props.children 属性。它表示组件的所有子节点

这里需要注意, this.props.children 的值有三种可能:如果当前组件没有子节点,它就是 undefined ;

如果有一个子节点,数据类型是 object ;如果有多个子节点,数据类型就是 array 。所以,处理 this.props.children 的时候要小心。

React 提供一个工具方法 React.Children 来处理 this.props.children 。我们可以用 React.Children.map 来遍历子节点,而不用担心 this.props.children 的数据类型是 undefined 还是 object

-->

<div id="example5"></div>

<script type="text/jsx">

 var NoteList =React.createClass({

   render:function(){

     return(

       <ol>

         {

           React.Children.map(this.props.children,function(child){

             return <li>{child}</li>

           })

         }

       </ol>

     )

   }

 });

 ReactDOM.render(

   <NoteList>

     <span>hello</span>

     <span>world</span>

   </NoteList>,

   document.getElementById('example5')

 )

</script>

<!--demo6 PropTypes-->

<!--上面的Mytitle组件有一个title属性。PropTypes 告诉 React,这个 title 属性是必须的,而且它的值必须是字符串。现在,我们设置 title 属性的值是一个数值。-->

<div id="example6"></div>

<script type="text/jsx">

  var MyTitle = React.createClass({

    propTypes:{

      title:React.PropTypes.string.isRequired,

    },

    render:function(){

      return <h1>{this.props.title}</h1>;

    }

  });

  var data =123;

  ReactDOM.render(

    <MyTitle title={data} />,

    document.getElementById('example6')

  )

</script>

<div id="example6-2"></div>

<script type="text/jsx">

  var MyTitle = React.createClass({

    getDefaultProps:function(){

      return {

        title:'Hello world'

      };

    },

    render:function(){

      return <h1>{this.props.title}</h1>;

    }

  });

  var data =123;

  ReactDOM.render(

    <MyTitle  />,

    document.getElementById('example6-2')

  )

</script>

<!--demo7获取真实的DOM节点-->

<!--文本输入框必须有一个 ref 属性,然后 this.refs.[refName] 就会返回这个真实的 DOM 节点。-->

<div id="example7"></div>

<script type="text/jsx">

  var MyComponent = React.createClass({

    handleClick:function(){

      this.refs.myTextInput.focus();

    },

    render:function(){

      return (

        <div>

          <input type="text" ref="myTextInput"/>

          <input type="button" value="Focus the text input" onClick={this.handleClick}/>

        </div>

      )

    }

  });

  ReactDOM.render(

    <MyComponent/>,

    document.getElementById("example7")

  )

</script>

<!--八、this.state-->

<div id="example8"></div>

<script type="text/jsx">

    var LikeButton = React.createClass({

      getInitialState:function(){  //方法用于定义初始状态,也就是一个对象,这个对象可以通过 this.state 属性读取。

        return {liked:false};

      },

      handleClick:function(){

        this.setState({liked:!this.state.liked }); //this.setState 方法就修改状态值,每次修改以后,自动调用 this.render 方法,再次渲染组件。

      },

      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(

    <LikeButton/>,

    document.getElementById('example8')

  )

</script>

<!--九、表单-->

<!--文本输入框的值,不能用 this.props.value 读取,而要定义一个 onChange 事件的回调函数,

通过 event.target.value 读取用户输入的值。textarea 元素、select元素、radio元素都属于这种情况,-->

<div id="example9"></div>

<script type="text/jsx">

  var Input = React.createClass({

    getInitialState:function(){

      return {value:'Hello!'};

    },

    handleChange:function(event){

      this.setState({

        value:event.target.value

      })

    },

    render:function(){

      var value =this.state.value;

      return (

        <div>

          <input type="text" value={value} onChange={this.handleChange}/>

          <p>{value}</p>

        </div>

      )

    }

  });

  ReactDOM.render(

    <Input />,

    document.getElementById('example9')

  )

</script>

<!--十、组件的生命周期-->

<!--组件的生命周期分成三个状态:-->

<!--Mounting:已插入真实 DOM-->

<!--Updating:正在被重新渲染-->

<!--Unmounting:已移出真实 DOM-->

<!--hello组件加载以后,通过 componentDidMount 方法设置一个定时器,每隔100毫秒,就重新设置组件的透明度,从而引发重新渲染。-->

<!--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):组件判断是否重新渲染时调用-->

<div id="example10"></div>

<script type="text/jsx">

  var Hello = React.createClass({

    getInitialState:function(){

      return {

        opacity:1.0

      }

    },

    componentDidMount:function(){

      this.timer = setInterval(function(){

        var opacity = this.state.opacity;

        opacity -=.05;

        if(opacity<0.1){

          opacity=1.0

        }

        this.setState({

          opacity:opacity

        });

      }.bind(this),100)

    },

    render:function(){     //两层{{}}

      return (

        <div style={{opacity:this.state.opacity}}>

          Hello {this.props.name}

        </div>

      )

    }

  });

  ReactDOM.render(

    <Hello name="world"/>,

    document.getElementById('example10')

  )

</script>

<!--十一、Ajax-->

<!--组件的数据来源,通常是通过 Ajax 请求从服务器获取,可以使用 componentDidMount 方法设置 Ajax 请求,

等到请求成功,再用 this.setState 方法重新渲染 UI (查看 demo11 )。-->

<div id="example11"></div>

<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

<script type="text/jsx">

    var UserGist =React.createClass({

      getInitialState:function(){

        return{

          username:'',

          lastGistUrl:'',

        }

      },

      componentDidMount:function(){

        $.get(this.props.source,function(result){

          var lastGist = result[0];

          if(this.isMounted()){

            this.setState({

              username:lastGist.owner.login,

              lastGistUrl:lastGist.html_url

            });

          }

        }.bind(this));

      },

      render:function(){

        return (

          <div>

            {this.state.username}'s last gist is

            <a href={this.state.lastGistUrl}>here</a>

          </div>

        );

      }

    });

  ReactDOM.render(

    <UserGist soure="https://api.github.com/user/octocat/gists"/>,

    document.getElementById('example11')

  )

</script>

<!--demo12-->

<div id="example12"></div>

<script type="text/jsx">

  var RepoList = React.createClass({

    getInitialState: function() {

      return { loading: true, error: null, data: null};

    },

    componentDidMount() {

      this.props.promise.then(

        value => this.setState({loading: false, data: value}),

        error => this.setState({loading: false, error: error}));

    },

    render: function() {

      if (this.state.loading) {

        return <span>Loading...</span>;

      }

      else if (this.state.error !== null) {

        return <span>Error: {this.state.error.message}</span>;

      }

      else {

        var repos = this.state.data.items;

        var repoList = repos.map(function (repo) {

          return (

            <li>

              <a href={repo.html_url}>{repo.name}</a> ({repo.stargazers_count} stars) <br/> {repo.description}

            </li>

          );

        });

        return (

          <main>

            <h1>Most Popular JavaScript Projects in Github</h1>

            <ol>{repoList}</ol>

          </main>

        );

      }

    }

  });

  ReactDOM.render(

    <RepoList

      promise={$.getJSON('https://api.github.com/search/repositories?q=javascript&sort=stars')}

    />,

    document.getElementById("example12")

  );

</script>

<!--<script src="demo.js" type="text/jsx"></script>-->

</body>

</html>

ps:http://www.ruanyifeng.com/blog/2015/03/react.html

标签:

给我留言

Copyright © web前端技术开发个人博客 保留所有权利  京ICP备14060653号 Theme  Ality

用户登录