網頁技術三劍客： HTML 、CSS 和 Javascript !
三者中 HTML 最簡單，是一種結構化文檔，使用標記語言(Markup Language)表現的是文檔內容；
其次是CSS ,CSS 核心是 Box Module (盒子模型) 和 定位；CSS依賴HTML的元素，只能依附與HTML並進行適當的修飾渲染，只能裝飾內容但不能改變HTML元素本身。
最複雜的是Javascript，對HTML和CSS可以完全控制，增加修改任何元素和內容。
Javascript是程式設計語言(Programming Language)，編寫的是真正的程式。
使用 Javascript 很多時候會把HTML和Javascript 混合編碼，有些時候很難分清或者定義這些代碼是Javascript的一部分還是HTML的一部分。
現在React正式給這種把Javascript和HTML寫在一起的代碼定義為 JSX，即 JavaScript eXtension !
JSX是一種React Element的新方式，通過 JSX 建立的React Element 可以以 Element 的方式進行組合。
可以使用 JSX 建立可以複用的、粒度大小各異的Element，並對這些Element進行組合，形成以商務邏輯劃分的、粒度更大組件。
舉例
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>React with JSX Samples</title></head><body><div id="root"></div><script src="https://unpkg.com/react@16/umd/react.development.js"></script><script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script><script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script><script type="text/babel">function formatName(user) { return user.firstName + ' ' + user.lastName;}const user = { firstName: 'Harper', lastName: 'Perez'};const element = ( <h1> Hello, {formatName(user)}! </h1>);ReactDOM.render( element, document.getElementById('root'));</script></body></html>
這次的例子與前面的例子有一個不同，在於多了一行引用
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
因為所有 react 入門文章中的舉例，都可以直接複製儲存到本地，然後在本地開啟運行，查看運行效果。
而多了的這一行，作用正是為了能讓 JSX 在瀏覽器中正常運行。
不信，可以在正常啟動並執行頁面中，刪除這一行，原來可以正常顯示的文字變得什麼都沒有了。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
