前端学习周记（3）——react.js
Hello React!
刚刚在找怎么装，然后又看到一个 Hello World!，忍不住又粘到这里了（我的终极目标就是精通各种语言输出Hello World!略略略）
-----------------------------------------------------------------------------------
Hello World
Try React
测试React
Try React online or set up your local development environment.
在线测试React或在本地配置环境
Online
在线
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.
如果您仅仅是对React有兴趣，您可以选择在线测试。在CodePen 或 CodeSandbox上测试一个Hello World（补充：无须安装）
Minimal HTML Template
最小的HTML模板
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.
如果您更喜欢用您自己的文字编辑器，您也可以下载这个HTML文件，编辑它，并在浏览器中的本地文件系统中打开它。它执行运行时代码转换十分缓慢，所以不要在产品中使用它。
Next Steps
下一步
Quick Start
快速开始
- Head over to the Quick Start section for a step-by-step introduction to React concepts.
- 前往快速入门部分，我们将一步一步地介绍react的概念。
- Try the Tutorial for a hands-on practical example.
- 尝试本教程来学习一个实际的例子。
Complete Development Environment
完整的开发环境
The lightweight solutions above are the best fit if you are new to React or just experimenting.
如果您是react的新手或只是测试,以上的轻量级解决方案是最适合您的。
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.
当您准备好构建您的第一个应用程序时，请查看下面的安装指南。这些设置是为了让您在开发过程中获得良好的开发经验，并准备好进行生产。其中包括内置的linting、测试和优化;但是，它们需要更多的时间和磁盘空间来设置和安装。
- Add React to a New App: Create a new app with a fully-featured starter kit.
- 添加对一个新的react应用:创建一个全新的应用程序和一个功能齐全的初学者工具包。
- Add React to an Existing App: Add React to a build system or a larger app.
- 将react添加到已存在应用中:添加对构建系统添加react一边构建系统或一个更大的应用
网址整理
CodePen
CodePen
CodeSandbox
CodeSandbox
download this HTML file
download this HTML file
Quick Start
Quick Start
Tutorial
Tutorial
Add React to a New App
Add React to a New App
Add React to an Existing App
Add React to an Existing App
附录上面提到的下载的文档：
Hello World
再附录官方文档 https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/A_re-introduction_to_JavaScript
Classes
）。
对象
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.
安装nodehttps://www.runoob.com/nodejs/nodejs-install-setup.html
