React学习

学习资源：link

一个例子

var HelloMessage = React.createClass({
  render: function() {
    return <h1>Hello {this.props.name}</h1>;
  }
});

ReactDOM.render(
  <HelloMessage name="John" />,
  document.getElementById('example')
);  

这段代码是使用 React 库来创建一个简单的组件并将其渲染到页面上。

首先，我们使用 React.createClass 方法来定义一个名为 HelloMessage 的组件。这个组件有一个 render 方法，它用于返回该组件的 JSX（类似于 HTML）表示。

在 render 方法中，我们使用了 JSX 语法来定义一个 h1 标签，其中包含一个文本节点和一个占位符 {this.props.name}。这个占位符是用来显示从父组件传递过来的 name 属性的值。

接下来，我们使用 ReactDOM.render 方法将 HelloMessage 组件渲染到页面上。我们传入一个 JSX 表达式 <HelloMessage name="John" /> 作为第一个参数，这表示将创建一个 HelloMessage 组件实例，并将 name 属性设置为 “John”。然后，我们使用 document.getElementById('example') 来获取一个 DOM 元素，这个元素将作为容器来承载我们的组件。

最终，React 将根据 HelloMessage 组件的定义，生成相应的 HTML，并将其插入到指定的 DOM 元素中，从而在页面上显示出来。