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)智能组件&木偶组件