Latest web development tutorials

React JSX

React 使用JSX 來替代常規的JavaScript。

JSX 是一個看起來很像XML 的JavaScript 語法擴展。

我們不需要一定使用JSX，但它有以下優點：

  • JSX 執行更快，因為它在編譯為JavaScript 代碼後進行了優化。
  • 它是類型安全的，在編譯過程中就能發現錯誤。
  • 使用JSX 編寫模板更加簡單快速。

使用JSX

JSX 看起來類似HTML ，我們可以看下實例: 

ReactDOM.render(
	<h1>Hello, world!</h1>,
	document.getElementById('example')
);

我們可以在以上代碼中嵌套多個HTML標籤，需要使用一個div元素包裹它，實例中的p元素添加了自定義屬性data-myattribute ，添加自定義屬性需要使用data-前綴。 

ReactDOM.render(
	<div>
	<h1>本教程</h1>
	<h2>欢迎学习 React</h2>
    <p data-myattribute = "somevalue">这是一个很不错的 JavaScript 库!</p>
    </div>
	,
	document.getElementById('example')
);

嘗試一下»

獨立文件

你的React JSX代碼可以放在一個獨立文件上，例如我們創建一個helloworld_react.js文件，代碼如下： 

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('example')
);

然後在HTML 文件中引入該JS 文件： 

<body>
  <div id="example"></div>
<script type="text/babel" src="helloworld_react.js"></script>
</body>

嘗試一下»

JavaScript 表達式

我們可以在JSX 中使用JavaScript 表達式。 表達式寫在花括號{}中。 實例如下： 

ReactDOM.render(
	<div>
	  <h1>{1+1}</h1>
	</div>
	,
	document.getElementById('example')
);

嘗試一下»

在JSX中不能使用if else語句，單可以使用conditional (三元運算)表達式來替代。 以下實例中如果變量i等於1瀏覽器將輸出true ,如果修改i的值，則會輸出false . 

ReactDOM.render(
	<div>
	  <h1>{i == 1 ? 'True!' : 'False'}</h1>
	</div>
	,
	document.getElementById('example')
);

嘗試一下»

樣式

React 推薦使用內聯樣式。 我們可以使用camelCase語法來設置內聯樣式. React會在指定元素數字後自動添加px 。 以下實例演示了為h1元素添加myStyle內聯樣式： 

var myStyle = {
	fontSize: 100,
	color: '#FF0000'
};
ReactDOM.render(
	<h1 style = {myStyle}>本教程</h1>,
	document.getElementById('example')
);

嘗試一下»

註釋

註釋需要寫在花括號中，實例如下： 

ReactDOM.render(
	<div>
    <h1>本教程</h1>
    {/*注释...*/}
 	</div>,
	document.getElementById('example')
);

嘗試一下»

數組

JSX 允許在模板中插入數組，數組會自動展開所有成員： 

var arr = [
  <h1>本教程</h1>,
  <h2>学的不仅是技术，更是梦想！</h2>,
];
ReactDOM.render(
  <div>{arr}</div>,
  document.getElementById('example')
);

嘗試一下»

HTML 標籤vs. React 組件

React 可以渲染HTML 標籤(strings) 或React 組件(classes)。

要渲染HTML 標籤，只需在JSX 裡使用小寫字母的標籤名。 

var myDivElement = <div className="foo" />;
ReactDOM.render(myDivElement, document.getElementById('example'));

要渲染React 組件，只需創建一個大寫字母開頭的本地變量。 

var MyComponent = React.createClass({/*...*/});
var myElement = <MyComponent someProperty={true} />;
ReactDOM.render(myElement, document.getElementById('example'));

React 的JSX 使用大、小寫的約定來區分本地組件的類和HTML 標籤。

注意:

由於JSX就是JavaScript，一些標識符像class和for不建議作為XML屬性名。 作為替代，React DOM使用className和htmlFor來做對應的屬性。