先,我们需要明确的是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前端开发环境搭建的更多相关文章

  1. windows下vue+webpack前端开发环境搭建及nginx部署

    一.开发环境搭建 1.前端框架一般都依赖nodejs,我们首先要安装node.js.请参考http://www.cnblogs.com/wuac/p/6381819.html. 2.由于许多npm的源 ...

  2. Windows 环境下vue+webpack前端开发环境搭建

    一.开发环境搭建 1.前端框架一般依赖node.js,我们首先要安装node.js. 2.由于许多npm 的源都在国外的地址,安装起来特别慢,所以我们这里利用淘宝的镜像服务器. 安装命令为:npm i ...

  3. Android React Native 开发环境搭建---windows下

    环境搭建 环境搭建可以参考RN官网,也可以参考中文版本:http://reactnative.cn/docs/0.45/getting-started.html 如果你希望可以看到原版的安装流程,可以 ...

  4. Sentinel控制台前端开发环境搭建

    Sentinel:分布式系统的流量防卫兵. 官网:https://sentinelguard.io Github:https://github.com/alibaba/sentinel Wiki:ht ...

  5. react项目开发环境搭建

    1.环境安装,首先要安装node http://nodejs.cn/  进入nodejs下载,你是window就下在window的反之,安装下一步下一步...就好了 安装成功了试试 node -v , ...

  6. webpack前端开发环境搭建

    要搭建webpack开发环境,首先要安装NodeJS,后面的过程均在NodeJS已经安装的基础上进行. 1. 首先建立一个工程目录,命名为,其目录结构如下: 其中dist目录用于存放生成的文件,src ...

  7. React Native开发环境搭建

    安装Xcode 安装Homebrew 安装Android SDK 安装flow和watchman 安装nodejs 安装react-native-cli 安装Genymotion 安装Webstorm ...

  8. 前端开发环境搭建 Grunt Bower、Requirejs 、 Angular

    现在web开发的趋势是前后端分离.前端采用某些js框架,后端采用某些语言提供restful API,两者以json格式进行数据交互. 如果后端采用node.js,则前后端可以使用同一种语言,共享某些可 ...

  9. [深入React] 1. 开发环境搭建

    React环境其实很简单(不兼容ie8): <!DOCTYPE html> <html> <head> <title>React</title&g ...

随机推荐

  1. 在论坛中出现的比较难的sql问题:8(递归问题 树形结构分组)

    原文:在论坛中出现的比较难的sql问题:8(递归问题 树形结构分组) 最近,在论坛中,遇到了不少比较难的sql问题,虽然自己都能解决,但发现过几天后,就记不起来了,也忘记解决的方法了. 所以,觉得有必 ...

  2. springboot启动流程(二)SpringApplication run方法核心逻辑

    所有文章 https://www.cnblogs.com/lay2017/p/11478237.html run方法逻辑 在上一篇文章中,我们看到SpringApplication的静态方法最终是去构 ...

  3. VBA决策(十)

    决策允许程序员控制脚本或其中一个部分的执行流程.执行由一个或多个条件语句控制.以下是在大多数编程语言中找到的典型决策结构的一般形式. VBA提供了以下类型的决策声明. 点击以下链接来查看它们的详细信息 ...

  4. Django路由及函数视图

    路由系统 在django中,uri与逻辑函数的对应关系我们称之为路由系统 伪静态 伪静态是相对于静态文件来说的,例如https://www.cnblogs.com/hesujian/p/1116581 ...

  5. 【Distributed】分布式任务调度平台

    一.概述 什么是定时任务 二.Java实现定时任务方式 2.1 Thread 2.2 TimerTask 2.3 ScheduledExecutorService 2.4 Quartz 引入maven ...

  6. redis缓存击穿和缓存雪崩

    工作中经常会用到redis来做缓存,以防止后台db挂掉.但是db数据一般都在10T以上,不可能把mysql中的数据全部放入redis中,所以一般是将一些热key放入redis中. 缓存击穿 一个请求先 ...

  7. 关于stm32 SDIO初始化TF卡 失败的问题

    类似问题:http://www.openedv.com/thread-33232-1-1.html 现象:初始化4bit SDIO模式的TF卡,卡死在初始化过程中. 问题现象代码移植于野火开发板相关例 ...

  8. chkconfig 系统服务管理

    chkconfig --list   显示当前运行的所有服务/etc/inittabnetstat -antl   all n端口 t tcp协议 l listen状态chkconfig --add ...

  9. 【转】Linux下常用压缩 解压命令和压缩比率对比

    https://www.cnblogs.com/joshua317/p/6170839.html 常用的格式有:tar, tar.gz(tgz), tar.bz2, 不同方式,压缩和解压方式所耗CPU ...

  10. Codeforces 729D Sea Battle(简单思维题)

    http://codeforces.com/contest/738/problem/D https://www.cnblogs.com/flipped/p/6086615.html   原 题意:海战 ...