搭建react开发环境的准备工作

1. node.js 稳定版本

2. 安装cnpm,用cnpm代替npm

3. 用yarn替代npm

yarn的安装:npm install -g yarn

搭建react开发环境的第一种方法(老-现在推荐)

1. 安装脚手架工具  只需要安装一次

  npm install -g create-react-app /  cnpm install -g create-react-app

2. 创建项目

  找到项目要创建的目录:

  create-react-app reactname

3. cd到项目里面

  npm start / yarn start 运行项目

  npm run build / yarn build 生成项目

搭建react开发环境的第二种方法(新-未来推荐)

1. 找到项目要创建的目录执行

  npx create-react-app reactdemo

  包括的步骤:

    a. 安装 npm install -g create-react-app

    b. 创建 create-react-app reactname

    c. 删除

npx介绍

npm v5.2.0引入的一条命令(npx),引入这个命令的目的是为了提升开发者使用包内提供的命令行工具的体验。

react --- 搭建环境的更多相关文章

  1. webpack+react搭建环境

    近日自己项目遇到需要用webpack搭建react环境,查了挺多 ,自己总结一下 1.下载安装最新版node.js(https://nodejs.org/en/) 2.主要看自己网络情况,可以选择安装 ...

  2. 史上最全Windows版本搭建安装React Native环境配置

    史上最全Windows版本搭建安装React Native环境配置 配置过React Native 环境的都知道,在Windows React Native环境配置有很多坑要跳,为了帮助新手快速无误的 ...

  3. 史上最详细Windows版本搭建安装React Native环境配置 转载,比官网的靠谱亲测可用

    史上最详细Windows版本搭建安装React Native环境配置   2016/01/29 |  React Native技术文章 |  Sky丶清|  95条评论 |  33530 views ...

  4. React 入门学习笔记整理(一)——搭建环境

    使用create-react-app脚手架搭建环境 1.安装node .软件下载地址:https://nodejs.org/en/,我下的推荐的版本. 安装之后测试是否安装成功.windows系统下, ...

  5. 使用Yarn+Webpack+Babel6搭建React.js环境

    使用Yarn+Webpack+Babel6搭建React.js环境 Facebook开源的React.js已经改变了世人对前端UI的思考方式.这种基于组件方式的优势之一,就是使View更加的简单,因为 ...

  6. Mac中搭建 iOS 的 React Native 环境

    手把手教你在Mac中搭建iOS的 React Native环境 http://www.cnblogs.com/damnbird/p/6074607.html 准备工作 1.你需要一台Mac电脑..(这 ...

  7. 详解 Webpack+Babel+React 开发环境的搭建

    1.认识Webpack 构建应用前我们先来了解一下Webpack, Webpack是一个模块打包工具,能够把各种文件(例如:ReactJS.Babel.Coffeescript.Less/Sass等) ...

  8. Webpack笔记(二)——搭建React开发环境

    前几天一直在学习webpack,总算比之前学习的时候有了点收获,所以在昨天发布了一篇webpack入门笔记,今天继续使用webpack练了练手,搭建了一个React开发环境,如果还不熟悉的童鞋可以看一 ...

  9. 史上最详细Windows版本搭建安装React Native环境配置

    说在前面的话: 感谢同事金晓冰倾情奉献本环境搭建教程 之前我们已经讲解了React Native的OS X系统的环境搭建以及配置,鉴于各大群里有很多人反应在Windows环境搭建出现各种问题,今天就特 ...

随机推荐

  1. 男默女泪,ArcGIS AddIN 编辑逻辑赏析,走过路过,不要错过

    看到了一段ESRI写的一个工具,我反编译了一下,学习工具中的几个代码片段 一. IEditTask task = (this._editor as IEditTaskSearch).get_TaskB ...

  2. vcs编译verilog/sysverilog并执行

    命令: sverilog:表示支持systemverilog,如果只编译verilog不需要加 test.sv  :这个可以是一个systemverilog/verilog文件,也可以是一个filel ...

  3. 源码包安装maven

    含有的命令:cd,tar,mv,vim,sourc,mvnpv [root@ycj ~]# cd /usr/local/src/ //切换路径 [root@ycj src]# wget http:// ...

  4. ASP.NET Core 集成测试中结合 WebApplicationFactory 使用 SQLite 内存数据库

    SQLite 内存数据库(in-memory database)的连接字符串是  Data Source=:memory: ,它的特点是数据库连接一关闭,数据库就会被删除.而使用  services. ...

  5. html中不常用但必须知道的标签

    1.<b>加粗</b> 为天地立心,为生民立命,为往圣继绝学,为万世开太平 2.<s>删除线</s> 为天地立心,为生民立命,为往圣继绝学,为万世开太平 ...

  6. js, Date.parse firefox 兼容

    Date.parse(dateVal); 这个方法很常用,parse() 方法可解析一个日期时间字符串,并返回 1970/1/1 午夜距离该日期时间的毫秒数. 可以验证输入日期是否窜在,不存在则返回N ...

  7. Operating Systems (COMP2006)

    Operating Systems (COMP2006) 1st Semester 2019Page 1, CRICOS Number: 00301JOperating Systems (COMP20 ...

  8. Python 笔记 v1 - json和字符串互转

    字符串转为json对象并取值 >>> 使用了Json包中的loads()方法和dumps()方法 string =" { "status": " ...

  9. webpack常见问题 收藏

    一:webpack认识 本质上,webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler).当 webpack 处理应用程序时,它会递归地构建一个依赖关 ...

  10. [ionic3.x开发记录]参考ionic的float-label动效,写一个项目内通用的input组件,易扩展

    上图: module: import {NgModule} from "@angular/core"; import {CommonModule} from "@angu ...