React 使用 JSX 來替代常規(guī)的 JavaScript。
JSX 是一個看起來很像 XML 的 JavaScript 語法擴展。
我們不需要一定使用 JSX，但它有以下優(yōu)點：
- JSX 執(zhí)行更快昂拂，因為它在編譯為 JavaScript 代碼后進行了優(yōu)化。
- 它是類型安全的俺猿，在編譯過程中就能發(fā)現(xiàn)錯誤。
- 使用 JSX 編寫模板更加簡單快速格仲。
使用 JSX
JSX 看起來類似 HTML 押袍，我們可以看下實例:
ReactDOM.render(
<div>
<h1>歡迎學習 React</h1>
<p data-myattribute = "somevalue">這是一個很不錯的 JavaScript 庫!</p>
</div>
,
document.getElementById('example')
);
運行結(jié)果
在 JSX中使用JavaScript 表達式
ReactDOM.render(
<div>
<h1>{1+1}</h1>
</div>
,
document.getElementById('example')
);
運行結(jié)果為：2。
我們可以在JSX中的大括號內(nèi)放置任何有效的JavaScript表達式凯肋。例如user.firstName或者formatName(user)都是有效的JavaScript表達式伯病。
在下面的示例中，我們將調(diào)用JavaScript函數(shù)的結(jié)果嵌入formatName(user)到<h1>元素中否过。
function formatName(user) {
return user.firstName + ' ' + user.lastName;
}
const user = {
firstName: 'Harper',
lastName: 'Perez',
};
const element = <h1>Hello, {formatName(user)}!</h1>;
ReactDOM.render(element, document.getElementById('root'));
在 JSX 中不能使用 if else 語句，但可以使用三元運算表達式或二元運算表達式來替代惭蟋。
三元運算：
class HelloComponent extends React.Component({
render(){
return <h1>Hello {this.props.name?this.props.name:'world'}</h1>;
}
});
ReactDOM.render(
<HelloComponent name="ReactJS"/>,
document.getElementById('reactContainer')
)
因為<HelloComponent name="ReactJS"/>有name屬性值苗桂，所以運行結(jié)果為：ReactJS
二元運算：
class HelloComponent extends React.Component({
render(){
return <h1>Hello {this.props.name || 'world'}</h1>;
}
});
ReactDOM.render(
<HelloComponent />,
document.getElementById('reactContainer')
)
因為<HelloComponent />沒有name屬性值，所以運行結(jié)果為：World
樣式
React 推薦使用內(nèi)聯(lián)樣式告组。我們可以使用 camelCase語法來設(shè)置內(nèi)聯(lián)樣式. React 會在指定元素數(shù)字后自動添加px 煤伟。
var myStyle = {
fontSize: 100,
color: '#FF0000'
};
ReactDOM.render(
<h1 style = {myStyle}>歡迎學習 React</h1>,
document.getElementById('example')
);
運行結(jié)果
注釋
注釋需要寫在花括號中，實例如下：
var myStyle = {
fontSize: 100,
color: '#FF0000'
};
ReactDOM.render(
<div>
<h1 style = {myStyle}>歡迎學習 React</h1>
{/*注釋...*/}
</div>,
document.getElementById('example')
);
數(shù)組
JSX 允許在模板中插入數(shù)組木缝，數(shù)組會自動展開所有成員
var arr = [
<h1>歡迎學習 React</h1>,
<h2>學的不僅是技術(shù)便锨，更是夢想！</h2>,
];
ReactDOM.render(
<div>{arr}</div>,
document.getElementById('example')
);
運行結(jié)果：
數(shù)組
