雖然之前在暑假的時(shí)候已經(jīng)接觸了react，但是很久沒有寫已經(jīng)有些陌生了透绩，要寫東西還是要從最開始熟悉篇恒。
一切從 hello world 開始
首先實(shí)現(xiàn)在頁(yè)面上顯示hello world
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello World</title>
<script src="https://unpkg.com/react@latest/dist/react.js"></script>
<script src="https://unpkg.com/react-dom@latest/dist/react-dom.js"></script>
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('root')
);
</script>
</body>
</html>
實(shí)現(xiàn)的效果
hello world
注意點(diǎn)：
這一段html代碼使用的庫(kù)有
1.react.js —— React 的核心庫(kù)
2.react-dom.js —— 提供與 DOM 相關(guān)的功能
3.Browser.js—— 將 JSX 語(yǔ)法轉(zhuǎn)為 JavaScript 語(yǔ)法-
最后一個(gè)
<script>標(biāo)簽的type屬性為text/babel
這是因?yàn)?React 獨(dú)有的 JSX 語(yǔ)法宛官，跟 JavaScript 不兼容
凡是使用JSX的地方葫松，都要加上type="text/babel"
將html文件與javascript文件分離,實(shí)現(xiàn)同樣的效果
html文件:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>react</title>
<script src="http://static.runoob.com/assets/react/react-0.14.7/build/react.min.js"></script>
<script src="http://static.runoob.com/assets/react/react-0.14.7/build/react-dom.min.js"></script>
<script src="http://static.runoob.com/assets/react/browser.min.js"></script>
</head>
<body>
<div id="context "></div>
<script type="text/babel" src="app.js"></script>
</body>
</html>
js文件:
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('context')
);
ReactDOM.render()
- ReactDOM.render 是 React 的最基本方法
用于將模板轉(zhuǎn)為 HTML 語(yǔ)言，并插入指定的 DOM 節(jié)點(diǎn)底洗。 - 上面代碼將一個(gè) h1標(biāo)題腋么，插入
example節(jié)點(diǎn),實(shí)現(xiàn)同樣的效果。
使用組件(component)的 hello world
比如這樣:
const App = React.createClass({
render:function () {
return <h1>Hello, world!</h1>
}
});
ReactDOM.render(
<App/>,
document.getElementById('context')
);
- 上面的代碼就是React 將代碼封裝成組件（component）亥揖，然后像插入普通 HTML 標(biāo)簽一樣珊擂，在網(wǎng)頁(yè)中插入這個(gè)組件。
-
React.createClass方法就用于生成一個(gè)組件類 - 上面代碼中费变，變量
App就是一個(gè)組件類摧扇。
模板插入<App />時(shí)，會(huì)自動(dòng)生成App的一個(gè)實(shí)例 - 所有組件類都必須有自己的
render 方法挚歧，用于輸出組件扳剿。 - 組件類的第一個(gè)字母必須大寫，否則會(huì)報(bào)錯(cuò)昼激，比如
App不能寫成app。 - 組件類只能包含一個(gè)頂層標(biāo)簽锡搜，否則也會(huì)報(bào)錯(cuò)橙困。
