這相當(dāng)于我的一個(gè)學(xué)習(xí)日記潦蝇,涧狮,這是第一篇學(xué)習(xí)日記梯轻,以后會不定期更新仙蛉。
我要學(xué)習(xí)的三個(gè)內(nèi)容,react擒贸、python3、react native盖喷。
我一般在菜鳥教程上學(xué)習(xí)养渴。所以這次也不例外雷绢。
PS:為避免。理卑。翘紊。所以不寫網(wǎng)址了,自己找去吧藐唠。
省略不必要的巴拉巴拉帆疟,我也沒有好文采,只需要記住宇立,react是一個(gè)很牛B的庫踪宠!挺好玩!就行了(如果你敲一遍hello wrold,你就知道好玩兒在哪里了)妈嘹。
摘抄一個(gè)菜鳥教程的一段文字:
React 特點(diǎn):
1.聲明式設(shè)計(jì) ?React采用聲明范式柳琢,可以輕松描述應(yīng)用。
2.高效 ?React通過對DOM的模擬润脸,最大限度地減少與DOM的交互柬脸。
3.靈活 ?React可以與已知的庫或框架很好地配合。
4.JSX ? JSX 是 JavaScript 語法的擴(kuò)展毙驯。React 開發(fā)不一定使用 JSX 倒堕,但我們建議使用它。
5.組件 ? 通過 React 構(gòu)建組件爆价,使得代碼更加容易得到復(fù)用垦巴,能夠很好的應(yīng)用在大項(xiàng)目的開發(fā)中。
6.單向響應(yīng)的數(shù)據(jù)流 ? React 實(shí)現(xiàn)了單向響應(yīng)的數(shù)據(jù)流允坚,從而減少了重復(fù)代碼魂那,這也是它為什么比傳統(tǒng)數(shù)據(jù)綁定更簡單。
PS:這個(gè)特點(diǎn)稠项,我不是能夠完全理解涯雅,但是不妨礙我學(xué)習(xí)啊,那就一邊學(xué)習(xí)展运,一邊理解活逆。
首先,還是按照傳統(tǒng)拗胜。來個(gè)HELLO WROLD玩玩吧
初始化:
正常使用的話只需要引入三個(gè)庫蔗候。
react.min.js - React 的核心庫
react-dom.min.js - 提供與 DOM 相關(guān)的功能
babel.min.js - Babel 可以將 ES6 代碼轉(zhuǎn)為 ES5 代碼,這樣我們就能在目前不支持 ES6 瀏覽器上執(zhí)行 React 代碼埂软。Babel 內(nèi)嵌了對 JSX 的支持锈遥。通過將 Babel 和 babel-sublime 包(package)一同使用可以讓源碼的語法渲染上升到一個(gè)全新的水平。
當(dāng)然可以下載到本地,也可以用網(wǎng)上的CDN所灸。
放代碼:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<script src="../js/react.js"></script>
<script src="../js/react-dom.js"></script>
<script src="../js/browser.min.js"></script>
</head>
<body>
<div id="demo"></div>
<script type="text/babel">
//type和我們平常的js的type不一樣丽惶,因?yàn)槭怯胘sx的原因吧
ReactDOM.render(
<h1>Hello, React!</h1>,
document.getElementById('demo')
);
</script>
</body>
</html>
PS:那個(gè)meta為viewport的標(biāo)簽,是我在HBuilder里方便看效果加的爬立。
//ReactDOM.render(
//代碼塊后面跟逗號(钾唬,)
//指定輸出到網(wǎng)頁的位置
//);
這個(gè)應(yīng)該是固定格式吧。
效果圖: