react 环境安装
React 使用了ES6标准的JSX(script标签type为text/babel),但目前很多浏览器只支持ES5,所以我们就需要将JSX转成普通JS。在生产环节中,通常直接将JSX编译为JS,但简单测试的时候可以加入browser.js在浏览器端转换JSX文件(效率低)。做一些简单的测试也可以在浏览器中使用 Babel 来编译 JSX,可以参考菜鸟教程的实例。菜鸟教程中的实例引入了三个库,react.min.js 、react-dom.min.js 和 babel.min.js:
- react.min.js - React 的核心库
- react-dom.min.js - 提供与 DOM 相关的功能
- babel.min.js - Babel 可以将 ES6 代码转为 ES5 代码,这样我们就能在目前不支持 ES6 浏览器上执行 React 代码。Babel 内嵌了对 JSX 的支持。
需要注意的是,新版的Babel已经不提供babel.min.js。 从Babel 6.0开始,不再直接提供浏览器版本,而是要用构建工具构建出来,这里可以通过安装老版本的babel-core模块来解决
npm install -g babel-core@old 原文:https://blog.csdn.net/wopelo/article/details/77844916
这样安装的版本应该是5.8.x,在node_modules会出现babel-core文件夹,使用其中的browser.js或browser.min.js即可。
然而, Babel默认只转换新的JavaScript句法(syntax),而不转换新的API,比如Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise等全局对象,以及一些定义在全局对象上的方法(比如Object.assign)都不会转码。而且像import和export这两个命令现在在任何浏览器中都是不支持的, 同时babel也无法将其转换为浏览器支持的ES5, 原因在于:babel只是个翻译,假设a.js 里 import 了 b.js, 对a.js进行转码,只是翻译了a.js,并不会把b.js的内容给读取合并进来, 如果想在最终的某一个js里,包含 a.js,b.js 的代码,那就需要用到打包工具,例如webpack。
react 环境安装的更多相关文章
- 二、【未来】React环境安装:npx
搭建React的开发环境的第二种方法(新-未来推荐): https://reactjs.org/docs/create-a-new-react-app.html 一. npx简介: 1. npm v5 ...
- 谈谈React Native环境安装中我遇到的坑
谈谈React Native环境安装 这个坑把我困了好久,真的是接近崩溃的边缘...整理出来分享给大家,希望遇到跟我一样问题的小伙伴能尽快找到答案. 首先,这是在初始化App之后,react-nati ...
- React&Webpack 环境安装
react的安装依赖nodejs,nodejs安装下载可从http://nodejs.org/en/下载 1. 环境安装 1.1 创建lib目录 cd E:\ReactLib 1.2 ...
- React Native 开发环境安装和配置使用报错: -bash: react-native: command not found
[React Native 开发环境安装和配置:-bash: react-native: command not found 报错: 前提是安装homebrew,node.js ,npm ,watc ...
- 二、【重点】环境安装:通过淘宝 cnpm 快速安装使用 React,生成项目,运行项目、安装项目
1.cnpm代替npm 如果你的系统还不支持 Node.js 及 NPM 可以参考我们的 Node.js 教程. 我们建议在 React 中使用 CommonJS 模块系统,比如 browserify ...
- React环境配置(第一个React项目)
使用Webpack构建React项目 1. 使用NPM配置React环境 NPM及React安装自行百度 首先创建一个文件夹,the_first_React 进入到创建好的目录,npm init,然后 ...
- react 的安装和案列Todolist
react 的安装和案列Todolist 1.react的安装和环境的配置 首先检查有没有安装node.js和npm node -v npm -v 查看相关版本 2.安装脚手架工具 2.构建:crea ...
- 最小白的webpack+react环境搭建
本文也同步发表在我的公众号“我的天空” 从零开始,用最少的配置.最少的代码.最少的依赖来搭建一个最简单的webpack+react环境. 最近在玩webpack+react+移动端,那么第一步自然是搭 ...
- React 环境搭建及页面调试方法
React 环境搭建及页面调试方法 |作者:RexFang |出处:http://www.cnblogs.com/rexfang/ |关于作者:Java 程序员一枚 |版权:本文版权归作者和博客园共有 ...
随机推荐
- c# 16进制大端小端解析长度
//前两个字节为长度的解析string hexstr = "00 13 59 02 80 00 E7 00 80 00 E9 00 80 00 EA 00 80 00 EB 00 80&qu ...
- Java Socket NIO
服务端: public class NIOServer { private static final String HOST = "localhost"; private stat ...
- Kong(V1.0.2) Clustering Reference
介绍 Kong集群允许您通过添加更多的机器来处理更多的传入请求来水平扩展系统.它们将共享相同的配置,因为它们指向相同的数据库.指向相同数据存储的Kong节点将是相同Kong集群的一部分. 您需要在Ko ...
- Python【每日一问】11
问: 请简单说明一下以下代码的执行过程以及最终的输出结果 def fib(max): n, a, b = 0, 0, 1 while n < max: yield b a, b = b, a + ...
- 数据库-PLSQL登录oracle数据库卡死(未响应)解决方法
上次重装系统后重新安装了oracle和PLSQL,哪知道PLSQL登录不了,一登录就未响应,但如果不登录就不卡死,直接就进去了.在网上查了很多解决方法,都没有用. 后来在百度文库找到解决办法,重启Or ...
- 转:VB.NET Office操作之Word
在这里给出了一个Word操作的类,该类具备了对word 文档操作的基本功能,包括word 文档的新建,打开,保存,另存,插入图片,插入表格,插入文字,读取文字,定位光标位置,移动光标,移动到指定页等等 ...
- 取消win10 任务栏已固定的软件
通过组策略编辑器 设置为“已禁用”,就可 ,自由取消已固定的图标.
- django中forms和modelform组件的区别
首先,我们来看看modelform的实现 model.py class Book(models.Model): title=models.CharField(max_length=32) price= ...
- Quick Search Articles in My Blog
=== Quickly Search Articles in My Blog: === 本文介绍了如何快速在主流搜索引擎搜索本专栏内文章的方法. Use Google's Search : pres ...
- 使用Webupload上传图片到FastDFS分布式文件系统
使用Webupload插件上传图片到FastDFS分布式文件系统. 前提条件:1.已安装FastDFS分布式文件系统 2.使用webuploader插件上传文件 3.maven工程已引入FastDFS ...