2018-6-12日记

1、import { render } from 'react-dom';

这个是es6对象解构的语法而已。
把require(xxx)当成一个对象，

{ render } 就是把对象中的render属性赋值给render变量，这样子下面在用的时候就不用ReactDOM.render而是直接render就行了，省了几个字母。

2、react——获取数据的4种方法ajax()、$.ajax()、fetch()、axios

第一种：ajax()

import React from 'react';
import ReactDom from 'react-dom';
import ajax from './tool.js';

class Nav extends React.Component{
    constructor(){
        super();
        this.state = {
            arr: {}
        };
        this.get = this.get.bind(this);
    }
    get(){
        ajax('./data/data.json',function(res){
            // var json = JSON.parse(res);
            var json = (new Function('return' + res))();
            console.log(json);
        })
    }
    render(){
        return <div>
            <input type="button" value="按钮" onClick={this.get}/>
        </div>
    }
}


ReactDom.render(
    <Nav></Nav>,
    document.querySelector('#app')
);

第二种：$.ajax()

import React from 'react';
import ReactDom from 'react-dom';
import $ from 'jquery';

class Nav extends React.Component{
    constructor(){
        super();
        this.state = {
            arr: {}
        };
        this.get = this.get.bind(this);
    }
    get(){
        $.ajax({
            type:'get',
            url:'data/data.json',
            success:function(res){
                console.log(res);
            }
        })
    }
    render(){
        return <div>
            <input type="button" value="按钮" onClick={this.get}/>
        </div>
    }
}


ReactDom.render(
    <Nav></Nav>,
    document.querySelector('#app')
);

第三种：fetch()

import React from 'react';
import ReactDom from 'react-dom';
import $ from 'jquery';

class Nav extends React.Component{
    constructor(){
        super();
        this.state = {
            arr: {}
        };
        this.get = this.get.bind(this);
    }
    get(){
        fetch('data/word.txt').then((res)=>{
            if(res.ok){
                res.text().then((data)=>{
                    console.log(data);
                })
            }
        }).catch((res)=>{
            console.log(res.status);
        });
    }
    render(){
        return <div>
            <input type="button" value="按钮" onClick={this.get}/>
        </div>
    }
}


ReactDom.render(
    <Nav></Nav>,
    document.querySelector('#app')
);

第四种：axios

import React from 'react';
import ReactDom from 'react-dom';
import axios from 'axios';

class Nav extends React.Component{
    constructor(){
        super();
        this.state = {
            arr: {}
        };
        this.get = this.get.bind(this);
    }
    get(){
        axios.get('./data/data.json').then((res)=>{
            console.log(res.data);
            console.log(res.data[3]);
        }).catch((err)=>{
            console.log(err.status);
        })
    }
    render(){
        return <div>
            <input type="button" value="按钮" onClick={this.get}/>
        </div>
    }
}


ReactDom.render(
    <Nav></Nav>,
    document.querySelector('#app')
);

3、react-router使用总结

react-router使用总结

4、bower 和 npm 的区别详细介绍

摘要： 本文讲的是bower 和 npm 的区别详细介绍， 简单的说，npm是进行后端开发中，使用的模块安装工具，而bower，是前端的模块安装工具。 比如，在安装express，socket.io时，当然使用的是npm，那么比如bootstrap，jquery等前端框架，需要使用bower

 

简单的说，npm是进行后端开发中，使用的模块安装工具，而bower，是前端的模块安装工具。
比如，在安装express，socket.io时，当然使用的是npm，那么比如bootstrap，jquery等前端框架，需要使用bower

前端技术和工程实践真的是突飞猛进啊，想当年，我这个半业余前端吭哧吭哧做页面的时候，哪有这么多东西可以用啊，现在先进到我都完全看不懂了。本文主要讲一下同是包管理器的bower和npm的差别。
主要也是在stackoverflow看来的，翻译加一部分自己的理解。

npm 是伴随 Node.js 出现的一个包管理器，最开始只能支持 Node.js 的模块管理，但是后来， npm 官网经过一次改版，打出的口号是，javascript 的包管理器，所以，其已经不在局限于是
Node.js 的模块管理了，已经通用到了所有 js 的包管理工具了，可以说，前后通吃了。

bower 的话，从一开始，就是专门为前端表现设计的包管理器，一切全部为前端考虑的。npm 和 bower 的最大区别，就是 npm 支持嵌套地依赖管理，而 bower只能支持扁平的依赖（嵌套的依赖，由
程序员自己解决）。

嵌套依赖，指的就是，你依赖的软件包，还有它自己的依赖，好像摘葡萄，一摘一大串。在服务器环境的时候，这并没什么关系，因为存储空间够大，一切代码都是本地运行，只要解决完依赖就行了，
但是到了用户产品的浏览器里，就很成问题了，你不能让用户去下载好几M的js代码，那就太糟糕了。在这个情况下，就需要程序员自己手动解决用到的类库的嵌套依赖问题。比如确保各种各样的插件
都依赖同一个版本的jQuery。

为什么有很多项目 bower 和 npm 都用呢，那是因为要用 bower 管理前端的包，而用 npm 去管理一些后端的包和构建工具，例如，yeoman，grunt，gulp，jshint 等等等等。

所有的包管理器，都有自己的弊端，要视需要选用对自己的项目最合适的。

重点来说说NPM和Twitter推出的名为 Bower 的包管理器之间到底有什么样的关系和区别呢？（Bower的官网写到，Bower 是 "A package manager for the web" ，难道说NPM就不是了嘛）。

其实，在实际项目中，NPM和Bower都会被运用进去。并且Bower的安装和升级全都依赖于NPM，使用如下命令就可以全局安装Bower

npm install -g bower
之后你就可以使用

bower install [#]
类似于NPM的方式，对于当前项目进行前端依赖的相关管理。使用起来和NPM一样方便快捷。

其中，与NPM最大的区别在于，NPM主要运用于Node.js项目的内部依赖包管理，安装的模块位于项目根目录下的node_modules文件夹内。而Bower大部分情况下用于前端开发，对于CSS/JS/模板等内容进行依赖管理，依赖的下载目录结构可以自定义。

（原文网址：https://yq.aliyun.com/ziliao/40449）

5、npm基本配置 

npm config list //查看基本配置 

npm config list -l //查看所有配置

npm本地安装与全局安装有什么区别？

npm install grunt // 本地安装，则是将模块下载到当前命令行所在目录。 
npm install -g grunt//全局安装，模块将被下载安装到【全局目录】中；

npm如何获取全局安装的默认目录？

npm config get prefix

npm如何设置全局安装的默认目录？

npm config set prefix “directory”

6、bower init 初始化 报错

错误信息：

$ bower init
bower ENOINT        Register requires an interactive shell

Additional error details:
Note that you can manually force an interactive shell with --config.interactive

解决方法：

我也遇到了这个问题，最终解决了，参考上面贴的链接，在 windows cmd 里面使用 bower init,而不是在 git bash 里面使用 bower init.