ReactJS自习第壹夜

请求json文件

使用fetch请求同站json文件，始终返回render之前的html
fetch是ajax请求，直接通过http请求json等数据，需要把文件放到public路径下（create-react-app生成的文件目录中）。{参考资料}

根据点击等事件进行跳转

调试用的react-router为3.x版本，使用browserHistory的Push方法即可实现。{参考资料-表单处理}

handleClick = (event) => {
        event.preventDefault();
        const path = `/welcome`;
        browserHistory.push(path);
    }

npm中--save和--save-dev参数

npm install module带上--save参数，则会在安装模块的同时更新目录下package.json文件，在dependencies中添加所安装模块和版本信息，那么在app安装时，就会根据这些信息进行安装

-S, --save: Package will appear in your dependencies.
-D, --save-dev: Package will appear in your devDependencies.
-O, --save-optional: Package will appear in your optionalDependencies.```


##### 在实践操作中遇到的多个新概念
1. Node 和 React
  Node是位于服务端的javascript运行环境，由C++编写，内置google chrome V8引擎，使得前端语言用来编写服务端程序成为了现实。Node的一个重要特性就是模块，通过安装功能丰富的多种模块，实现快速构建和扩展的目的。Node本身自带npm命令(Node Package Manager)，利用这条命令我们可以快捷的下载、安装和管理模块。

Concept-是什么：基于google浏览器V8引擎开发的服务器端使用的js解释器
Questions-要解决什么问题：服务端IO阻塞，有限的并发连接数
Advantages-优势在哪里：js语言，以事件驱动能达到较高并发连接数
Environment-理想的适用环境：高并发小流量数据交互
Usage-如何使用：
Node.js 究竟是什么？

  React仅仅是view层，而不是一个完整的框架。似乎一开始，它的jsx语法不那么友好，被多年教导的我们不应该使用视图(html)和逻辑(js)相分离的代码么，怎么又揉到一块去了？将js和html“揉”成一个组件，能让你很清楚的看到组件是如何被render出来的，清晰明了，利于团队协作。而React的Virtual-DOM以及props和states等概念还需要在以后的实践中多多摸索，留个坑。（吐个槽，官方的文档做的不咋地）
2. webpack
  React官方的create-react-app用来构建开发环境真是又快又简单，我这菜鸟拿到用的不亦乐乎，却不知其所以然，为什么入口是Index.js而不能是其他？稍微深入一些才知道，原来是webpack的默认配置。
webpack是模块打包工具(module bundler)，对webpack来说，静态资源都可以进行打包，js / css / png等等。webpack的强大在于兼容js多种写法，而且能很好的处理模块间依赖关系。
webpack有独立的配置文件，如果是本地安装，配置文件在当前工程目录下的webpack.config.js，其本身就是一个commonJS规范的模块，具体内容如下：
```javascript
var path = require('path');
module.exports = {
// 入口文件为entry.js
    entry: path.resolve(__dirname, './src/entry.js'),
    output: {
// 打包输出路径为assets
        path: path.resolve(__dirname, './assets'),
// 网站运行时访问的路径
        publicPath: "/public/",
// 输出文件名为bundle.js
        filename: 'bundle.js'
    },
    module: {
// 定义不同格式的文件用哪种加载器来处理
        loaders: [
            //.css 文件使用 style-loader 和 css-loader 来处理
            { test: /\.css$/, loader: 'style-loader!css-loader' },            
            //.js 文件使用 jsx-loader 来编译处理
            { test: /\.js$/, loader: 'jsx-loader?harmony' },            
            //.scss 文件使用 style-loader、css-loader 和 sass-loader 来编译处理
            { test: /\.scss$/, loader: 'style!css!sass?sourceMap'},            
            //图片文件使用 url-loader 来处理，小于8kb的直接转为base64
            { test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192'}
        ]
    },
   resolve: {
        //查找module的话从这里开始查找
        root: '/pomy/github/flux-example/src', //绝对路径        
        //自动扩展文件后缀名，require模块可以省略后缀名，注意，数组第一个元素为空字符串
        extensions: ['', '.js', '.json', '.scss'],        
        //模块别名定义，方便后续直接引用别名，无须多写长长的地址
        alias: {
            AppStore : 'js/stores/AppStores.js',//后续直接 require('AppStore') 即可
            ActionType : 'js/actions/ActionType.js',
            AppAction : 'js/actions/AppAction.js'
        }
    }
};

参考资料
webpack官网
解前端模块化工具-Webpack
一小时包教会 —— webpack 入门指南
简单示例(将webpack.config.js中定义的入口js和相关联的资源打包到./asset/bundler.js中，供index.html使用)

3. import 和 require
     在ES6中，module成为了标准，使用方法为export导出模块接口，import导入模块。而require是node的模块，node是commonJS规范的实现，通过module.export导出，require引入。
   由于现阶段浏览器对ES6的支持不完全，即使代码中使用的是import，实际上也是通过babel转换成了ES5，利用require进行导入。但未来的大趋势还是向标准靠拢，所以最好使用标准规范，即import和export。
   很多示例代码在导出的时候都使用了export default abc的形式，纯粹的复制粘贴并不能帮助我们成长，还是要弄明白其中缘由。export default abc其实是export abc as default，而import abc from './a.js'是import {default as abc}，这是语法糖而已。所以在import时没看到中括号，就应该立即想起这个原因。
     import还支持通配符*，可以一次性引入模块的所有接口，但还是建议按需加入，把能用到的写在中括号中，不要嫌麻烦。(参考资料)