藍鷗React Native零基礎入門到項目實戰 Hello React
http://edu.csdn.net/course/detail/3129
Hello React
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- react.js是React的核心庫 -->
<script src="./build/react.js" charset="utf-8"></script>
<!-- react-dom.js的作用是提供與DOM相關的功能 -->
<script src="./build/react-dom.js" charset="utf-8"></script>
<!-- browser.min.js的作用是將JSX語法轉換成JavaScript語法 -->
<script src="./build/browser.min.js" charset="utf-8"></script>
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js" charset="utf-8"></script> -->
</head>
<body>
<!-- React渲染的模板內容會插入到這個DOM節點中，作爲一個容器 -->
<div id="container">
</div>
</body>
<!-- 在React開發中，使用JSX，跟JavaScript不兼容，在使用JSX的地方，要設置type：text/babel -->
<!-- babel是一個轉換編譯器，ES6轉成可以在瀏覽器中運行的代碼 -->
<script type="text/babel">
// 在此處編寫React代碼
</script>
</html>
Hello React.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- react.js是React的核心庫 -->
<script src="./build/react.js" charset="utf-8"></script>
<!-- react-dom.js的作用是提供與DOM相關的功能 -->
<script src="./build/react-dom.js" charset="utf-8"></script>
<!-- browser.min.js的作用是將JSX語法轉換成JavaScript語法 -->
<script src="./build/browser.min.js" charset="utf-8"></script>
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js" charset="utf-8"></script> -->
</head>
<body>
<!-- React渲染的模板內容會插入到這個DOM節點中，作爲一個容器 -->
<div id="container">
</div>
</body>
<!-- 在React開發中，使用JSX，跟JavaScript不兼容，在使用JSX的地方，要設置type：text/babel -->
<!-- babel是一個轉換編譯器，ES6轉成可以在瀏覽器中運行的代碼 -->
<script type="text/babel">
// 在此處編寫React代碼
// 需求：渲染一行標題，顯示“Hello React”
//
/*
ReactDOM.render()
React的最基本方法，用於將模板轉換成HTML語言，渲染DOM，並插入指定的DOM節點中
3個參數
第一個：模板的渲染內容(HTML形式)
第二個：這段模板需要插入的DOM節點(本程序中，是id爲container的div節點)
第三個：渲染後的回調，一般不用
*/
// ReactDOM.render(
// <h1>Hello React</h1>,
// document.getElementById("container")
// );
/*
JSX入門
JSX不是一門新的語言，是個語法(語法糖)。
*/
// 1、JSX必須藉助React環境運行
// 2、JSX標籤其實就是HTML標籤，只不過我們在JavaScript中書寫這些標籤的時候，不用使用""括起來，
// 可以向XML一樣書寫
ReactDOM.render(
<h1>
Hello React
</h1>,
document.getElementById("container")
);
// 3、轉換：JSX語法能夠讓我們更直觀的看到組件的DOM結構，不能直接在瀏覽器上運行，最終會轉化成JavaScript代碼在瀏覽器上運行
ReactDOM.render(
React.createElement("h1", null, "Hello React"),
document.getElementById("container")
);
// 4、在JSX中運行JavaScript代碼。
// 使用{}括起來 {表達式}
//
var text = "藍鷗";
ReactDOM.render(
<h1>{text}</h1>,
document.getElementById("container")
);
</script>
</html>