安裝
npm install -g create-react-app
npm install -g create-react-app --registry=https://registry.npm.taobao.org
create-react-app myApp
cd myApp
npm start
- 這樣你就簡單的完成了一個 react app 建立，其目錄結構如下（ 圖中不包括 node_modules 目錄，下同 ）：
Hello World
- 刪除一些不必要的東西，然後修改目錄結構如下：
- 其中 components 是個目錄。
修改 index.js 如下：
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(
<h1> hello world! </h1>,
document.getElementById('root')
);
-
然後命令行運行： npm start
-
就可以看到熟悉的 ‘hello world’ 了
一、HTML 模板
- 使用 React 的網頁源碼：
<!DOCTYPE html>
<html>
<head>
<script src="../build/react.js"></script>
<script src="../build/react-dom.js"></script>
<script src="../build/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
// ** Our code goes here! **
</script>
</body>
</html>
上面代碼有兩個地方需要注意。首先，最後一個 <script> 標籤的 type 屬性爲 text/babel 。這是因爲 React 獨有的 JSX 語法，跟 JavaScript 不兼容。凡是使用 JSX 的地方，都要加上 type="text/babel" 。
二，組件們
在 React 中，你可以創建一個有特殊功能的組件，這在 HTML 元素裏你是打着燈籠也找不到的，比如這個教程裏的下拉導航。每個組件都有自己的地盤(scope)，所以我們定義一個組件後可以反覆的用反覆的用，根本就不需要和別的組件交互！
三，JSX
如果你經常注意React你也許會發現有個東西叫JSX。JSX允許我們在Javascript中寫HTML，而不是用HTML包含Javascript。它能幫助我們快速開發，因爲我們不用擔心字符串和換行等。你可以在瀏覽器中運行JSX，但是不推薦，因爲這樣會減慢你的頁面速度。gulp和grunt爲你的預處理任務提供了一個JSX解釋器，所以如果你想使用JSX，我建議開啓這個功能
- 使用 JSX
var ExampleComponent = React.createClass({
render: function () {
return (
<div className="navigation">
Hello World!
</div>
);
}
});
- 如果你要在你的瀏覽器中運行這段代碼，只會得到語法錯誤的提示，因爲在Javascript中<和>字符要用引號包含起來。當你在代碼上運行JSX解釋器，它將被轉換成這樣
var ExampleComponent = React.createClass({
render: function () {
return (
React.createElement('div', {className: 'navigation'}, 'Hello World!')
);
}
});