一、安装和使用react脚手架
npm install - g create-react-app
create-react-app my-app
cd my-app
npm start
二、ReactDOM.render()
ReactDOM.render是React最基本的方法,用于将模板转为HTML语言,并插入指定的DOM节点。
ReactDOM.render(
<h1>HHH<h1>
document.getElementById('example')
)
将一个h1标题,插入example(<div id="example"></div>)节点。
三、JSX语法
HTML语言直接写在JavaScript语言之中,不加任何引导,允许HTML与JavaScript的混写。
var names = ['Alice', 'Emily', 'Kate'];
ReactDOM.render(
<div>
{
names.map(function (name) {
return <div>Hello, {name}!</div>
})
}
</div>,
document.getElementById('example')
);
四、组件
React允许将代码封装成组件(component),然后像插入HTML标签一样,在网页中插入这个组件。HelloMessage就是一个组件类。
五、生命周期
当一个组件没有声明周期和state的时候 它可以声明为一个函数
六、一些常用特性
事件处理:两种方法
1)
<button onClick = { this.handleClick }></button>
并在constructor中加上:
this.handleClick = this.handleClick.bind(this)
2)
<button onClick = { () => this.handleClick()}></button>
向事件处理程序传递参数
1)以点击某行并通过id删除该行为例:
<button onClick={(e) => this.deleteRow(id,e)}>Delete Row</button>
<button onClick={this.deleteRow.bind(this, id)}>Delete Row</button>