React 精髓学习笔记

前段时间很幸运在微博上获得了这本高逼格的“天书”，以前也看过几眼react的视频教程，自认为才疏学浅，无法完美装逼，如今偶然得此书，便决定平心静气好好学一下。

第一章各种工具各种装

注：我用的是Mac所以一切以Mac OS系统为准

NO.1 ➜　安装node和npm以及git

由于之前玩过node电脑里面有node和npm以及git，Mac里自带node环境不过React相关教程都建议把node版本升级到4.0以上。这一部分可以参照网上的安装教程有很多。

NO.2 ➜从Twitter Streaming API中获取数据

我们的React应用将从twitter中获取数据，twitter也为我们提供了streaming API，我们可以从公开的推文信息流中获得数据。不过要是用streaming API还要完成以下两步：
第1步：创建Twitter账号。https://twitter.com

第2步：创建twitter应用 https://apps.twitter.com，填写表单，点击create your twitter application创建应用。

然后在 application settings区域找到两个必要数据Consumer key和Consumer Secret记录下这两个数据的值在之后的配置中要用到。

完成上面这一步之后在同一个页面找到Your Access Token 区域点击Create My Access Token，然后回创建 Access Token和Access Token Secret同样将这两个信息保存之后会用到。

NO.3 ➜Snapkite引擎过滤数据

通过streaming API我们会获取大量的数据，为了获取对我们有用的数据我们必须过滤掉大部分没用的信息，由于twitter提供的过滤方法比较少，所以我们通过snapkite引擎来过滤数据。

安装spnakite引擎，从Github上直接克隆到本地：

1 2	cd ~ git clone https://github.com/snapkite/spnakites-engines.git

然后要安装node－gyp模块，在安装这个模块之前要先安装python环境，建议版本为2.7，3.x不支持，于此同时还要有Xcode环境，且安装命令行，其命令为：

1	xcode-select --install

安装之后输入以下命令查看是否安装成功。

gcc -v

然后通过命令行安装node－gyp

1	sudo npm install -g node-gyp

其中需要注意的是一定要加sudo否则会报错。安装成功会显示一个目录结构。

然后进入到/snapkite-engine中安装其他依赖的包，命令为：

1	npm install

完成以后通过命令完成配置文件的复制

1	cp example.config.json config.json

复制完成后打开config.json文件，编辑配置项，其中trackKeywords为需要抓取的关键字，设置你想抓取的关键字即可。之后在twitter处将之前保存的4个key值填到对应位置上。

接下来安装 snapkite filters,它是一个根据定义的规则来过滤信息的node.js的模块，他有许多种过滤器，这里我们安装四种。进入到filter目录下进行安装。

git clone https://github.com/snapkite/snapkite-filter-is-possibly-sensitive.git
git clone https://github.com/snapkite/snapkite-filter-has-mobile-photo.git
git clone https://github.com/snapkite/snapkite-filter-is-retweet.git
git clone https://github.com/snapkite/snapkite-filter-has-text.git

当然也可以直接去Github上下载然后复制到filters下。

安装完过滤器之后打开每一个文件夹将其下面的example.config.json（不是拷贝）一份并且重命名为config.json。

然后返回到sanpkite目录下打开config.json将里面的filters对象配置为：

"filters": [
    "snapkite-filter-is-possibly-sensitive",
    "snapkite-filter-has-mobile-photos",
    "snapkite-filter-is-retweet",
    "snapkite-filter-has-text"
    ]

之后在snapkite目录下运行以下命令：

npm start

一般情况下都会报错，原因是在package.json里有一个scripts对象，里面的star属性要设置为“npm start”才可以。

NO.4 ➜创建目录结构

我们要在用户根目录下创建项目目录/snapterest，然后在下面创建source（存放javascript源文件）和build（存放编译后的javascript和html文件）子目录，并在source下创建components子目录。之后在source文件夹下创建app.js作为应用的切入口。

NO.5 ➜创建package.json

创建package.json是为了代码复用。它是npm的元数据文件，通过它里面的依赖数据我们可以随时使用npm install命令安装他们。创建package.json的方法是在项目目录下利用命令行：

npm init

这样我们的项目目录里就会有一个package.json

NO.6 ➜复用node.js模块

Browserify这个工具可以打包所有依赖文件，打包后的文件在客户端应用达到复用的目的。安装方法：

1	npm install --save-dev browserify

其中 –save-dev命令是把将browserify添加到package.json中作为开发依赖。

NO.7 ➜用gulp.js来构建应用

gulp是前端自动化构建工具，安装方法为：

1	npm install --save-dev gulp

安装完之后要在全局范围内再次安装gulp

1	sudo npm install -g gulp

同样要加sudo否则会报错。

安装完之后输入命令gulp如果输出No gulpfile found则安装成功。
在项目目录下创建gulpfile.js文件并在里面创建一个任务通过browseify打包资源和依赖。代码如下：

var gulp=require("gulp");
var browserify=require("browserify");
var babelify=require("babelify");
var source=require("vinyl-source-stream");
gulp.task('default',function(){
	return browserify('./source/app.js')
	.transform(babelify)
	.bundle()
	.pipe(source('snapterest.js'))
	.pipe(gulp.dest('./bulid/'));
	
});

由于我们缺少babelify模块和vinyl-source-stream模块所以以上代码会报错，我们需要安装babelify:

1	npm install --save-dev babelify

之所以要安装vinyl-source-stream模块是为了同时使用gulp和browserify

1	npm install --save-dev vinyl-source-stream

然后执行gulp命令，然后你会发现在build目录下会自动生成snapterest.js

NO.8 ➜创建一个页面

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
<div id="reacr-appliaction">
	I am about to learn the essentials of React.js
</div>
<script type="text/javascript" src="./snapterest.js"></script>
</body>
</html>

在浏览器中打开便可以看到：I am about to learn the essentials of React.js了。准备工作基本完成。

第一章 各种工具各种装

NO.1 ➜ 安装node和npm以及git