`

React 单页面HTML加载JSX文件

阅读更多
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>React Plan List Version</title>
  </head>
  <body>
    <h1>React Plan List Version</h1>
    <div id="example1"></div>
    <div id="example2"></div>
    <div id="example3"></div>
    <div id="example4"></div>
    <div id="example5"></div>

    <script src="../../build/react.js"></script>
    <script src="../../build/react-dom.js"></script>
    <script src="../../build/browser.min.js"></script>
    <script type="text/babel" src="plans.js"></script>
  </body>
</html>

 

<script type="text/babel" src="plans.js"></script>   √
<script type="text/babel" src="plans.jsx"></script>  X

<script type="text/jsx" src="plans.js"></script>        X

<script type="text/jsx" src="plans.jsx"></script>      X

 

Separate File

Your React JSX code can live in a separate file. Create the following src/helloworld.js.

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('example')
);

Then reference it from helloworld.html:

<script type="text/babel" src="src/helloworld.js"></script>

 

Note that some browsers (Chrome, e.g.) will fail to load the file unless it's served via HTTP.

 

DOMO:

http://each.sinaapp.com/react/tutorial/separate-file.html

分享到:
评论

相关推荐

    my-react-app:通过使用JSX只是应用程序

    如果您进行编辑,则页面将重新加载。 您还将在控制台中看到任何棉绒错误。 npm test 在交互式监视模式下启动测试运行器。 有关更多信息,请参见关于的部分。 npm run build 构建生产到应用程序build文件夹。 它在...

    web前端react框架

    如何改变this指向,虚拟dom,props传参,路由加载(重定向),动态路由配置,以及路由模式,单页面应用,redux使用流程,内置api,副作用,监听获取修改,关于hook使用,简介,解决class(类)组件问题,懒加载组件...

    react-dnd-grid

    React和 jsx React路由器 样式表可以是 CSS、LESS、SASS、Stylus 或混合 嵌入式资源(如图像或字体)在适当时使用 DataUrls 一个简单的标志按需加载React组件(和依赖项)。 发展 开发服务器 可选的热模块替换...

    webpack-react-sample:一个示例 webpack react 项目

    React和 jsx React路由器 样式表可以是 CSS、LESS、SASS、Stylus 或混合 如果合适,嵌入的资源(如图像或字体)使用 DataUrls 一个简单的标志按需加载React组件(和依赖项)。 发展 开发服务器 可选的热模块替换...

    Current-Time-In-React-Jsx:使用React JS显示当前时间和日期

    如果您进行编辑,则页面将重新加载。 您还将在控制台中看到任何棉绒错误。npm test 在交互式监视模式下启动测试运行器。 有关更多信息,请参见关于的部分。npm run build 构建生产到应用程序build文件夹。 它在生产...

    react-jsx-project

    如果您进行编辑,则页面将重新加载。 您还将在控制台中看到任何棉绒错误。 npm test 在交互式监视模式下启动测试运行器。 有关更多信息,请参见关于的部分。 npm run build 构建生产到应用程序build文件夹。 它在...

    react-rxjs-reactive:使用 React 和 RxJS 进行响应式编程

    React和 jsx React路由器 样式表可以是 CSS、LESS、SASS、Stylus 或混合 嵌入式资源(如图像或字体)在适当时使用 DataUrls 一个简单的标志按需加载React组件(和依赖项)。 发展 开发服务器 可选的热模块替换...

    bit-show-react:使用React和React Router构建的单页面应用程序

    位秀-React BitShow是使用React构建的单页应用程序,您可以在其中搜索现有的电视节目或查看精选节目。 数据由tvmaze.com提供。 充分响应Materialize。 在BIT课程结束后的几天,Bit Show实际上是同一项目的重构版本,...

    react-weather-app:这是一个使用JSX,纯JavaScript和CSS构建的React天气应用程序。 它允许您通过城市搜索来检查实际的天气和天气预报,以及接下来5天的最大值。 和分钟。 温度,使用AJAX API调用

    如果您进行编辑,则页面将重新加载。 您还将在控制台中看到任何棉绒错误。 npm test 在交互式监视模式下启动测试运行器。 有关更多信息,请参见关于的部分。 npm run build 构建生产到应用程序build文件夹。 它在...

    react-semantic-ui:使用React构建一个应用程序,

    如果您进行编辑,则页面将重新加载。 您还将在控制台中看到任何棉绒错误。yarn test 在交互式监视模式下启动测试运行器。 有关更多信息,请参见关于的部分。yarn build 构建生产到应用程序build文件夹。 它在生产...

    First-JSX:JSX的第一个React实现

    如果您进行编辑,则页面将重新加载。您还将在控制台中看到任何棉绒错误。npm test在交互式监视模式下启动测试运行器。有关更多信息,请参见关于的部分。npm run build构建生产到应用程序build文件夹。它在生产模式下...

    react-styleguide-demo:一个React应用,用于试用react-css-modules,react-styleguide-generator和其他与样式相关的东西

    设计目标尽可能少的工具(不要使用yeoman,gulp,bower等) 具有当前浏览器的polyfill的ES6 可测试性:易于编写单元测试和生成代码覆盖率最小化模板,通过JSX与组件一起组成DOM CSS文件中的require()样式使用React-...

    justsomename:用 react 取名字

    特征使用 webpack 编译React和 jsx React路由器样式表可以是 CSS、LESS、SASS、Stylus 或混合嵌入式资源(如图像或字体)在适当时使用 DataUrls 一个简单的标志按需加载React组件(和依赖项)。 发展开发服务器可选...

    react-webpack-empty-starter

    特征使用webpack进行编译React和jsx React路由器样式表可以是CSS,LESS,SASS,Stylus或混合样式嵌入式资源(例如图像或字体)在适当的情况下使用DataUrls 一个简单的标志按需加载一个React组件(和依赖项)。...

    用于绘制建立在 SigmaJS 之上的网络图的轻量级 React 库

    使用 JSX 进行图形配置,包括异步图形加载。 库是轻量级和模块化的,因此您可以只捆绑您使用的内容。 易于使用附加组件进行扩展。 目录 用法 组件参考 Sigma SigmaEnableWebGL 扩展 Sigma 组件 组件组合 类型 用法 ...

    react-firenotes

    React和 jsx React路由器 样式表可以是 CSS、LESS、SASS、Stylus 或混合 嵌入式资源(如图像或字体)在适当时使用 DataUrls 一个简单的标志按需加载React组件(和依赖项)。 发展 开发服务器 可选的热模块替换...

    react-starter

    React和 jsx React路由器 样式表可以是 CSS、LESS、SASS、Stylus 或混合 嵌入式资源(如图像或字体)在适当时使用 DataUrls 一个简单的标志按需加载React组件(和依赖项)。 发展 开发服务器 可选的热模块替换...

    jsx

    如果进行编辑,页面将重新加载。 您还将在控制台中看到任何棉绒错误。 npm test 在交互式监视模式下启动测试运行程序。 有关更多信息,请参见关于的部分。 npm run build 构建生产到应用程序build文件夹。 它在...

    bingo:使用React的Bingo-Webpack-Firebase

    特征使用webpack进行编译React和jsx React路由器样式表可以是CSS,LESS,SASS,Stylus或混合样式嵌入式资源(如图像或字体)在适当的情况下使用DataUrls 一个简单的标志按需加载一个React组件(和依赖项)。...

    Focus:该Web应用程序将帮助您集中精力并组织工作。 不要错过重要的任务,而要专注于重要的任务。 该应用程序是使用React.js和JSX构建的

    如果您进行编辑,则页面将重新加载。 您还将在控制台中看到任何棉绒错误。 yarn test 在交互式监视模式下启动测试运行器。 有关更多信息,请参见关于的部分。 yarn build 构建生产到应用程序build文件夹。 它在...

Global site tag (gtag.js) - Google Analytics