业余学习react 学习记录

http://www.ruanyifeng.com/blog/2015/03/react (阮一峰 react 学习)

　1.搭建环境：npm 使用 React

　npm install -g cnpm --registry=https://registry.npm.taobao.org

$ cnpm install -g create-react-app          --全局安装create-react-app模块

$ create-react-app my-app

$ cd my-app/      　 　　　　　　　　　　　　　 --"my-app" :项目名

$ npm start 　　　　　　　　　　　　　　　　　　 --  webpack 命名 运行

2. 命名行：

npm start ； npm run build ; npm test ; npm run eject ;

3.ReactDOM.render 是 React 的最基本方法，用于将模板转为 HTML 语言，并插入指定的 DOM 节点 (eg)

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

　4.JSX 语法

var arr = [

  <h1>Hello world!</h1>,

  <h2>React</h2>,

];

var names = ['Alice', 'Emily', 'Kate'];

ReactDOM.render(

<div>{arr}</div>,

<div>{names.map(function (name)
 {  return <div>Hello, {name}!</div>} )}

 </div>,

  document.getElementById('example')

);

5.组件：组件类的第一个字母必须大写，组件类只能包含一个顶层标签，否则也会报错

  var HelloMessage=React.createClass({

      /*组件类都必须有自己的render方法，用于输出组件*/

      render:function () {

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

      }

    });

    ReactDOM.render(

      /*变量 HelloMessage 就是一个组件类*/

      <HelloMessage name='JOIN'/>,

      document.getElementById('example1')

    )

6.this.props.children （它表示组件的所有子节点）、

7.验证组件MyTitle 属性PropTypes

  var MyTitle = React.createClass({

    propTypes: {

      /*title屬性是字符串且必須的*/

      title: React.PropTypes.string.isRequired,

    },

    render: function() {

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

     }

  });

8.this.state

巴特西

业余学习react 学习记录

最新文章

热门文章