关于react中使用browser.js转译JSX的操作方法,并附react.js,react-dom.js,browser.js文件下载链接

在初学react这个框架时,可采用在文件中引入react.js,react-dom.js,browser.js库来编写代码。JSX在React中是一种非常常见的写法,具体JSX的解释很难说的清楚,但通常可以理解为JavaScriptXML或者是JavaScript Syntax eXtension (JavaScript语法扩展的缩写)。

在项目中使用JSX技术时,我们需要用babel进行转译,babel从版本6开始就不再提供babel.js,因此我们在引用库文件使用babel转译时,就只能使用其旧版本。博主个人github上收集了react.js,react-dom.js,browser.js文件,可前往下载

具体使用browser转译的例子如下:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
  <div id="app"></div>
  <script src="../react.js"></script>
  <script src="../react-dom.js"></script>
  <script src="../browser.min.js"></script>
  <script type="text/babel">
    ReactDOM.render(
      <div> 测试jsx </div>,
      document.getElementById('app')
    )
  </script>
</body>

</html>

需要注意的时,在编写js代码的script标签的类型type为‘text/babel’,否则无法对JSX进行转译,并会报出下列错误。

初学React需要注意这个问题。

 

已标记关键词 清除标记
相关推荐
!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.Babel=t():e.Babel=t()}(this,function(){return function(e){function t(n){if(r[n])return r[n].exports;var i=r[n]={exports:{},id:n,loaded:!1};return e[n].call(i.exports,i,i.exports,t),i.loaded=!0,i.exports}var r={};return t.m=e,t.c=r,t.p="",t(0)}(function(e){for(var t in e)if(Object.prototype.hasOwnProperty.call(e,t))switch(typeof e[t]){case"function":break;case"object":e[t]=function(t){var r=t.slice(1),n=e[t[0]];return function(e,t,i){n.apply(this,[e,t,i].concat(r))}}(e[t]);break;default:e[t]=e[e[t]]}return e}([function(e,t,r){"use strict";function n(e,t){return g(t)&&"string"==typeof t[0]?e.hasOwnProperty(t[0])?[e[t[0]]].concat(t.slice(1)):void 0:"string"==typeof t?e[t]:t}function i(e){var t=(e.presets||[]).map(function(e){var t=n(E,e);if(!t)throw new Error('Invalid preset specified in Babel options: "'+e+'"');return g(t)&&"object"===h(t[0])&&t[0].hasOwnProperty("buildPreset")&&(t[0]=d({},t[0],{buildPreset:t[0].buildPreset})),t}),r=(e.plugins||[]).map(function(e){var t=n(b,e);if(!t)throw new Error('Invalid plugin specified in Babel options: "'+e+'"');return t});return d({babelrc:!1},e,{presets:t,plugins:r})}function s(e,t){return y.transform(e,i(t))}function a(e,t,r){return y.transformFromAst(e,t,i(r))}function o(e,t){b.hasOwnProperty(e)&&console.warn('A plugin named "'+e+'" is already registered, it will be overridden'),b[e]=t}function u(e){Object.keys(e).forEach(function(t){return o(t,e[t])})}function l(e,t){E.hasOwnProperty(e)&&console.warn('A preset named "'+e+'" is already registered, it will be overridden'),E[e]=t}function c(e){Object.keys(e).forEach(function(t){return l(t,e[t])})}function f(e){(0,v.runScripts)(s,e)}function p(){window.removeEventListener("DOMContentLoaded",f)}Object.defineProperty(t,"__esModule",{value:!0}),t.version=t.buildExternalHelpers=t.availablePresets=t.availablePlugins=void 0;var d=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e},h="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e};t.transform=s,t.transformFromAst=a,t.registerPlugin=o,t.registerPlugins=u,t.registerPreset=l,t.registerPresets=c,t.transformScriptTags=f,t.disableScriptTags=p;var m=r(290),y=function(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&(t[r]=e[r]);return t.default=e,t}(m),v=r(629),g=Array.isArray||function(e){return"[object Array]"===Object.prototype.toString.call(e)},b=t.availablePlugins={},E=t.availablePresets={};t.buildExternalHelpers=y.buildExternalHelpers;u({"check-es2015-constants":r(66),"external-helpers":r(322),"inline-replace-variables":r(323),"syntax-async-functions":r(67),"syntax-async-generators":r(195),"syntax-class-constructor-call":r(196),"syntax-class-properties":r(197),"syntax-decorators":r(125),"syntax-do-expressions":r(198),"syntax-exponentiation-operator":r(199),"syntax-export-extensions":r(200),"syntax-flow":r(126),"syntax-function-bind":r(201),"syntax-function-sent":r(325),"syntax-jsx":r(127),"syntax-object-rest-spread":r(202),"syntax-trailing-function-commas":r(128),"transform-async-functions":r(326),"transform-async-to-generator":r(129),"transform-async-to-module-method":r(328),"transform-class-constructor-call":r(203),"transform-class-properties":r(204),"transform-decorators":r(205),"transform-decorators-legacy":r(329).default,"transform-do-expressions":r(206),"transform-es2015-arrow-functions":r(68),"transform-es2015-block-scoped-functions":r(69),"transform-es2015-block-scoping":r(70),"transform-es2015-classes":r(71),"transform-es2015-computed-properties":r(72),"transform-es2015-destructuring":r(73),"transform-es2015-duplicate-keys":r(130),"transform-es2015-for-of":r(74),"transform-es2015-function-name":r(75),"transform-es2015-instanceof":r(332),"transform-es2015-literals":r(76),"transform-es2015-modules-amd":r(131),"transform-es2015-modules-commonjs":r(77),"transform-es2015-modules-systemjs":r(208),"transform-es2015-modules-umd":r(209),"transform-es2015-object-super":r(78),"transform-es2015-parameters":r(79),"transform-es2015-shorthand-properties":r(80),"transform-es2015-spread":r(81),"transform-es2015-sticky-regex":r(82),"transform-es2015-template-literals":r(83),"transform-es2015-typeof-symbol":r(84),"transform-es2015-unicode-regex":r(85),"transform-es3-member-expression-literals":r(336),"transform-es3-property-literals":r(337),"transform-es5-property-mutators":r(338),"transform-eval":r(339),"transform-exponentiation-operator":r(132),"transform-export-extensions":r(210),"transform-flow-comments":r(340),"transform-flow-strip-types":r(211),"transform-function-bind":r(212),"transform-jscript":r(
©️2020 CSDN 皮肤主题: 创作都市 设计师:CSDN官方博客 返回首页