react项目搭建与初始化

一、安装和使用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>