业余学习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
大兄弟啊,大兄弟,余生请你多指教呢