1.安装与配置node.js:
1.1软件下载地址:https://nodejs.org/en/,推荐下载.msi文件,其中npm已经集成在了node.js中。
1.2 双击下载的.msi文件进行安装,安装过程直接按照默认设置点击下一步即可,安装目录用户可自行修改。安装完成后,在cmd命令行输入node -v 和 npm -v,分别显示node.js和npm的版本,则安装成功。如果提示非内部命令,则需要将配置node.js环境变量(安装node.js过程中默认已配置)。
1.3 更改npm全局模块和默认安装位置(可选):
1.3.1 在node.js安装文件夹(或用户自定义文件夹)下新建node_global和node_cache两个文件夹
1.3.2 启动cmd并依此执行以下两条命令:

npm config set prefix "XXX\nodejs\node_global"       //用户自定义的安装路径
npm config set cache "XXX\nodejs\node_cache"

1.3.3 通过命令

npm config get -l

在显示的配置列表中查看cache 和 prefix的路径,可以发现改路径为用户自定义路径。
1.4 更改npm版本。
由于5.x版本的npm存在bug,无法确保npm install create-react-app正确执行。官网推荐使用npm 4.x版,更新命令如下:

npm install -g @4

默认更新后的版本为4.6.1版

2. 设置代理服务器(cmd下敲命令):
在公司访问外网是通过代理服务器进行访问的,需要首先申请外网访问权限。在获得外网访问权限后,需要为npm配置代理服务器,配置命令如下:

npm config set proxy http://username:password@server:port
npm config set https-proxy http://username:passord@server:port

3. 修改npm资源获取路径:
Npm默认资源路径为:

https://registry.npmjs.org

该路径获取资源较慢,可将其修改为淘宝的资源。
在cmd下执行如下命令:

npm config set registry=https://registry.npm.taobao.org/

通过命令
npm config get registry可以查看是否修改成功,该命令返回registry路径。
如果不修改默认路径,也可以在执行npm install [name]时临时资源下载路径:

Npm install [name] --registry https://registry.npm.taogao.org

4. 创建create-react-app工程
4.1新建一个用于创建create-react-app工程的文件夹
4.2在cmd命令行下,进入该文件夹路径
4.3 执行命令:

 npm install -g create-react-app

(此过程用时较长,大概15分钟左右,具体与网络也有关系)
4.4 执行成功后,执行命令:

create-react-app my-app

说明:my-app是用户自定义的文件夹名称
4.5 执行成功后,执行命令:

npm start

默认会打开浏览器窗口,弹出React界面。(最好安装谷歌浏览器)
说明:创建create-react-app网络教程很多,我遇到的坑主要有两个:
1.配置代理服务器(如果是通过代理服务器访问外部网络)
2.确保npm版本能够执行创建create-react-app,如果初次创建create-react-app失败,则更换npm版本,详细命令参考下图:

3.如果执行 npm install --global create-react-app 已经很久了,重新执行 create-react-app finename 失败的话,可以重新执行一次 npm install --global create-react-app ,更新一下,然后执行create-react-app filename 。

react脚手架环境搭建流程的更多相关文章

  1. cocos2d-x 3.11 游戏开发环境搭建流程

    cocos2d-x 3.11.1 游戏开发环境搭建流程 1. 准备下面的软件 1) Windows7 64Bit+ VS2013 (VC++) 这个不用多说. 2) cocos2d-x-3.11.1. ...

  2. 联盟链初识以及Fabric环境搭建流程

    这篇文章首先简单介绍了联盟链是什么,再详细的介绍了Fabric环境搭建的整个流程. 区块链分类: 以参与方式分类,区块链可以分为:公有链.联盟链和私有链. 定义: 我们知道区块链就是一个分布式的,去中 ...

  3. Ubuntu17.10 React Native 环境搭建

    React Native 环境搭建 环境:ubuntu17.10 安装依赖 必须安装的依赖有:Node.React Native 命令行工具以及 JDK 和 Andriod Studio. 安装nod ...

  4. React的环境搭建以及脚手架的安装

    1.安装node.js 如果安装了,就请参照第二步:没有的话,去node.js官网下载:https://nodejs.org/zh-cn/download/ 2.检查 win键+r -----> ...

  5. 逻辑性最强的React Native环境搭建与调试

    React Native(以下简称RN),已经“火”了好一段时间了,网上的资料相对也很丰富,只是一直迟迟没有发布1.0,不过出身豪门(Facebook)的RN和国内顶级互联网公司对于RN的实践与应用, ...

  6. React Native环境搭建以及几个基础控件的使用

    之前写了几篇博客,但是没有从最基础的开始写,现在想了想感觉不太合适,所以现在把基础的一些东西给补上,也算是我从零开始学习RN的经验吧! 一.环境搭建 首先声明一下,本人现在用的编辑器是SublimeT ...

  7. react Native环境 搭建

    react Native的优点:跨平台 低投入高回报 性能高 支持动态更新.一才两用(ios和Android) 开发成本第 代码复用率高.windows环境搭建react Native开发环境1.安装 ...

  8. React Native 环境搭建踩坑

    React Native (web Android)环境搭建踩坑(真的是一个艰辛的过程,大概所有坑都被我踩了 官方文档地址 : https://facebook.github.io/react-nat ...

  9. Appium 1.6.4 环境搭建流程(Java, Android+IOS, Windows+Mac)

    Appium1.6.4已经出来一段时间了,快速给大家串一下怎么搭建,贴了下载链接 1 基础环境: Windows + Mac: Java JDK 1.8+ (需配置环境变量),Appium1.6.4的 ...

随机推荐

  1. mssql修改id

    alter   table   image   alter   column   id     int   IDENTITY   (1,   1)   NOT   NULL 我只能上查询分析器,所以只 ...

  2. asp.net 服务器控件的 ID,ClientID,UniqueID 的区别

    1.简述 ID是设计的时候自己所指定的ID,是我们分配给服务器控件的编程标识符,我们常常使用this.controlid来寻找控件,那么这个controlid就是这里所说的ID. ClientID是由 ...

  3. 沉淀,再出发:VUE的简单理解

    沉淀,再出发:VUE的简单理解 一.前言 Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架.Vue 只关注视图层,采用自底向上增量开发的设计.Vue 的目标是通过 ...

  4. Alpha Scrum7

    Alpha Scrum7 牛肉面不要牛肉不要面 Alpha项目冲刺(团队作业5) 各个成员在 Alpha 阶段认领的任务 林志松:项目发布 陈远军.陈彬:播放器各环境的测试 项目的发布说明 本版本的新 ...

  5. Alpha Scrum2

    Alpha Scrum2 牛肉面不要牛肉不要面 Alpha项目冲刺(团队作业5) 各个成员在 Alpha 阶段认领的任务 林志松:督促和监督团队进度.协调组内合作,前端页面编写,博客发布 林书浩.陈远 ...

  6. JavaScript的事件对象_实现拖拽

    实现拖拽一个元素 拖拽的流程: 当鼠标在被拖拽元素上按下时,开始拖拽 onmousedown 当鼠标移动时被拖拽元素跟随鼠标移动 onmousemove 当鼠标松开时,被拖拽元素固定在当前位置 onm ...

  7. 历史在重演:从KHTML到WebKit,再到Blink

    http://36kr.com/p/202396.html 上周四,Google宣布从WebKit 分支出自己的浏览器渲染引擎 Blink.很多人觉得这像是晴天霹雳,或者甚至是迟到的愚人节笑话,但是其 ...

  8. PHP-----TP框架----命名空间

    TP框架----命名空间 命名空间,起什么作用??? [1]命名空间是一个虚拟的目录,这个文件有可能存在这个电脑里的任何一个地方,但是如果要把这个文件它的命名空间全部写成同一个那么这些文件就相当于在同 ...

  9. 【node.js】REPL(交互式解释器)

    Node 自带了交互式解释器,可以执行以下任务: 读取 - 读取用户输入,解析输入了Javascript 数据结构并存储在内存中. 执行 - 执行输入的数据结构 打印 - 输出结果 循环 - 循环操作 ...

  10. face++

    1.链表反转 2.快排 3.m*k   n*k两矩阵计算欧几里得距离np.tile 4.链表排序,要求时间复杂度小于O(N^2),空间O(1),不允许改变链表的值 5.2sum及其变体 6.给一个数组 ...