此文简单讲解了官方 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. Java设置Excel有效性

    XSSFWorkbook wb = new XSSFWorkbook(); XSSFSheet sheet = wb.createSheet("Excel"); String[] ...

  2. C#代码将html样式文件转为Word文档

    首先有个这样的需求,将以下网页内容下载为Word文件. html代码: <div class="modal-body">    <div style=" ...

  3. webpack中利用require.ensure()实现按需加载

    webpack中的require.ensure()可以实现按需加载资源包括js,css等,它会给里面require的文件单独打包,不和主文件打包在一起,webpack会自动配置名字,如0.js,1.j ...

  4. CKEditor不借助CKFinder实现图片上传(.net版 ashx实现)

    参考博客:http://blog.csdn.net/mydwr/article/details/8669594 本人版本:4.4.6 打开文件:ckeditor/plugins/image/dialo ...

  5. 关于li标签之间的间隔如何消除!

    问题:li标签用了display:inline之后虽然成功的合并在一行,但是li标签之间出现了间距. 原因:按enter键换行之后li标签之间存在着空格,正是这些空格占据了li标签之间的空间. 解决方 ...

  6. Spring Cloud 学习笔记(一)——入门、特征、配置

    [TOC] 0 放在前面 0.1 参考文档 http://cloud.spring.io/spring-cloud-static/Brixton.SR7/ https://springcloud.cc ...

  7. IOS中的绘图Quartz2D

    drawRect 方法的使用 常见图形的绘制:线条.多边形.圆 绘图状态的设置:文字颜色.线宽等 图形上下文状态的保存与恢复 图形上下文栈 Quartz 2D是一个二维绘图引擎,同时支持IOS和MAC ...

  8. 阿里react整合库dva demo分析

    p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 24.0px "Helvetica Neue"; color: #404040 } p. ...

  9. .Net Core中使用ref和Span<T>提高程序性能

    一.前言 其实说到ref,很多同学对它已经有所了解,ref是C# 7.0的一个语言特性,它为开发人员提供了返回本地变量引用和值引用的机制. Span也是建立在ref语法基础上的一个复杂的数据类型,在文 ...

  10. WINFORM数据库操作,有点像安装里面的SQLITE

    程序设计要求 设计一个用户管理系统,对系统中的用户进行管理.假定,用户表中有下列字段:用户名,密码,电话和 email 等信息.要求,1)利用 SQL server 首先创建用户数据表:2)实现对用户 ...