官方 React 快速上手脚手架 create-react-app
此文简单讲解了官方 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的更多相关文章
- React:快速上手(6)——掌握React Router
React:快速上手(6)——掌握React Router 引入Router 安装 npm install react-router-dom 基础组件 React Router中有三种类型的组件:路由 ...
- React:快速上手(5)——掌握Redux(2)
React:快速上手(5)——掌握Redux(2) 本文部分内容参考阮一峰的Redux教程. React-Redux原理 React-Redux运行机制 我觉得这张图清楚地描述React-Redux的 ...
- React:快速上手(1)——基础知识
React:快速上手(1)——基础知识 React(有时叫React.js或ReactJS)是一个为数据提供渲染为HTML视图的开源JavaScript库,用于构建用户界面. JSX.元素及渲染 1. ...
- React:快速上手(7)——使用中间件实现异步操作
React:快速上手(7)——使用中间件实现异步操作 本文参考链接:Stack Overflow redux-thunk 我们使用store.dispath进行派发时,只能传递一个普通对象进去,如下: ...
- React:快速上手(4)——掌握Redux(1)
React:快速上手(4)——掌握Redux 引入Redux 混乱的state管理 随着 JavaScript 单页应用开发日趋复杂,JavaScript 需要管理比任何时候都要多的 state (状 ...
- React:快速上手(3)——列表渲染
React:快速上手(3)——列表渲染 使用map循环数组 了解一些ES6 ES6, 全称 ECMAScript 6.0 ,是 JaveScript 的下一个版本标准,2015.06 发版.ES6 主 ...
- React:快速上手(2)——组件通信
React:快速上手(2)——组件通信 向父组件传递数据 父组件可以通过设置子组件的props属性进行向子组件传值,同时也可以传递一个回调函数,来获取到子组件内部的数据. 效果演示 子组件是输入框,父 ...
- React:快速上手(8)——前后端分离的跨域访问与会话保持
React:快速上手(8)——前后端分离的跨域访问与会话保持 跨域访问 跨域是指从一个域名的网页去请求另一个域名的资源.比如从http://www.baidu.com/ 页面去请求http://www ...
- react快速上手一(使用js语法,创建虚拟DOM元素)
1.装包,引包 首先需要安装两个包 react ,react-dom cnpm i react react-dom 介绍下这两个包: react:专门用来创建React组件,组件生命周期等这些东西. ...
随机推荐
- nginx源码编译问题
[root@localhost nginx-1.7.4]# ./configure checking for OS + Linux 2.6.32-431.el6.x86_64 x86_64 check ...
- Vuex(一)——vuejs的状态管理模式
一.Vuex是什么? Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式. 它采用集中式存储 管理 应用的所有组件 的 状态,并以 相应的规则 保证 状态以一种 可预测的方式 发生变化. ...
- iOS 相册和网络图片的存取
iOS 相册和网络图片的存取 保存 UIImage 到相册 UIKit UIKit 中一个古老的方法,Objective-C 的形式 void UIImageWriteToSavedPhotosAlb ...
- "fatal: protocol error: bad line length character: No This"
git clone 远程地址时候出现 "fatal: protocol error: bad line length character: No This" 错误 在stackov ...
- placeholder各种浏览器兼容问题
只要在页面上引入placeholder.min文件,再以$('input,textarea').placeholder(); 就可以兼容ie等各种浏览器. placeholder.min.js文件链接 ...
- 【转】为什么delete以后指针还能被赋值
首先,系统知道哪一部分堆的线性空间被占掉了,new就是起这个作用,仅仅是声明一下(可能多了一个功能),因为堆的空间不一定是直接从系统调用获得的,堆的空间是这样管理的:程序先伸请一个大的堆空间,这个时候 ...
- Python 基础 四 面向对象杂谈
Python 基础 四 面向对象杂谈 一.isinstance(obj,cls) 与issubcalss(sub,super) isinstance(obj,cls)检查是否obj是否是类 cls ...
- ABP官方文档翻译 2.5 设置管理
设置管理 介绍 关于 ISettingStore 定义设置 设置范围 重写设置定义 获取设置值 服务端 客户端 更改设置 关于缓存 介绍 每个应用都需要存储设置,并且在应用的某些地方需要使用这些设置. ...
- Bash 的若干基本问题
Bash 的若干基本问题 这里介绍一些bash启动前.后的问题,以及一些使用bash需要注意的基本问题. 1.Bash的介绍 Bash是一种Shell程序,它是一般的Linux系统中的 ...
- js,jQuery和DOM操作的总结(一)
废话不说,直接上图 一 js的基本操作 (1)js 的六种数据类型 var n4;//六种数据类型用typeof来确定类型,Null类型的用typeof是不行的,这个是特殊 alert(typeof ...