精选文章 nodejs+react+redux环境安装

nodejs+react+redux环境安装

作者:mysteryflower 时间: 2020-04-17 08:08:43
mysteryflower 2020-04-17 08:08:43

如何从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下,也可以自定义修改

nodejs+react+redux环境安装1

nodejs+react+redux环境安装2
其中:
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版本

nodejs+react+redux环境安装3

此处说明下:新版的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查看

nodejs+react+redux环境安装4

nodejs+react+redux环境安装5
我们可以下载一个全局包试试看,执行命令npm install -g express

nodejs+react+redux环境安装6

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

nodejs+react+redux环境安装7

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已经放在了我们设置的目录中

 nodejs+react+redux环境安装8
    
    我们写一个js文件,引入vue模块,并输出,然后再node中执行该js文件,test.js

var vue = require("vue")

console.log(vue)

nodejs+react+redux环境安装9

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

nodejs+react+redux环境安装10

nodejs+react+redux环境安装11

nodejs+react+redux环境安装12
修改之后关闭CMD窗口,然后重新打开,运行刚才的test.js文件

nodejs+react+redux环境安装13

 

PS:配置位置:

nodejs+react+redux环境安装14

 

 

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

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

nodejs+react+redux环境安装15

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

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

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

nodejs+react+redux环境安装16

nodejs+react+redux环境安装17

nodejs+react+redux环境安装18

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

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

ReactDOM.render(, document.getElementById('root'));

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

import React, {Component} from 'react';

class HelloReact extends Component {
    render() {
        return (
            
Hello React.
); } } export default HelloReact;

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

nodejs+react+redux环境安装19

nodejs+react+redux环境安装20

这是浏览器弹出,显示我们输入的页面信息。到这里我们的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 (
        
            
        
    );
};

ReactDOM.render(, 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 (
            
    {this.props.list.map((item, index) => { return (
  • {item}
  • ); })}
); } } // 隐射关系把原来的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项目)

勿删,copyright占位
分享文章到微博
分享文章到朋友圈

上一篇:layui——按钮

下一篇:封装 useUpdate 钩子

您可能感兴趣

  • 现代 Web 开发的现状与未来

    作者:Dexter.Yy 原文: https://zhuanlan.zhihu.com/p/88616149 本文是我受邀在台北的 JSDC 2019 活动中做的一次分享,从内容上来说已经可以算的上我的 2019 跨年演讲 XD 我比较惧怕公开演讲,习惯事先写好讲稿,虽然照稿念的演讲效果比较差,但好处是很快就可以作为文章发出来 XD(末尾部分的内容没来得及写讲稿,是临时补写的,跟现场不一样)...

  • 如何在Vue项目中使用vw实现移动端适配

    有关于移动端的适配布局一直以来都是众说纷纭,对应的解决方案也是有很多种。在《使用Flexible实现手淘H5页面的终端适配》提出了Flexible的布局方案,随着viewport单位越来越受到众多浏览器的支持,因此在《再聊移动端页面的适配》一文中提出了vw来做移动端的适配问题。到目前为止不管是哪一种方案,都还存在一定的缺陷。言外之意,还没有哪一个方案是完美的。 事实上真的不完美?其实不然。最...

  • 这21个React开发神器,提升工作效率必备

    来源 | https://www.jianshu.com/p/febbd8d3cdd4 下列工具中的重要性与排序无关。 1.Webpack Bundle Analyzer 有没有想过你的应用程序的哪些包或哪部分代码所占总大小的多少? Webpack Bundle Analyzer可以帮助咱们分析。 Webpack Bundle Analyzer创建一个实时服务器,并提供依赖包交互式树形图可视...

  • 前端知识点整理收集(不定时更新~)

    知识点都是搜集各种大佬们的,如有冒犯,请告知! 目录 原型链 New关键字的执行过程 ES6——class constructor方法 类的实例对象 不存在变量提升 super 关键字 ES6——...

  • 2017前端面试题总结

    1:为何选择前端这个方向和对前端的理解 为什么: 第一的话就是对前端很感兴趣,之前也接触过其他的语言,但是直到接触到前端才发现真的有兴趣做下去,兴趣是一个人最好的老师, 第二的话前端很有前途,像现在nodejs,rn,微信小程序这类工具和框架可以让前端进行后端和移动开发,所以我觉得前端的前途会更多一点。 理解: 首先前端工程师最核心的技能还是:Html、CSS、JS。前端负责的是用户可以看到...

  • ETH&EOS开发资源及工具集合

    ETH开发资源篇 一、开发语言 · Solidity - 官方推荐以太坊智能合约开发语言,也是目前最为主流的智能合约语言 · Bamboo - 是一种将智能合约描述为有限状态机的语言,把智能合约看成一个状态和交易的函数,同时生成一个新的状态 · Vyper - 一种类 python 的面向合约编程语言,专注于以太坊虚拟机,着重于安全、简洁、和稳定性 二、ERC 通证标准 · ERC-20 -...

  • node入门

    目录 一、什么是npm 二、命令行程序 三、commander.js 四、npm包管理 五、node提供一个链接可以下载图片 六、使用node原生http模块写接口 七、使用node原生http模块实现购物车所有接口(不需要装包,不需要中间件) 八、node原生写接口,搭建静态web服务器,处理前端history路由 九、安装FileZilla服务端 十、安装FileZilla客户端 十一、...

  • 基于create-react-app打包编译自己的第三方UI组件库

    前言 这篇文章主要是总结一下我们在工作中如何为公司开发内部的第三方UI组件,并通过npm install的方式安装的一些步骤和思路。在学习完这套发布方法后大家也可以快速的发布自己的UI库到npm,供他人使用,就比如elementUI或者Ant Design。 如果想学习如何发布一个js库或者框架,那么使用rollup更为适合,可以参考如下文章: 前端组件/库打包利器rollup使用与配置实战...

华为云40多款云服务产品0元试用活动

免费套餐,马上领取!
CSDN

CSDN

中国开发者社区CSDN (Chinese Software Developer Network) 创立于1999年,致力为中国开发者提供知识传播、在线学习、职业发展等全生命周期服务。