初识React

Hello world

class HelloMessage extends React.Component {
  render() {
    return (
      <div>
        Hello {this.props.name}
      </div>
    );
  }
}

ReactDOM.render(
  <HelloMessage name="Taylor" />,
  document.querySelector('#root')
);

结果：

Hello Taylor

在线实例

如何显示到页面

我们都知道React构建的是单应用，所以，只有一个入口，默认为src/index.js.

在这个js中，我们引入React组件，由一个组件包裹，然后通过ReactDOM.render()方法渲然到页面上。

ReactDOM.render(element, container[, callback])有三个参数：

• element React入口组件。

• container 挂载点，一个真实的dom节点。

• callback 可选参数，渲然后的回调方法。

官方地址

地址：https://reactjs.org/