React初识 Hello React
2023-02-18 16:30:14 时间
在html中使用react
首先引入react核心库react-dom和babel文件
文件顺序必须是核心库文件在react-dom文件之前引入,babel.js是用来将jsx解析成js
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
Hello React
<!-- 准备一个容器 -->
<div id="test"></div>
<!-- type值需要学text/babel才能写jsx语法 -->
<script type="text/babel">
//创建一个虚拟DOM
const VDOM = <h1>Hello React</h1>
//使用render函数渲染
ReactDOM.render(VDOM, document.getElementById('test'))
</script>
需要在本地服务器中运行才会有效
相关文章
- Java反射机制清空字符串导致业务异常分析
- 7000+字图文并茂解带你深入理解java锁升级的每个细节
- 全文手敲代码,教你用Java实现扫雷小游戏
- 4种方法教你如何查看java对象所占内存大小
- 手绘图解java类加载原理
- Java中的线程到底有哪些安全策略
- Java中观察者模式与委托,还在傻傻分不清
- 一图详解java-class类文件原理
- Java遇上SPL:架构优势和开发效率,一个不放过
- 长篇图解java反射机制及其应用场景
- [java并发编程]基于信号量semaphore实现限流器
- java并发编程-StampedLock高性能读写锁
- 【java并发编程】ReentrantLock 可重入读写锁
- 【java并发编程】Lock & Condition 协调同步生产消费
- Java synchronized对象级别与类级别的同步锁
- java并发编程JUC第十二篇:AtomicInteger原子整型
- java并发编程JUC第十一篇:如何在线程之间进行对等数据交换
- java并发编程JUC第十篇:CyclicBarrier线程同步
- java并发编程JUC第九篇:CountDownLatch线程同步
- java并发编程工具类JUC第八篇:ConcurrentHashMap