标签：物理 and div class 小结 pack date name lstat
import React from ‘react‘ import { render } from ‘react-dom‘ // 定义组件 class Hello extends React.Component { render() { // return 里面写jsx语法 return ( <p>hello world</p> ) } } // 渲染组件到页面 render( <Hello/>, document.getElementById(‘root‘) )
import React from ‘react‘
这里的react对应的是./package.json文件中dependencies中的‘react‘，即在该目录下用npm install安装的 react 。npm 安装的 react 的物理文件是存放在./node_modules/react中的，因此引用的东西肯定就在这个文件夹里面。./node_modules/react/package.json中的"main": "react.js",，这里的main即指定了入口文件，即./node_modules/react/react.js这个文件
2. jsx语法
1）使用一个父节点包裹
jsx中不能一次性返回零散的多个节点，如果有多个则包含到一个节点中
如：
return ( <div> <p>段落1</p> <p>段落2</p> <p>段落3</p> </div> )
3. 注释
jsx中用{/**/}的注释形式
如：
return( //jsx外的注释 <div> {/*jsx里面的注释*/} <p>hello</p> </div> )
4. 样式
css样式：
<p className="class1">hello</p> <!--用className代替class*/
内联样式：
<p style={{color:‘red‘,fontSize:‘20px‘}}>hello</p> <!--注意{{}},和驼峰写法-->
5. 事件
如：click
class Hello extends React.Component{ render(){ return ( <p onClick={this.clickHandler.bind(this)}>hello</p> ) } clickHandler(event){ console.log(‘yes‘) } }
注意：onClick驼峰写法
6. 循环
7. 判断
jsx中一般会用到三元表达式（表达式也是放在{}中的）
如：
return( <div> <p>段落1</p> { true ? <p> true </p> : <p> false </p> </div> } </div> )
也可以这样使用：
<p style={{display: true? ‘block‘ ? ‘none‘}}> hello world</p>
8. 数据传递&数据变化
1） props
如果
<Header title="Hello页面"/>
在Header组件中可以这样取到
render(){ return( <p>{this.props.title}</p> ) }
在react中，父组件给子组件传递数据时，就是以上的方式，通过给子组件设置props，子组件获取props中的值便可完成数据传递。
2）props&state
如果组件内部自身的属性发生变化
class Hello extends React.Component{ constructor(props,context){ super(props,context); this.state={ //显示当前时间 now:Date.now() } } render(){ return( <div> <p>hello world {this.state.now}</p> </div> ) } }
react会实时监听每个组件的props和state值，一旦有变化，会立刻更新组件，将结果重新渲染到页面上
var LikeButton = React.createClass({ getInitialState: function (){ return {liked : false}; }, handleClick: function (event) { 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> ); } });
3）智能组件&木偶组件
标签：物理 and div class 小结 pack date name lstat
原文地址：http://www.cnblogs.com/chaoran/p/6389645.html
