first do it, then do it right, then do it better.

在这里使用Robomongo 作为MongoDB 的可视化工具

安装

1. 到Robomongo 官网 进行下载
2. 执行下载的.exe 文件，进行安装

什么是MongoDB

MongodB is a document database with the scalability and flexibility that you want with the querying and indexing that you need

在线GitBook 地址：https://jobbym.gitbooks.io/react-docs-zh-cn/

英文原版：https://facebook.github.io/react/docs/installation.html

React 中文文档主要是JobbyM 根据React 官网进行翻译，其官网版本为v15.5.4。

如果你想参与这本书的共同创作，修改或添加内容，可以先Fork 这本书的仓库，然后将修改的内容提交Pull requests；或者创建Issues。

更多详细信息请参考React 中文文档

此文章是翻译How to develop apps bootstrapped with Create React App 官方文档

系列文章

1. 如何开发由Create-React-App 引导的应用
2. 如何开发由Create-React-App 引导的应用（一）
3. 如何开发由Create-React-App 引导的应用（二）
4. 如何开发由Create-React-App 引导的应用（三）

Advanced Configuration

你可以通过在shell中设置环境变量或.env来调整各种开发和生产设置。

Variable	Development	Production	Usage
BROWSER			默认情况下，Create React App 将打开默认系统浏览器，在Mac OS上支持Chrome。 指定浏览器来覆盖此行为，或将其设置为none以完全禁用它。
HOST			默认情况下，开发Web服务器绑定到localhost。 你可以使用此变量来指定不同的主机。
PORT			默认情况下，开发Web服务器将尝试在端口3000上侦听或提示你尝试下一个可用端口。 你可以使用此变量来指定不同的端口。
HTTPS			当设置为 true 时, Create React App 将以https 模式运行开发Web服务器。
PUBLIC_URL			Create React App 假定你的应用程序托管在Web服务器的根目录或在package.json（homepage）中指定的子路径。 通常，Create React App 忽略hostname。 你可以使用此变量强制将资源逐字引用到你提供的URL（包含hostname）。 当使用CDN托管你的应用程序时，这可能特别有用。
CI			当设置为true 时, Create React App 将警告视为构建中的失败。 它也使test runner 处于非观察者模式. 大多数CI 默认设置此标志。

此文章是翻译How to develop apps bootstrapped with Create React App 官方文档

系列文章

1. 如何开发由Create-React-App 引导的应用
2. 如何开发由Create-React-App 引导的应用（一）
3. 如何开发由Create-React-App 引导的应用（二）
4. 如何开发由Create-React-App 引导的应用（四）

Integrating with an API Backend

这些教程将帮助您将应用程序与在另一个端口上运行的API后端集成，使用fetch()来访问它。

Node

看看这个教程。 您可以在这里找到配套的GitHub存储库。

Ruby on Rails

看看这个教程。 您可以在这里找到配套的GitHub存储库。

此文章是翻译How to develop apps bootstrapped with Create React App 官方文档

系列文章

1. 如何开发由Create-React-App 引导的应用
2. 如何开发由Create-React-App 引导的应用（一）
3. 如何开发由Create-React-App 引导的应用（三）
4. 如何开发由Create-React-App 引导的应用（四）

Importing a Component

此项目设置支持ES5 模块，多亏了Babel。
虽然你仍然可以使用require() 和module.exports，我们建议你改用import and export。

例如：

Button.js

1
2
3
4
5
6
7
8
9

import React, { Component } from 'react';

class Button extends Component {
  render(){
    //...
  }
}

export default Button; // Don't forget to use export default!

DangerButton.js

1
2
3
4
5
6
7
8
9
10

import React, { Component } from 'react';
import Button from './Button'; // Import a component from another file

class DangerButton extends Component {
  render(){
    return <Button color="red" />;
  }
}

export default class DangerButton;

此文章是翻译How to develop apps bootstrapped with Create React App 官方文档

系列文章

1. 如何开发由Create-React-App 引导的应用
2. 如何开发由Create-React-App 引导的应用（二）
3. 如何开发由Create-React-App 引导的应用（三）
4. 如何开发由Create-React-App 引导的应用（四）

Updating to New Release

Creat React App 分成两个包：

• create-react-app 是用于创建新项目的全局命令行工具。
• react-scripts 是在新建项目中的开发依赖。

几乎不需要更新create-react-app 自身：它将所有的设置委托给了react-scripts 。

当你运行create-react-app 时，它总是使用react-scripts 的最新版本来创建项目，以便你自动获得所有的新特性和改进。

要将现有项目更新为react-scripts 的最新版本，打开更新日志，找到你当前正在用的版本（可以在package.json中找到），按照最新版本的迁移说明来操作。

在大多数情况下，更改packages.json 中react-scripts 的版本号，然后运行npm install 应该就可以了，但是对于潜在的重大变化，请参考更新日志。

我们致力于保持最小的重大变化，从而可以无痛的升级react-scripts。

原文链接12步20分钟，完成用户管理的CURD 应用（react+dva+antd），本文对原文进行了部分修改。

开始为了学习mobile-ant，但是发现推荐使用dva，因此找到了这篇文章。

本文是按照12步20分钟，完成用户管理的CURD 应用（react+dva+antd） 一步一步创建一个CURD 应用，包含查询、编辑、删除、创建，以及分页处理，数据mock，自动处理loading 状态等，基于react、dva 和antd。

介绍

在阅读《JS函数式编程指南》时，发现其中使用到了Lodash，需要对Lodash 进行初步的入门了解。在其官网上介绍为：

Loadsh
A modern JavaScript uitility library delivering modularity, performance & extras.

也就是说Lodash 是一个现代的JavaScript 实用工具库提供了模块化、高性能和其他功能。按照官网的介绍进行安装。

基础

使用Node.js 搭建HTTP 服务器非常简单，可以简单的分为三步：

第一步、编写app.js 文件

1
2
3
4
5
6
7
8

var http = require('http')

http.createServer(function(req, res){
  res.writeHead(200, {'Content-Type': 'text/plain'})
  res.end('Hello World\n')
}).listen(8080, '127.0.0.1')

console.log('Server running at 127.0.0.1:8080')

上面代码第一行var http = require('http')，表示加载http 模块。然后调用http 模块的createServer 方法，创建一个服务器实例。

createServer 方法接受一个函数作为参数，该函数的req 表示客户端的HTTP 请求；res 表示服务器端的HTTP 响应。res.writeHead 方法用来写入HTTP 响应的头信息；res.end 方法用来写入HTTP 响应的具体内容，已经响应完成后关闭本次对话。最后的listen(8080) 表示启动服务器实例，监听本机的8080 端口。