此文简单讲解了官方 React 快速上手脚手架的安装与介绍。

1. React 快速上手脚手架 create-react-app

为了快速地进行构建使用 React 的项目,FaceBook 官方发布了一个无需配置的、用于快速构建开发环境的脚手架工具 create-react-app。
当然,如果你需要 React Native 的脚手架项目,可以查看这里:create-react-native-app

使用的原因以及特性:

  • 无需配置;
  • 集成了对 React, JSX, ES6 和 Flow 的支持;
  • 集成了开发服务器;
  • 配置好了浏览器热加载的功能;
  • 在 JavaScript 中可以直接 import CSS 和图片;
  • 自动处理 CSS 的兼容问题,无需添加 -webkit 前缀;
  • 集成好了编译命令,编译后直接发布成产品,并且还包含了 sourcemaps。

2. create-react-app 的安装

命令行中使用 npm 执行安装命令 npm install -g create-react-app,注意需要添加 g 参数进行全局安装以及权限的问题。

安装后执行运行命令 npm start 即可在浏览器看到运行后的结果,并且已经实现了热加载的功能。

3. 需要注意的几个点

  • Node 的版本必须 >= 4,推荐 Node >= 6 and npm >= 3;
  • 运行起来后浏览器已经实现了热加载刷新,修改代码保存后浏览器会自动刷新;
  • 执行 npm test 或 yarn test 可以执行测试动作,更多请参阅这里
  • 编译项目执行 npm run build 或 yarn build
  • 更多使用向导请插件这里

官方 React 快速上手脚手架 create-react-app的更多相关文章

  1. React:快速上手(6)——掌握React Router

    React:快速上手(6)——掌握React Router 引入Router 安装 npm install react-router-dom 基础组件 React Router中有三种类型的组件:路由 ...

  2. React:快速上手(5)——掌握Redux(2)

    React:快速上手(5)——掌握Redux(2) 本文部分内容参考阮一峰的Redux教程. React-Redux原理 React-Redux运行机制 我觉得这张图清楚地描述React-Redux的 ...

  3. React:快速上手(1)——基础知识

    React:快速上手(1)——基础知识 React(有时叫React.js或ReactJS)是一个为数据提供渲染为HTML视图的开源JavaScript库,用于构建用户界面. JSX.元素及渲染 1. ...

  4. React:快速上手(7)——使用中间件实现异步操作

    React:快速上手(7)——使用中间件实现异步操作 本文参考链接:Stack Overflow redux-thunk 我们使用store.dispath进行派发时,只能传递一个普通对象进去,如下: ...

  5. React:快速上手(4)——掌握Redux(1)

    React:快速上手(4)——掌握Redux 引入Redux 混乱的state管理 随着 JavaScript 单页应用开发日趋复杂,JavaScript 需要管理比任何时候都要多的 state (状 ...

  6. React:快速上手(3)——列表渲染

    React:快速上手(3)——列表渲染 使用map循环数组 了解一些ES6 ES6, 全称 ECMAScript 6.0 ,是 JaveScript 的下一个版本标准,2015.06 发版.ES6 主 ...

  7. React:快速上手(2)——组件通信

    React:快速上手(2)——组件通信 向父组件传递数据 父组件可以通过设置子组件的props属性进行向子组件传值,同时也可以传递一个回调函数,来获取到子组件内部的数据. 效果演示 子组件是输入框,父 ...

  8. React:快速上手(8)——前后端分离的跨域访问与会话保持

    React:快速上手(8)——前后端分离的跨域访问与会话保持 跨域访问 跨域是指从一个域名的网页去请求另一个域名的资源.比如从http://www.baidu.com/ 页面去请求http://www ...

  9. react快速上手一(使用js语法,创建虚拟DOM元素)

    1.装包,引包 首先需要安装两个包 react ,react-dom cnpm i react react-dom 介绍下这两个包: react:专门用来创建React组件,组件生命周期等这些东西. ...

随机推荐

  1. iOS获取设备型号和App版本号等信息(OC+Swift)

    iOS获取设备型号和App版本号等信息(OC+Swift) 字数1687 阅读382 评论3 喜欢10 好久没有写过博客了,因为中间工作比较忙,然后有些个人事情所以耽误了.但是之前写的博客还一直有人来 ...

  2. SecureCRT中vim乱码问题

    Options->Session Options,接着在Terminal->Appearance页签中设定Character encoding为Unicode (UTF-8).

  3. 2017/4/25-SAX解析XML文件

    SAX解析XML 1.分析 SAX是按照XML文件的顺序执行,可以说是边扫描,边解析.所以无须将整个文件加载至内存中. 2.优点 1)占用内存少. 2)解析效率高. 3.缺点 1)只能进行读取. 2) ...

  4. lib-flexble 使用遇到的bug及解决方案

    1 lib-flexble解决微信端长按不能弹出识别二维码功能 加viewport就完美解决  flexble可以自动完成 一般情况不建议加 但是么 bug出来了  加上就好了 2 Font Boos ...

  5. css3常用方法以及css3选择器

    最重要的 CSS3 模块包括: 选择器 框模型 背景和边框 文本效果 2D/3D 转换 动画 多列布局 用户界面   CSS3 边框   CSS3 边框 通过 CSS3,您能够创建圆角边框,向矩形添加 ...

  6. 利用Apache POI 实现简单的Excel表格导出

    1.利用POI API实现简单的Excel表格导出 首先假设一个学生实体类: package com.sun.poi.domain; import java.io.Serializable; impo ...

  7. [进程管理]linux 下 进程和线程的区别(baidu 面试)

    进程是程序执行时的一个实例,即它是程序已经执行到课中程度的数据结构的汇集.从内核的观点看,进程的目的就是担当分配系统资源(CPU时间.内存等)的基本单位. 线程是进程的一个执行流,是CPU调度和分派的 ...

  8. shell中的Mysql查询

    1 #!/bin/bash 2 #查询 3 echo -e  4 for i in `cat id.txt` 5 do 6 A=`mysql -h10 -uw -p2012 -Ne "sel ...

  9. myeclipse离线安装PyDev

    MyEclipse装好了,用来开发java web的,一直可以用,前几天用python写爬虫,也是在myeclipse下,离线安装的包.打开后配置了一下就可以了. 这里用的是PyDev2.8.2    ...

  10. AspNetCore-MVC实战系列(四)之结尾

    AspNetCore - MVC实战系列目录 . 爱留图网站诞生 . git源码:https://github.com/shenniubuxing3/LovePicture.Web . AspNetC ...