React.js学习笔记

来源：互联网发布：excel数据透视筛选器编辑：程序博客网时间：2024/05/29 13:12

这里写图片描述
学习React之前我们最好有一些HTML，JS，CSS的基础。

1.引入react

**下面代码一共用了三个库： react.js 、react-dom.js 和 Browser.js ，它们必须首先加载。其中，react.js 是 React 的核心库，react-dom.js 是提供与 DOM 相关的功能，Browser.js 的作用是将 JSX 语法转为 JavaScript 语法，这一步很消耗时间，实际上线的时候，应该将它放到服务器完成，注意script的类型必须是type="text/babel"**

<!DOCTYPE html><html>  <head>    <script src="http://static.runoob.com/assets/react/react-0.14.7/build/react.min.js"></script>    <script src="http://static.runoob.com/assets/react/react-0.14.7/build/react-dom.min.js"></script>    <script src="http://static.runoob.com/assets/react/browser.min.js"></script>  </head>  <body>    <div id="example"></div>    <script type="text/babel">      // ** Our code goes here! **    </script>  </body></html>

2.ReactDOM.render()

ReactDOM.render 是 React 的最基本方法，用于将模板转为 HTML 语言，并插入指定的 DOM 节点。
下面的我们默认是插入在第一步中script中的代码，类似下面不再赘述

输出h1的Hello, world!

ReactDOM.render(  <h1>Hello, world!</h1>,  document.getElementById('example'));

3.JSX语法

在React中，HTML 语言直接写在 JavaScript 语言之中，不加任何引号，这就是 JSX 的语法，它允许 HTML 与 JavaScript 的混写

    <script type="text/babel">      var names = ['zhangsan','wangwu','liermazi'];      ReactDOM.render(        <div>          {            names.map(function(name) {              return <div>Hello, {name}</div>            })          }        </div>,        document.getElementById('example')      );    </script>

4.组件

React 允许将代码封装成组件（component），然后像插入普通 HTML 标签一样，在网页中插入这个组件。React.createClass 方法就用于生成一个组件类

    <!--创建一个组件类-->    <script type="text/babel">        var HelloMessage = React.createClass({          render : function() {            return <h1>Hellow {this.props.name}</h1>;          }        });        ReactDOM.render(          <HelloMessage name="john" />,          document.getElementById('example')        );    </script>

上面代码中，变量 HelloMessage 就是一个组件类。模板插入时，会自动生成 HelloMessage 的一个实例（下文的”组件”都指组件类的实例）。所有组件类都必须有自己的 render 方法，用于输出组件。
注意，组件类的第一个字母必须大写，否则会报错，比如HelloMessage不能写成helloMessage。另外，组件类只能包含一个顶层标签，否则也会报错。

5.this.props.children

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

    <!--this.props.children 属性用法-->    <script type="text/babel">        var NoteList = React.createClass({          render : function() {            return (              <ul>                {                  React.Children.map(this.props.children, function(child) {                    return <li>{child}</li>;                  })                }              </ul>            );          }        });        ReactDOM.render(          <NoteList>            <span>Hello</span>            <span>word</span>          </NoteList>,          document.body        );    </script>

6.PropTypes

组件的属性可以接受任意值，字符串、对象、函数等等都可以。有时，我们需要一种机制，验证别人使用组件时，提供的参数是否符合要求。
组件类的PropTypes属性，就是用来验证组件实例的属性是否符合要求

1 0