react1
<body>
<!-- React 真實 DOM 將會插入到這裏 -->
<div id="example"></div>html
<!-- 引入 React -->
<script src="src/libs/react.js"></script>
<!-- 引入 JSX 語法格式轉換器 -->
<script src="src/libs/JSXTransformer.js"></script>前端
<script src="src/libs/jquery.js"></script>
<!-- 注意：script 須要註明 type 爲 text/jsx 以指定這是一個 JSX 語法格式 -->react
<script type="text/jsx">
function dateToString(date){
return [
date.getFullYear(),
date.getMonth()+1,
date.getDate()
].join('-')
};
React.render(
<h2 className="text-c1" style={{color:'red',marginTop:'20px'}}>{dateToString(new Date())}</h2>,
document.getElementById("example")
);
</script>jquery
</body>前端工程化
總結瀏覽器
React 的核心思想是：封裝組件，各個組件維護本身的狀態和 UI，當狀態變動，自動從新渲染整個組件。基於這種方式的一個直觀感覺就是咱們再也不須要不厭其煩地來回查找某個 DOM 元素，而後操做 DOM 去更改 UI。服務器
JSX 並非一門全新的語言，僅僅是一個語法糖，容許開發者在JavasSript中編寫XML語言。工具
做爲React的核心部分，JSX使用XML標記的方式直接聲明頁面。在JavaScript代碼裏直接寫XML的語法，每個XML標籤都會被JSX轉換工具轉換成純JavaScript代碼。(學習React的第一個坑)學習
注意：使用JSX寫的代碼，須要編譯輸出成JS代碼才能使用。將 JSX 語法轉爲 JavaScript 語法，這一步很消耗時間。如今前端項目，都會使用前端工程化，不會直接在html頁面中直接寫js代碼，寫好的js代碼都會使用工具進行編譯壓縮等。這樣的話，咱們的JSX也會經過編譯直接轉化成js語法，讓瀏覽器直接使用。orm
好消息是你不用使用這個JSX也能夠直接建立組件，可是壞消息是，不用JSX你必須使用原聲JavaScript經過大段的API來建立。
如此使用JSX
JSX定義屬性&&樣式使用
在HTML中，能夠經過標籤上的屬性來改變當前元素的樣式，固然，這在JSX中也是能夠的，只不過JSX在使用行內樣式的時候是有缺陷的。使用{{}}而不是引號的方式。
直接在標籤上使用style屬性時，要寫成style={{}}是兩個大括號，外層大括號是告知JSX這裏是js語法，和真實DOM不一樣的是，屬性值不能是字符串而必須爲對象，須要注意的是屬性名一樣須要駝峯命名法。即margin-top要寫成marginTop，屬性之間以逗號間隔。
使用變量：
JSX將兩個花括號中的內容{...}渲染成動態值，花括號指明瞭一個JavaScript上下文環境————你在花括號中放置的任何內容都會被求值。
1.最後一個script標籤的type屬性爲text/jsx。這是由於React獨有的JSX語法，跟JavaScript不兼容。凡是使用JSX的地方，都要加上type=」text/jsx」。
2.React提供兩個庫：react.js和JSXTransformer.js，它們必須首先加載，其中JSXTransformer.js的做用是將JSX語法轉爲JavaScript語法。這一步很消耗時間，實際上線的時候，應該將它放到服務器完成。
React.render是React的最基本方法，用於將模板轉爲HTML語言，並插入指定的DOM節點。
- 1. react1
- 2. React組件-初識React1（慕課）
- 3. 最新 react 開發框架（webpack二、react1五、react-router四、antd-mobile）
- 4. 類和結構體
- 5. js隨手筆記-------理解JavaScript碰撞檢測算法核心簡單實現原理
- 6. React Hook 搞定 Race Condition
- 7. npm加載包報錯 ：syscall access
- 8. React多頁面應用1(webpack開發環境搭建,包括Babel、熱更新等)
- 9. webpack集成開發環境wci-build
- 10. 我打造了一個簡歷在線生成應用
- 更多相關文章...
-
每一个你不满意的现在，都有一个你没有努力的曾经。