Previously, we only encountered React elements that represent DOM tags:
以前配阵，我們只會遇到表示DOM標(biāo)簽的React元素烙肺。
const element =<div /> ;
However, elements can also represent user-defined components:
同樣淀散，元素也能夠表示用戶自定義組件：
const element = <Welcome name="Sara" />;
When React sees an element representing a user-defined component, it passes JSX attributes to this component as a single object. We call this object "props".
當(dāng)我們看見一個元素表示用戶自定義組件蚜锨，它把JSX屬性作為一個單獨(dú)對象傳遞給這個組件。我們稱這個對象為“props”亚再。
For example, this code renders "Hello, Sara" on the page:
舉個例子，這段代碼在頁面上渲染出“Hello, Sara”：
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
const element = <Welcome name="Sara" />;
ReactDOM.render(
element,
document.getElementById('root')
);
Try it on CodePen.
在CodePen中嘗試氛悬。
Let's recap what happens in this example:
讓我們回顧一下剛剛的事例都做了什么：
1.We call ReactDOM.render() with the <Welcome name="Sara" /> element.
1.我們調(diào)用ReactDOM.render()來渲染元素
2.React calls the Welcome component with {name: 'Sara'} as the props.
2.React 調(diào)用一個使用{name: 'Sara'}做為props的Welcome組件耘柱。
3.Our Welcome component returns a <h1>Hello, Sara</h1>element as the result.
3.我們的welcome組件返回<h1>Hello, Sara</h1>元素做為結(jié)果。
4.React DOM efficiently updates the DOM to match<h1>Hello, Sara</h1>.
4.React DOM 及時有效的更新DOM去匹配<h1>Hello, Sara</h1>棍现。
Caveat:
Always start component names with a capital letter.
For example, <div />represents a DOM tag, but<Welcome />represents a component and requires Welcome to be in scope.
警告：
通常組件名稱的開頭是個大寫字母调煎。例如，<div />表示一個DOM標(biāo)簽己肮，但是<Welcome />表示一個組件并且要求Welcome在作用域內(nèi)士袄。
