<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script>
<script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script>
<script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('example')
);
</script>
</body>
</html>剛剛在找怎麼裝，然後又看到一個Hello World!，忍不住又粘到這裏了（我的終極目標就是精通各種語言輸出Hello World!略略略）
大家可以通過官網下載最新版本（另外官網上也有一些有趣的小程序……大家可以去調戲，是可以直接改代碼然後看輸出的，反正我是調戲了小半個晚上……）
順便難過一下，這兩天英漢互譯做了好多，現在看到英文網站只想(╯‵□′)╯︵┻━┻，天哪我的六級怕不是要涼涼是真的不太明白官網的說法……
-----------------------------------------------------------------------------------
採取逐句翻譯的方法，如果有錯，望大家不吝珠玉，感激不盡
出於私心，希望回頭可以直接把翻譯好的私給小學弟小學妹看，就採取了這種方式-----------------------------------------------------------------------------------
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello World</title>
</head>
<body>
<div>
<h2>Try React</h2>
<h2>測試React</h2>
<p>Try React online or set up your local development environment.</p>
<p>在線測試React或在本地配置環境</p>
</div>
<div>
<h3>Online</h3>
<h3>在線</h3>
<p>If you’re just interested in playing around with React, you can use an online code playground. Try a Hello World template on CodePen or CodeSandbox.</p>
<p>如果您僅僅是對React有興趣，您可以選擇在線測試。在CodePen 或 CodeSandbox上測試一個Hello World（補充：無須安裝）</p>
</div>
<div>
<h3>Minimal HTML Template</h3>
<h3>最小的HTML模板</h3>
<p>If you prefer to use your own text editor, you can also download this HTML file, edit it, and open it from the local filesystem in your browser. It does a slow runtime code transformation, so don’t use it in production.</p>
<p>如果您更喜歡用您自己的文字編輯器，您也可以下載這個HTML文件，編輯它，並在瀏覽器中的本地文件系統中打開它。它執行運行時代碼轉換十分緩慢，所以不要在產品中使用它。</p>
</div>
<br />
<div>
<h2>Next Steps</h2>
<h2>下一步</h2>
<h3>Quick Start</h3>
<h3>快速開始</h3>
<ul>
<li>Head over to the Quick Start section for a step-by-step introduction to React concepts.</li>
<li>前往快速入門部分，我們將一步一步地介紹react的概念。</li>
<li>Try the Tutorial for a hands-on practical example.</li>
<li>嘗試本教程來學習一個實際的例子。</li>
</ul>
</div>
<div>
<h3>Complete Development Environment</h3>
<h3>完整的開發環境</h3>
<p>The lightweight solutions above are the best fit if you are new to React or just experimenting.</p>
<p>如果您是react的新手或只是測試,以上的輕量級解決方案是最適合您的。</p>
<p>When you are ready to build your first application with React, check out the install guides below. These setups are designed to get you up and running with a great developer experience and are ready for production. They include linting, testing, and optimizations built-in; however, they require more time and disk space to set up and install.</p>
<p>當您準備好構建您的第一個應用程序時，請查看下面的安裝指南。這些設置是爲了讓您在開發過程中獲得良好的開發經驗，並準備好進行生產。其中包括內置的linting、測試和優化;但是，它們需要更多的時間和磁盤空間來設置和安裝。</p>
<ul>
<li>Add React to a New App: Create a new app with a fully-featured starter kit.</li>
<li>添加對一個新的react應用:創建一個全新的應用程序和一個功能齊全的初學者工具包。</li>
<li>Add React to an Existing App: Add React to a build system or a larger app.</li>
<li>將react添加到已存在應用中:添加對構建系統添加react一邊構建系統或一個更大的應用</li>
</ul>
</div>
<br />
<div>
<h2>網址整理</h2>
<h3>CodePen</h3>
<a href="https://codepen.io/pen?&editors=0010">CodePen</a>
<h3>CodeSandbox</h3>
<a href="https://codesandbox.io/s/new">CodeSandbox</a>
<h3>download this HTML file</h3>
<a href="https://raw.githubusercontent.com/reactjs/reactjs.org/master/static/html/single-file-example.html">download this HTML file</a>
<h3>Quick Start</h3>
<a href="https://reactjs.org/docs/hello-world.html">Quick Start</a>
<h3>Tutorial</h3>
<a href="https://reactjs.org/tutorial/tutorial.html">Tutorial</a>
<h3>Add React to a New App</h3>
<a href="https://reactjs.org/docs/add-react-to-a-new-app.html">Add React to a New App</a>
<h3>Add React to an Existing App</h3>
<a href="https://reactjs.org/docs/add-react-to-an-existing-app.html">Add React to an Existing App</a>
</div>
</body>
</html>附錄上面提到的下載的文檔：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello World</title>
<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/[email protected]/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('root')
);
</script>
<!--
Note: this page is a great way to try React but it's not suitable for production.
It slowly compiles JSX with Babel in the browser and uses a large development build of React.
To set up a production-ready React build environment, follow these instructions:
* https://reactjs.org/docs/add-react-to-a-new-app.html
* https://reactjs.org/docs/add-react-to-an-existing-app.html
You can also use React without JSX, in which case you can remove Babel:
* https://reactjs.org/docs/react-without-jsx.html
* https://reactjs.org/docs/cdn-links.html
-->
</body>
</html>竟然有中文版的，五星好評……
JavaScript 是一種面向對象的動態語言，它包含類型、運算符、標準內置（ built-in）對象和方法。它的語法來源於 Java 和 C，所以這兩種語言的許多語法特性同樣適用於 JavaScript。需要注意的一個主要區別是 JavaScript 不支持類，類這一概念在 JavaScript 通過對象原型（object prototype）得到延續（有關 ES6 類的內容參考這裏
Classes）。 ——摘自上述文檔（說句閒話，之前聽到一個笑話：甲：Java和JavaScript有什麼關係？乙：雷鋒和雷峯塔有關係嗎？），這解答了我的一個疑惑，爲啥感覺語法都似曾相識。然後上週寫周計劃的時候還像模像樣寫看類……真的是丟人丟到家了。
接着引用：
對象
JavaScript 中的對象可以簡單理解成“名稱-值”對，不難聯想 JavaScript 中的對象與下面這些概念類似：
- Python 中的字典
- Perl 和 Ruby 中的散列（哈希）
- C/C++ 中的散列表
- Java 中的 HashMap
- PHP 中的關聯數組
這樣的數據結構設計合理，能應付各類複雜需求，所以被各類編程語言廣泛採用。正因爲 JavaScript 中的一切（除了核心類型，core object）都是對象，所以 JavaScript 程序必然與大量的散列表查找操作有着千絲萬縷的聯繫，而散列表擅長的正是高速查找。
“名稱”部分是一個 JavaScript 字符串，“值”部分可以是任何 JavaScript 的數據類型——包括對象。這使用戶可以根據具體需求，創建出相當複雜的數據結構。
有兩種簡單方法可以創建一個空對象：
var obj = new Object();和：
var obj = {};這兩種方法在語義上是相同的。第二種更方便的方法叫作“對象字面量（object literal）”法。這種也是 JSON 格式的核心語法，一般我們優先選擇第二種方法。
“對象字面量”也可以用來在對象實例中定義一個對象：
var obj = {
name: "Carrot",
"for": "Max",
details: {
color: "orange",
size: 12
}
}對象的屬性可以通過鏈式（chain）表示方法進行訪問：
obj.details.color; // orange
obj["details"]["size"]; // 12下面的例子創建了一個對象原型，Person，和這個原型的實例，You。
function Person(name, age) {
this.name = name;
this.age = age;
}
// 定義一個對象
var You = new Person("You", 24);
// 我們創建了一個新的 Person，名稱是 "You"
// ("You" 是第一個參數, 24 是第二個參數..)完成創建後，對象屬性可以通過如下兩種方式進行賦值和訪問：
obj.name = "Simon"
var name = obj.name;和：
obj["name"] = "Simon";
var name = obj["name"];這兩種方法在語義上也是相同的。第二種方法的優點在於屬性的名稱被看作一個字符串，這就意味着它可以在運行時被計算，缺點在於這樣的代碼有可能無法在後期被解釋器優化。它也可以被用來訪問某些以預留關鍵字作爲名稱的屬性的值：
obj.for = "Simon"; // 語法錯誤，因爲 for 是一個預留關鍵字
obj["for"] = "Simon"; // 工作正常注意：從 EcmaScript 5 開始，預留關鍵字可以作爲對象的屬性名（reserved words may be used as object property names "in the buff"）。 這意味着當定義對象字面量時不需要用雙引號了。參見 ES5 Spec.
關於對象和原型的詳情參見： Object.prototype.
--------------------今天先到這裏啦，室友生日，要趕回去慶生------------------------
那個，說個笑話，我在官網摸了一週，玩得很開心，不過還沒發現怎麼下載……
冒昧猜測是否加上幾句話就算好了？
我點了一下嘗試一下，然後彈出的頁面顯示如下圖：
猜測是否只要在<head></head>里加幾句
<script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script>
<script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script>
<script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>這個就算是好了？
當然估計肯定不是這樣，不然幹嘛非讓我上官網下載最新版本
這個博客中所說的最新版和穩定版就是上面畫出來的兩個，然後依照博客指令，我一路安裝完了（就是瘋狂next）……
安裝nodehttps://www.runoob.com/nodejs/nodejs-install-setup.html
不曉得爲啥，這個看起來就像是簡單加幾句話的事……
裝了一下午node，果然難裝
----------------寫作業去了，大物作業還沒打印，溜了-------------------