這相當于我的一個學習日記,,這是第一篇學習日記,以后會不定期更新。
我要學習的三個內容,react、python3、react native。
我一般在菜鳥教程上學習。所以這次也不例外。
PS:為避免。。。所以不寫網址了,自己找去吧。
省略不必要的巴拉巴拉,我也沒有好文采,只需要記住,react是一個很牛B的庫!挺好玩!就行了(如果你敲一遍hello wrold,你就知道好玩兒在哪里了)。
摘抄一個菜鳥教程的一段文字:
React 特點:
1.聲明式設計 ?React采用聲明范式,可以輕松描述應用。
2.高效 ?React通過對DOM的模擬,最大限度地減少與DOM的交互。
3.靈活 ?React可以與已知的庫或框架很好地配合。
4.JSX ? JSX 是 JavaScript 語法的擴展。React 開發不一定使用 JSX ,但我們建議使用它。
5.組件 ? 通過 React 構建組件,使得代碼更加容易得到復用,能夠很好的應用在大項目的開發中。
6.單向響應的數據流 ? React 實現了單向響應的數據流,從而減少了重復代碼,這也是它為什么比傳統數據綁定更簡單。
PS:這個特點,我不是能夠完全理解,但是不妨礙我學習啊,那就一邊學習,一邊理解。
首先,還是按照傳統。來個HELLO WROLD玩玩吧
初始化:
正常使用的話只需要引入三個庫。
react.min.js - React 的核心庫
react-dom.min.js - 提供與 DOM 相關的功能
babel.min.js - Babel 可以將 ES6 代碼轉為 ES5 代碼,這樣我們就能在目前不支持 ES6 瀏覽器上執行 React 代碼。Babel 內嵌了對 JSX 的支持。通過將 Babel 和 babel-sublime 包(package)一同使用可以讓源碼的語法渲染上升到一個全新的水平。
當然可以下載到本地,也可以用網上的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不一樣,因為是用jsx的原因吧
ReactDOM.render(
<h1>Hello, React!</h1>,
document.getElementById('demo')
);
</script>
</body>
</html>
PS:那個meta為viewport的標簽,是我在HBuilder里方便看效果加的。
//ReactDOM.render(
//代碼塊后面跟逗號(,)
//指定輸出到網頁的位置
//);
這個應該是固定格式吧。
效果圖:
捕獲.PNG