学习资源: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 元素中,从而在页面上显示出来。