此文简单讲解了官方 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. Unity粒子系统

    最近比较清闲,就重新看了一遍例子系统,感觉能把效果做的炫酷对于初学者来说并不是一件容易的事,但是回头想想,最重要的原因可能还是没有把Particle Systems组件研究透吧,温故而知新,一起复习一 ...

  2. java 集合框架(List操作)

    /*list 基本操作 * * List a=new List(); * 增 * a.add(index,element);按指定位置添加,其余元素依次后移 * addAll(index,Collec ...

  3. Ubuntu搭建mysql,Navicat Premium连接

    保存编辑结果与退出vim编辑器 https://jingyan.baidu.com/article/495ba8410ff14d38b30ede01.html 首先,我们需要使用apt安装mysql, ...

  4. 拦截器的四种拦截方式以及Filter的执行顺序(17/4/8)

    一:拦截方式 需要在配置文件web.xml配置 在对应filter-mapping节点下 如下 <filter-mapping> <filter-name>BFilter< ...

  5. 【渗透测试】hydra使用小结

    -R:继续从上一次进度接着破解 -S:大写,采用SSL链接 -s <PORT>:小写,可通过这个参数指定非默认端口 -l <LOGIN>:指定破解的用户,对特定用户破解 -L ...

  6. 【代码学习】GD库中图片缩印

    bool imagecopyresampled ( resource $dst_image, resource $src_image, int $dst_x, int $dst_y, int $src ...

  7. Jenkins + Maven + Ansible + Tomcat 实现JAVA代码自动部署

    自动部署过程: jenkins从svn拉取代码,调用maven去打war包,用ansible去解压war包,最后重启tomcat. 前情回顾:在前面的文章我的环境已经有Jenkins+ansible ...

  8. 设计模式的征途—6.建造者(Builder)模式

    建造者模式又称为生成器模式,它是一种较为复杂.使用频率也相对较低的创建型模式.建造者模式为客户端返回的不是一个简单的产品,而是一个由多个部件组成的复杂产品.因为,没有人买车会只买一个方向盘或者轮胎,大 ...

  9. sscanf( )函数初体验

    解析字符串,将%格式的内容,存储到后面的参数中 %% - 返回一个百分号 % %c - ASCII 值对应的字符 %d - 包含正负号的十进制数(负数.0.正数) %e - 使用小写的科学计数法(例如 ...

  10. redis中的事务

    首先明白在java中线程和进程的区别: 1.什么是多线程? 是指一个应用程序同时执行多个任务,一般来说一个任务就是一个线程 ,而一个应用程序有一个以上的线程我们称之为多线程. 2.什么是进程? 进程是 ...