React-StepPitGuide
  • 封面
  • 前言
  • 基础知识
    • 环境配置
      • WebPack 前端打包工具
      • Babel 编译器
      • Node 环境配置
    • 版本说明
    • JSX
    • 组件
    • Child组件
    • 多组件嵌套
    • 组件生命周期
      • 组件生命周期(React16之前)
    • State属性
    • Props属性
    • 类组件
      • React PropTypes
      • React 可复用组件
      • React 事件与数据的双向绑定
      • React 组件DOM操作
      • React 独立组件间共享 Mixins ⚠
      • React 高阶组件(HOC)
        • 继承方式的高阶组件
        • 代理方式的高阶组件
      • React 无状态组件与PureComponent
      • React 容器组件和展示组件
      • setState
    • 函数组件
      • React 函数子组件
      • React Hook
        • useState
        • useEffect
    • 组件样式
      • CSS內联式样
      • CSS模块化
    • 受控与非受控组件
  • 进阶知识
  • React Context
  • React 顶级API
  • React Portal 传送门
  • 应用知识
    • 路由
      • React-Router2
      • React-router4
        • React-router4 结合React-Redux
    • 服务端渲染
    • 性能优化
      • React 组件优化
        • 定制shouldComponentUpdate
        • PureComponent
        • immutablejs存在的意义和使用
      • Redux性能优化
      • React同构
    • 项目应用
      • React 文件组织方式
      • React 模块接口
      • React 合并reducer
      • React 问题
  • 状态管理
    • Flux
    • Redux
      • Redux 使用
      • Redux 异步
      • Redux Chrome插件使用
      • Redux React-Redux
      • Redux applyMiddleware
      • Redux 结合React
      • Redux 自制Redux
      • Redux 自制React-Redux
      • Redux 自制thunk中间件
      • Redux 自制arr中间件
    • Mobx
      • Mobx 思想
    • RXJS
    • immutable
  • 源码思考
    • 简述
    • SimpleReact
    • 虚拟DOM
      • 虚拟DOM概念(React 16前)
      • 虚拟DOM思考(React 16前)
    • 生命周期
    • 事件
    • Fiber
      • 数据结构
      • Scheduler 调度
      • Concurrent 异步渲染
    • Hooks
      • useState
由 GitBook 提供支持
在本页
  • NodeJS简介
  • NodeJS安装
  • NPM配置国内源
  • 使用NPM配置React

这有帮助吗?

  1. 基础知识
  2. 环境配置

Node 环境配置

上一页Babel 编译器下一页版本说明

最后更新于4年前

这有帮助吗?

NodeJS简介

  • 是一个基于Chrome V8 JavaScript引擎构建的JavaScript运行时。 Node.js使用事件驱动的非阻塞I / O模型,使其轻便且高效。 Node.js的包生态系统,npm,是世界上最大的开源生态系统。

  • NPM命令,NPMJS有强大的库,存放着各种必备的开源文件,日常所需的基本上都能通过它找到,并安装。——

NodeJS安装

  • 如果想要稳定开发使用 LTS版

  • 如果想要体验NodeJS新功能可以使用 Current版

  • 建议使用 LTS版本,因为Current版本更新会删除之前的功能,使用前值得思考一下!!!!!

  • node -v 检测一下自己Node的版本

  • npm -v 检测一下自己NPM的版本

NPM配置国内源

  • 如果你不会翻墙,或者经常NPM装不上东西,可以试一下国内的NPM镜像

  • 这是一个完整 npmjs.org 镜像,你可以用此代替官方版本(只读),同步频率目前为 10分钟 一次以保证尽量与官方服务同步。

  • 方法一,定制的 cnpm (gzip 压缩支持) 命令行工具代替默认的 npm

  • $ npm install -g cnpm --registry=https://registry.npm.taobao.org

  • 方法二,直接通过添加 npm 参数 alias 一个新命令:

alias cnpm="npm --registry=https://registry.npm.taobao.org \
--cache=$HOME/.npm/.cache/cnpm \
--disturl=https://npm.taobao.org/dist \
--userconfig=$HOME/.cnpmrc"

# Or alias it in .bashrc or .zshrc
$ echo '\n#alias for cnpm\nalias cnpm="npm --registry=https://registry.npm.taobao.org \
--cache=$HOME/.npm/.cache/cnpm \
--disturl=https://npm.taobao.org/dist \
--userconfig=$HOME/.cnpmrc"' >> ~/.zshrc && source ~/.zshrc
  • 使用第一种方法taobaoNPM使用的时候写成$ cnpm install [name],就可以安装了!!!

  • 使用第二种方法NPM按照原来的方法$ npm install [name]就可以了!!!

使用NPM配置React

  • 建立项目后,cd到项目目录,用npm init做项目的初始化,会在目录下产生一个package.json文件

  • 然后开始安装React$ sudo npm install --save react react-dom babelify babel-preset-react

  • 安装完后,项目之下就有了node_modules这个文件夹,这个文件夹存放着以后NPM安装的文件

  • 下一步安装 $ sudo npm install babel-preset-es2015 --save

  • 全部安装完毕后就会是像我这个package.json一样。

  • 以下我使用的版本

{
  "name": "05-01",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "babel-loader": "^7.0.0",
    "babel-preset-react": "^6.24.1",
    "babelify": "^7.3.0",
    "react": "^15.5.4",
    "react-dom": "^15.5.4",
    "webpack": "^2.5.1",
    "webpack-dev-server": "^2.4.5"
  }
}
  • 需要注意的 ---- NPM安装的时候最好$ sudo npm install babel-loader -–save很多人无法后面webpack无法打包,就是因为没有安装babel加载器。

如果想了解更多点击->

在说热加载之前,先看一下我遇到过的问题,

error01
cnpm
React配置必踩坑
Node.js®
NPM.JS