nodejs+react+redux环境安装

如何从Windows中删除Node.js：
1.从卸载程序卸载程序和功能。
2.重新启动（或者您可能会从任务管理器中杀死所有与节点相关的进程）。
3.寻找这些文件夹并删除它们（及其内容）（如果还有）。根据您安装的版本，UAC设置和CPU架构，这些可能或可能不存在：

C:\Program Files (x86)\Nodejs
C:\Program Files\Nodejs
C:\Users\{User}\AppData\Roaming\npm（或%appdata%\npm）
C:\Users\{User}\AppData\Roaming\npm-cache（或%appdata%\npm-cache）

4.检查您的%PATH%环境变量以确保没有引用Nodejs或npm存在。
5.如果仍然没有卸载，请where node在命令提示符下键入，您将看到它所在的位置 - 删除（也可能是父目录）。
6.重新启动，很好的措施。

 

一、安装nodejs
1、下载地址：
http://nodejs.cn/download/
https://nodejs.org/zh-cn/download/

可选择选择windows64位.msi格式安装包，
.msi和.zip格式区别：
1、.msi是Windows installer开发出来的程序安装文件，它可以让你安装，修改，卸载你所安装的程序。说白了.msi就是Windows installer的数据包，把所有和安装文件相关的内容封装在一个包里。
2、.zip是一个压缩包，解压之后即可，不需要安装

下载完成后，双击安装包，开始安装，一直点next即可，安装路径默认在C:\Program Files下，也可以自定义修改

其中：
Node.js runtime 表示运行环境
npm package manager表示npm包管理器
online documentation shortcuts 在线文档快捷方式
Add to PATH添加到环境变量。

安装完成后，.msi格式的安装包已经将node启动程序添加到系统环境变量path中,查看系统变量验证。
win7：【计算机】->【属性】->【高级系统设置】->【高级】->【环境变量】->【系统变量】->【path变量】
既然已经将node程序添加到全局系统变量，我们可以直接在CMD窗口中任意位置执行node，打开CMD窗口，执行命令node -v查看node版本
最新版的node在安装时同时也安装了npm,执行npm -v查看npm版本

此处说明下：新版的Node.js已自带npm，安装Node.js时会一起安装，npm的作用就是对Node.js依赖的包进行管理，也可以理解为用来安装/卸载Node.js需要装的东西

2、修改包路径
默认情况下，我们在执行npm install -g XXXX时，下载了一个全局包，这个包的默认存放路径位C:\Users\{User}\AppData\Roaming\npm\node_modules下，可以通过CMD指令npm root -g查看

我们可以下载一个全局包试试看，执行命令npm install -g express

但是有时候我们不想让全局包放在这里，我们想放在node的安装目录下
1、在node安装目录下下新建两个文件夹
node_global 全局包下载存放
node_cache node缓存

2、修改路径
在CMD窗口执行以下两条命令：

npm config set prefix "D:\SoftWare\nodejs\node_global"
npm config set cache "D:\SoftWare\nodejs\node_cache"

或者在nodejs的安装目录中找到node_modules\npm\.npmrc文件，修改如下：
prefix =D:\SoftWare\nodejs\node_global
cache = D:\SoftWare\nodejs\node_cache

我们再次下载一个全局包，执行命令npm install -g vue，可以发现，下载的全局包vue已经放在了我们设置的目录中

 
    
    我们写一个js文件，引入vue模块，并输出，然后再node中执行该js文件,test.js

var vue = require("vue")

console.log(vue)

我们更改了npm全局模块的存放路径和cache路径，此时使用module时将会出现上述错误，因为电脑系统现在还不知道你把默认路径给改了，所以需要修改系统环境变量。
1、修改用户变量path为：D:\SoftWare\nodejs\node_global
2、新增系统变量NODE_PATH,变量值为D:\SoftWare\nodejs\node_global\node_modules

修改之后关闭CMD窗口，然后重新打开，运行刚才的test.js文件

 

PS：配置位置：

 

 

二、安装react
1、基本的前置环境搭建

命令行检测node.js 是否安装正常
node -v
在安装正常后，我们通过npm安装我们的脚手架工具
npm install -g create-react-app
npm install -g yarn

2、开始搭建react基本环境
加入react-redux和react-router的组件。
假设运行环境在d:\www\react\redux\demo下，进入该文件目录下。使用脚手架命令创建工程。

在命令行执行
create-react-app demo02

遇见问题(没有failed或者error，不用管，继续即可，网上查资料，yarn config set ignore-engines true，试过不行)：

我们只保留src下的index.js文件，src下的其他文件我们先干掉。
我们将src/index.js文件内容改成为

import React from 'react';
import ReactDOM from 'react-dom';
import HelloReact from './Pages/HelloReact';

ReactDOM.render(<HelloReact />, document.getElementById('root'));

在src下创建Pages目录，然后创建HelloReact.js来与我们的之前修改的index.js文件对应，存放我们的页面组件代码，在react下万物皆组件，页面也是一样。
HelloReact.js 页面内容如下：

import React, {Component} from 'react';

class HelloReact extends Component {
    render() {
        return (
            <div>
                Hello React.
            </div>
        );
    }
}

export default HelloReact;

我们在进入 D:\www\react\redux\demo\demo02 运行 npm run start 查看下我们的页面是否运行正常。

这是浏览器弹出，显示我们输入的页面信息。到这里我们的React基本环境就已经搭建完成，接下来，我们就要搭建我们的react-redux环境。

PS：Ctrl+C 取消

三、redux 和 react-redux包的安装与配置
在react中我们的组件之间状态的传递数据，只能是父组件向子组件传递，而子组件只能接受这些信息。但是这不符合我们的实际操作逻辑，因为数据是共享的，谁都能改才符合共享的原则。
接着上面的例子，我们在D:\www\react\redux\demo\demo02目录下执行以下命令

安装redux和react-redux
yarn add redux react-redux

redux安装完成，这个redux相当于我们的数据仓库，为了有这个仓库，我们就需要在src代码中创建store目录，来存放我们的相关操作文件
我们在src/store下创建index.js输入以下代码

import {createStore} from 'redux';
import reducer from './reducer'; // 相当于仓库管理员

const store = createStore(reducer); // 创建仓库放入管理员

export default store;

然后还是在src/store/下创建reducer.js文件输入以下代码

const defaultStates = {
    inputValue: '写入任务',
    list: [
        '睁眼起床',
        '下床刷牙',
        '穿衣出门',
    ],
};

export default (previousState = defaultStates, action) => {
    return previousState;
}

到这里我们的仓库已经搭建完成。接下来需要我们通过react-redux与我们的Pages中的页面结合了。
首先我们需要修改src/index.js代码如下

import React from 'react';
import ReactDOM from 'react-dom';
import HelloReact from './Pages/HelloReact';
import {Provider} from "react-redux"; // 引入Provider组件
import store from "./store";

// 无状态组件
const App = () => {
    // 包裹在Provider之间的组件都可以进行对数据仓库数据的操作
    return (
        <Provider store={store}>
            <HelloReact/>
        </Provider>
    );
};

ReactDOM.render(<App/>, document.getElementById('root'));

为了测试我们的react-redux环境是否搭建成功，我们修改src\Pages\HelloReact.js来做个todolist的例子。修改HelloReact.js代码如下：

import React, {Component} from 'react';
import {connect} from "react-redux";
import store from "../store";

class HelloReact extends Component {
    constructor(props) {
        super(props);
        this.state = store.getState();
    }

    render() {
        return (
            <div>
                <div>
                    <input type="text" style={{height: '17px'}} placeholder={this.props.inputValue}
                           value={this.props.inputValue}
                           onChange={this.props.inputChange}/>

                    <button style={{verticalAlign: 'middle'}} onClick={this.props.clickBtn}>添加</button>
                </div>

                <div>
                    <ul>
                        {this.props.list.map((item, index) => {
                            return (<li key={item + index}>{item}</li>);
                        })}
                    </ul>
                </div>
            </div>
        );
    }
}

// 隐射关系把原来的state映射成组件中的props属性
const stateToProps = (state) => {
    return {
        inputValue: state.inputValue,
        list: state.list,
    };
};

const dispatchToProps = (dispatch) => {
    return {
        inputChange(e) {
            let action = {
                type: 'inputChange',
                value: e.target.value,
            };
            dispatch(action);
        },

        clickBtn() {
            let action = {
                type: 'addItem',
            };

            dispatch(action);
        }
    };
};

export default connect(stateToProps, dispatchToProps)(HelloReact);

因为上面代码有dispath，所以我们的src/store/reducer.js是可以接收到的。所以我们要修改里面的代码来处理接收到的信息。

const defaultStates = {
    inputValue: '写入任务',
    list: [
        '睁眼起床',
        '下床刷牙',
        '穿衣出门',
    ],
};

export default (previousState = defaultStates, action) => {

    if (action.type === 'inputChange') {
        let newState = JSON.parse(JSON.stringify(previousState));
        newState.inputValue = action.value;

        return newState;
    }

    if (action.type === 'addItem') {
        let newState = JSON.parse(JSON.stringify(previousState));
        newState.list.push(newState.inputValue);
        newState.inputValue = '';

        return newState;
    }

    return previousState;
}

 

参考链接：

https://www.jianshu.com/p/13f45e24b1de （nodejs安装）

https://www.jianshu.com/p/66714c9bd1ff （react+redux安装）

https://www.jianshu.com/p/1798094ea2eb (从零开始一步一步搭建Typescript+React+Redux项目)