React是一个JavaScript库,一个最简单的React例子如下:
1 ReactDOM.render( 2 <h1>Hello,world!</h1>, 3 document.getElementById('root'));
当React遇到的元素是用户自定义的组件,它会将JSX属性作为单个对象传递给该组件,这个对象称之为“props”。
例如,这段代码会在页面上渲染出”Hello,Sara”:
- 我们对
<Welcome name="Sara" />
元素调用了ReactDOM.render()
方法。 - React将
{name: 'Sara'}
作为props传入并调用Welcome
组件。 Welcome
组件将<h1>Hello, Sara</h1>
元素作为结果返回。- React DOM将DOM更新为
<h1>Hello, Sara</h1>.
1 function Welcome(props){ 2 return <h1>Hello,{props.name}</h1>; 3 } 4 5 const element=<Welcome name="Sara" />; 6 ReactDOM.render(element, 7 document.getElementById('root'));