如何在html中引入jsx文件

不使用webpack工具做react项目

1.引入react相关js文件

<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>

2.引入jsx文件组件并使用

<script type="text/babel" src="./js/demo.jsx"></script>
<script type="text/babel">
    ReactDOM.render( < MyComponent />,
            document.getElementById(‘App‘)
    );
</script>

3. 备注

在jsx文件中定义组件内容

原文地址:https://www.cnblogs.com/codebook/p/10387297.html

时间: 2024-10-06 16:29:43

如何在html中引入jsx文件的相关文章

IOS开发问题录:如何在Swift中引入Head文件?

最近在学习IOS开发,从一个简单的登录开始,逐步解决了一个网络访问.获取控件值等问题,遇到了信息加密的问题. 做为IOS的入门者,信息加密需要解决如下几个问题: 1.IOS的MD5加密有没有固定函数,怎么使用这个函数.. 经过查资料,在Object-C中有内置的函数 2.如何引入Object-C的函数 首先添加头文件,在xode 7 项目上右键 -new File->IOS->Source->HeadFile->下一步设置命名,可以任意命名,在head.h中加入如下代码: #imp

如何在jsp中引入bootstrap

如何在jsp中引入bootstrap包: 1.首先在http://getbootstrap.com/上下载Bootstrap的最新版. 您会看到两个按钮: Download Bootstrap:下载 Bootstrap.点击该按钮,您可以下载 Bootstrap CSS.JavaScript 和字体的预编译的压缩版本.不包含文档和最初的源代码文件. Download Source:下载源代码.点击该按钮,您可以直接从 from 上得到最新的 Bootstrap LESS 和 JavaScript

vue中引入样式文件

一.在vue中使用scss 首先进行安装如下依赖: cnpm i sass-loader node-sass -D 二.vue中引入样式文件 1)在index.html模板html文件中引入,这种方式引入的原样编译在生成的html文件中,如果想要通过link引入外部的样式文件,建议使用这种方式: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>2imis&

【jsp】怎么在jsp文件中引入静态文件(.js .css)

如果在jsp文件中引入静态文件比如(.js或.css等等),可以在使用 /项目名称/路径 的方式,但是这种方式如果在修改了项目了名称后就显得比较麻烦了.除了之外还许多方式,比如相对路径等等.一般情况下,可以先获得项目的根路径,然后再加上文件路径.  ${pageContext.request.contextPath}  可以获得当前项目的路径,然后就只需要在后面加上引入的静态文件的文件路径即可.比如: 这样就可以引入js文件下的jquery.min.js文件了.

Spring中Bean的作用域、Spring的自动注入、在spring配置文件中引入属性文件

1. Bean的作用域 Bean的作用域默认为单例模式. 2. 自动注入 3. 在spring配置文件中引入属性文件 Bean的作用域默认为单例模式. 原文地址:https://www.cnblogs.com/mcl2238973568/p/11478426.html

如何在Laravel中加密大文件?

Empcat的成功软件包应采用Laravel设计.用户可以上传任何大小的文件.出于安全原因,必须静态加密这些文件. Laravel提供加密,但是它们主要用于加密值.它使用加密的帮助程序方法很好地加密了小文件,例如图像,但是在此过程中,必须将文件的内容加载到内存中,这对于大文件是个问题. 我寻找了解决此问题的软件包或解决方案?找到了此Stack Overflow的答案?此PHP解决方案,它基本上是Stack Overflow中描述的解决方案的PHP. 我决定为Laravel创建一个扩展包,该扩展包

如何在html 中引入其它html文件

这里给出 三种 html文件引入其它html文件的方法: 1.IFrame引入 <IFRAME NAME="content_frame" width=100% height=30 marginwidth=0 marginheight=0 SRC="import.htm" ></IFRAME> 你会看到一个外部引入的文件,但会发现有一个类似外框的东西将其包围,可使用<iframe name="content_frame"

如何在C#中引入CPLEX的dll(CPLEX系列-教程一)

以前写在CSDN上的文章.转到博客园之后,打算把这个教程移过来,顺便完善后面的教程.主要是在Asp.Net+EF6里面使用cplex,完成一个最优生产计划的决策.当时在查找如何在C#中引用cplex时,找到的大多是cplex在VS中的环境配置,大都还是以C++为例,而且觉得有些复杂.所以想写一篇关于C#引用的教程. 关于下载 我下载的版本是cplex studio12.8.0,可以去官网注册账号并下载试用版或者教育版.其他下载途径自行百度. 安装 下载之后,新建一个文件夹以备安装使用.可以不用安

vue中引入css文件

两种方式引入css文件,一种是直接在main.js中引入,即下面这种写法: import 'element-ui/lib/theme-default/index.css' 这种写法适用于此css文件存在于项目中,不适用于通过网址访问的方式引入,会报错.偶试着引入Font Awesome,结果报错: import "http://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" 而直接在组件中引入却可