React前端开发环境搭建
先,我们需要明确的是React和很多前端框架一样,底层都还是js以及html,即便它有着看似特殊的jsx语法。
我们要在服务端运行js,就需要依赖一个环境,和运行war包需要tomcat一类中间件一样,运行js需要node.js,
同时因为我们用了各种框架,所以相应的module依赖也需要,需要使用npm工具,这就类似于maven管理jar包依赖一样
同样maven可以修改镜像,而npm也可以改成淘宝的cnpm以及相应module库地址。
let´s begin
(一)安装Node.js、npm、cnpm
当我们在官网下载并安装Node时,npm也自动安装好了,一路next后即可。安装好后键入node -v 以及npm -v 来测试是否安装成功(不需要自己手动配置系统环境变量)

因为国内使用npm很慢,我们可以使用淘宝的cnpm,同时设置镜像地址
npm install -g cnpm --registry=https://registry.npm.taobao.org

安装成功后,可以键入cnpm -v检查是否安装成功

(二)创建我们的第一个react程序
例如我们要在D:\workSpace下创建first-react-demo这个工程,并跑通,我们依次执行如下步骤
window下进入D:\workSpace这个文件夹,在地址栏键入cmd enter,

cnpm install -g create-react-app 全局安装创建react-app的module(这一步不一定要在workspace目录下)

create-react-app first-react-demo 在workspct这个文件夹下创建fist-react-demo这个项目

但是,有可能会报错 Unexpected end of JSON input while parsing near '....0","dependencies":{"' ,假如报错,需要执行npm cache clean --force

在创建成功的基础上,我们在打开first-react-demo这个文件夹,地址栏键入cmd并enter,在打开的cmd窗口中,键入npm start

大功告成。浏览器键入localhost:3000即可访问

React前端开发环境搭建的更多相关文章
- windows下vue+webpack前端开发环境搭建及nginx部署
一.开发环境搭建 1.前端框架一般都依赖nodejs,我们首先要安装node.js.请参考http://www.cnblogs.com/wuac/p/6381819.html. 2.由于许多npm的源 ...
- Windows 环境下vue+webpack前端开发环境搭建
一.开发环境搭建 1.前端框架一般依赖node.js,我们首先要安装node.js. 2.由于许多npm 的源都在国外的地址,安装起来特别慢,所以我们这里利用淘宝的镜像服务器. 安装命令为:npm i ...
- Android React Native 开发环境搭建---windows下
环境搭建 环境搭建可以参考RN官网,也可以参考中文版本:http://reactnative.cn/docs/0.45/getting-started.html 如果你希望可以看到原版的安装流程,可以 ...
- Sentinel控制台前端开发环境搭建
Sentinel:分布式系统的流量防卫兵. 官网:https://sentinelguard.io Github:https://github.com/alibaba/sentinel Wiki:ht ...
- react项目开发环境搭建
1.环境安装,首先要安装node http://nodejs.cn/ 进入nodejs下载,你是window就下在window的反之,安装下一步下一步...就好了 安装成功了试试 node -v , ...
- webpack前端开发环境搭建
要搭建webpack开发环境,首先要安装NodeJS,后面的过程均在NodeJS已经安装的基础上进行. 1. 首先建立一个工程目录,命名为,其目录结构如下: 其中dist目录用于存放生成的文件,src ...
- React Native开发环境搭建
安装Xcode 安装Homebrew 安装Android SDK 安装flow和watchman 安装nodejs 安装react-native-cli 安装Genymotion 安装Webstorm ...
- 前端开发环境搭建 Grunt Bower、Requirejs 、 Angular
现在web开发的趋势是前后端分离.前端采用某些js框架,后端采用某些语言提供restful API,两者以json格式进行数据交互. 如果后端采用node.js,则前后端可以使用同一种语言,共享某些可 ...
- [深入React] 1. 开发环境搭建
React环境其实很简单(不兼容ie8): <!DOCTYPE html> <html> <head> <title>React</title&g ...
随机推荐
- 浅析web网站反向代理的配置
一.背景 最近在部署项目到web服务器上时,该项目有一个打开视频监控的功能,视频的服务器是一台内网的服务器,不允许设置外网端口访问,网站服务器和视频服务器在同一个局域网内,可以相互联通.网络拓扑图如下 ...
- Sublime Text 开发神器相关 插件安装 功能介绍
无法安装更多见http://blog.csdn.net/freshlover/article/details/44261229/ Sublime Text 3 安装插件管理 Package Contr ...
- Python内置函数系列
Python内置(built-in)函数随着python解释器的运行而创建.在Python的程序中,你可以随时调用这些函数,不需要定义. 作用域相关(2) locals() :以字典类型返回当前位置 ...
- 关于微信小程序获取view的动态高度填坑
wx.createSelectorQuery().select('#box').boundingClientRect(function (rect) { width = rect.width heig ...
- element的Dialog组件踩坑
在一个组件页面中需要有一个弹窗,为了代码简洁我把弹窗封装成一个组件方便重复调用 描述大致是一个父组件,里面有一个按钮还有一个子组件(弹窗),点击按钮让弹窗出来,弹窗自带的有关闭功能,点击关闭以后再点击 ...
- 什么?在SAP中国研究院里还需要会PHP开发?
请原谅Jerry这篇文章的题目有"标题党"的嫌疑. 没错,至少SAP成都研究院的部分团队如此,比如Jerry目前就职的SAP成都研究院数字创新空间. 之前Jerry的文章, 曾经提 ...
- python点击短信验证码
代码如下 : import requestsimport time# 手机号码tel=1381380000# 请求地址url="http://192.168.100.101:8080/api ...
- IDEA 导入jar包
项IDEA的项目中导入下载好的jar包: 在intelij IDEA 中,点击File-Project Structure,出现界面的左侧点击Modules,然后点击“+”. 然后找到你要导入的jar ...
- 《数据结构与算法之美》 <03>数组:为什么很多编程语言中数组都从0开始编号?
提到数组,我想你肯定不陌生,甚至还会自信地说,它很简单啊. 是的,在每一种编程语言中,基本都会有数组这种数据类型.不过,它不仅仅是一种编程语言中的数据类型,还是一种最基础的数据结构.尽管数组看起来非常 ...
- I2C总线、设备、驱动
I2C总线.设备.驱动 框架 I2C驱动框架可分为3个部分,分别是:I2C核心层.I2C总线驱动层(适配器层)以及I2C设备驱动层: I2C核心层 提供了统一的I2C操作函数,主要有两套函数smbus ...