官方 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组件,组件生命周期等这些东西. ...
随机推荐
- JAVA Struts2 搭建
java struts 2搭建 1.web工程 2.将struts2 用到的jar包,拷贝到webcontent/webinf/lib文件夹.下 3.webcontent 下的web.xml 下 ...
- 手机应用PC端演示工具介绍
写给公司内部用的,所以没什么含量,请免炮轰. 为什么需要在PC端演示? 在Android及IOS系统上开发的手机应用,往往由于设备的限制,无法在演示汇报的场合向在场的众人展示界面,如果有工具可以将手机 ...
- Android 如何本地加载pdf文件
大部分app打开pdf文件是通过intent调起手机中能打开pdf文件的工具,来查看pdf文件,如果需求是,用户在app内下载好pdf文件后,不通过第三方的工具,本地打开. 这样的需求要怎么实现呢?上 ...
- WPF 杂谈——资源文件
编写一个应用难免要用到WPF本身的控件.不管是WinForm还是网页都会有自己的控件.只是在写法和用法上有所不同而以.而控件命名却离不开那几个单词.所以不用担心判断不出来哪个是按扭,哪个是文本框.举个 ...
- JS面向对象,创建,继承
很开心,最近收获了很多知识,而且发现很多东西,以前理解的都是错的,或者是肤浅的,还以为自己真的就get到了精髓,也很抱歉会影响一些人往错误的道路上走,不过这也告诉了我们,看任何一篇文章都不能盲目的去相 ...
- Sublime 3 如何使用列编辑模式
前言 作为一名运维人员,文本IDE的列编辑模式对工作效率的提升很大.以前总用UE,觉得UE的列编辑模式设置很人性化(alt+c).后来接触了sublime,个人觉得它的列编辑模式使用对比UE略有差距. ...
- 九思老客户分享:部署OA办公系统的四大意义
原文:http://www.jiusi.net/detail/472__776__4009__1.html 关键词:OA办公系统.oa系统 .九思OA 九思老客户分享:部署OA办公系统的四大意义 当今 ...
- php框架之我见:php开发到底需不要用框架?
本来就很好,结果无论软件CMS还是各种框架,都自己制造一套自己的规则! 关键还不通用! 我学PHP语法 语义累了半年好不容易熟悉,结果学个框架又学半年,然后框架升级或者去学其他框架,之前学的又等于没用 ...
- Docker - 在Ubuntu16.04中安装Docker CE
Get Docker for Ubuntu Check system version root@Ubuntu16:~# uname -a Linux Ubuntu16 4.8.0-36-generic ...
- js原型链部分详细使用说明案例
1. 'index.html'文件 ```html <!DOCTYPE html> <html lang="en"> <head> <me ...