react脚手架环境搭建流程

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:[email protected]server:port
npm config set https-proxy http://username:[email protected]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 。

原文地址:https://www.cnblogs.com/tianyou-songshao/p/9415436.html

时间: 2024-11-10 13:21:14

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

React Native环境搭建

React Native环境搭建 by 伍雪颖 1.安装 node,watchman,flow brew install node brew install --HEAD watchman brew install flow 2.安装react-native npm install -g react-native-cli 3.初始化工程 react-native init Helloworld 4.用xcode打开Helloworld.xcodeproj,运行 大功告成!

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

React Native(以下简称RN),已经“火”了好一段时间了,网上的资料相对也很丰富,只是一直迟迟没有发布1.0,不过出身豪门(Facebook)的RN和国内顶级互联网公司对于RN的实践与应用,就足矣证明其实力! 本文分为以下几个部分: 一.环境搭建: 二.APP调试与运行: 三.扩展知识: ------------------------------------------------------------------------------------分割线-------------

React 开发环境搭建 以及emmet的简单语法

1,React的开发背景 2,React的特点 3,React的开发环境搭建 3.1 下载FaceBook官方的基础代码 下载地址:facebook.github.io/react/index.html 3.2 文本编辑器Sublime Text3安装 3.2.1 下载sublime Text3下载 地址:http://www.sublimetext.com/3 首先安装packagecontrol 详见一下地址:https://packagecontrol.io/installation 打开

react Native环境 搭建

react Native的优点:跨平台 低投入高回报 性能高 支持动态更新.一才两用(ios和Android) 开发成本第 代码复用率高.windows环境搭建react Native开发环境1.安装node.js nmp-v查看node.js/npm版本2.npm install -g react-native-cli安装依赖3.react-native -help可以看相关命令4.Android中文域名 安装Android开发工具Android Studio5.react-native in

React Native 环境搭建踩坑

React Native (web Android)环境搭建踩坑(真的是一个艰辛的过程,大概所有坑都被我踩了 官方文档地址 : https://facebook.github.io/react-native/docs/getting-started 选择  Building Projects with Native Code 大家可以参照官方文档一步一步来,下面是我遇到的一些问题总结 查看一下node版本           node -v ------- 进入安装之前最好查一下JDK版本   

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

这篇文章首先简单介绍了联盟链是什么,再详细的介绍了Fabric环境搭建的整个流程. 区块链分类: 以参与方式分类,区块链可以分为:公有链.联盟链和私有链. 定义: 我们知道区块链就是一个分布式的,去中心化的公共数据库(或称公共账本).而联盟链是区块链的一个分支,所以它本身也是一个分布式的,去中心化的公共数据库,跟其他链的区别就是它是针对特定群体的成员和有限的第三方,其内部指定多个预选节点为记账人,其共识过程受到预选节点控制的区块链 本质 联盟链本质仍然是一种私有链,只不过它要比单个小组织开发的私

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

Appium1.6.4已经出来一段时间了,快速给大家串一下怎么搭建,贴了下载链接 1 基础环境: Windows + Mac: Java JDK 1.8+ (需配置环境变量),Appium1.6.4的依赖是Java1.8,建议用最新的: http://www.oracle.com/technetwork/java/javase/downloads/index.html Android SDK (需配置环境变量),这个是需要FQ的,建议还是百度装个压缩版的吧: https://developer.

React Native 环境搭建

参考  http://reactnative.cn/docs/0.39/getting-started.html 在环境搭建完成后,测试运行时我遇到一个问题:"Unhandled JS Exception:SyntaxError". 因为我安装完环境后,是直接在Xcode中点击Run,后来我用命令行运行就没这个问题了(react-native run-ios). 第一次运行用命令行,以后可以直接在Xcode中Run. 在iOS 模拟器 按Cmd+R不能刷新怎么解决? 设置连接电脑键盘即

初学 React native | 环境搭建(在模拟器上运行)

我的电脑是windows 所以就以 windows上+Android 配置React native 环境 网上的安装教程非常多,我总结了一下,出错原因主要是node java python c++  sdk 环境有问题,或者就是自己没有科学上网(你懂),网络有问题,导致了安装失败 至于如何安node java python c++ react-native-cli Android  sdk 我就不那么详细的说了,我主要说下我碰见的问题,想了解具体如何解决,点击这,还有这 node node wi