单文件快速体验使用react输出hello_world
看了下react官方的hello world教程, 感觉对新手很不友好.codepen虽然好用, 但是封装太多东西, 看起来
太抽象. 还是喜欢像学习jQuery那样, 直接在单文件中引入必要的js文件, 然后直接运行的那种感觉.
如果使用VS Code, 建议安装
Sublime Babel
, 来提供对react语法的代码高亮.
基础hello-world
直接复制以下代码, 粘贴自己的编辑器里, 打开即可运行.
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>Hello World</title><script src="https://unpkg.com/react@15.6.1/dist/react.min.js"></script><script src="https://unpkg.com/react-dom@15.6.1/dist/react-dom.min.js"></script><!-- 上面2个是引入react必要的js --><script src="https://unpkg.com/babel-standalone@6.26.0/babel.min.js"></script><!-- babel是1个JavaScript预编译器, 由于新版react使用了很多ES6新语法, 故很多浏览器不支持直接运行, 我试了下, 去掉这个babel预编译器, 使用chrome 60.0依旧无法正常运行.babel说白了就是把ES6语法翻译成向后兼容的ES5/3语法, 从而能够在绝大部分浏览器中运行. --><!-- 上述3个js文件的大小:react.min.js 23.04KBreact-dom.min.js 130.29 KBbabel.min.js 791.24KB -->
</head><body>
<div id="root"></div>
<script type="text/babel"> // 注意这里 text/babel 不可省ReactDOM.render(<h1>Hello, world!</h1>, // 这是JSX语法document.getElementById('root') // 获取到root元素);</script>
</body>
</html>
利用组件带参数输出hello-world
react中1个class定义1个组件, 每个组件都有1个render()
方法来渲染页面.
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>利用组件输出hello-world</title><script src="https://unpkg.com/react@15.6.1/dist/react.min.js"></script><script src="https://unpkg.com/react-dom@15.6.1/dist/react-dom.min.js"></script><script src="https://unpkg.com/babel-standalone@6.26.0/babel.min.js"></script>
</head><body>
<div id="root"></div>
<script type="text/babel">class HelloMessage extends React.Component {render() {return <div>Hello {this.props.name}</div>;}
}ReactDOM.render(<HelloMessage name="minecraft" />, document.getElementById('root')
);</script>
</body>
</html>
转载于:https://www.cnblogs.com/asheng2016/p/7481987.html
单文件快速体验使用react输出hello_world相关推荐
- go test 如何输出到控制台_GO笔记之GO命令快速体验
上篇文章利用go run和go build命令分析介绍了GO的编译执行流程.GO提供给我们的命令当然远不止这两个.本文将在所能及的范围内,尽量地介绍GO提供的所有命令,从而实现对它们有个整体的认识. ...
- react的单文件编写方式
single-react-loader 通过该插件,你可以使用单文件形式编写react组件(将jsx与style组合在一起) 特性 将jsx和css组合在一个文件内 支持less,sass 支持sty ...
- ai怎么让图片任意变形_Illustrator自由变形工具 AI里面把一些图形拼合到一起 快速定义渐变颜色 输出文件...
Illustrator自由变形工具 AI里面把一些图形拼合到一起 快速定义渐变颜色 输出文件 请教Illustrator/AI中自由变形工具的问题 在ai中如何用自由变形工具把一个矩形变成一个等腰梯形 ...
- golang glog文件名命令_Golang开发的全功能单文件Web服务器
最新HTTP/2标准已经发布,是基于谷歌QUIC的技术升级而成.虽然标准已经发布,但是目前还鲜有应用支持,那么有没有方法进行技术尝鲜呢?答案是肯定的.本文虫虫给大家介绍一个Golang Web服务器应 ...
- Jest 学习01 - Jest 介绍、快速体验、vscode 智能提示、配置、监视模式、Babel 配置
起步 测试到底测什么 提到测试的时候,即使是最简单的一个代码块可能都让初学者不知所措.最常问的问题的是"我怎么知道要测试什么?".如果你正在写一个 Web 应用,那么依次测试每个页 ...
- /opt/hbase/conf 中不能启动hbase_Ventoy下载 U盘启动盘制作 Ventoy v1.0.25 单文件便携版 附使用教程 下载...
Ventoy最新单文件版 是新一代多系统启动U盘解决方案.国产开源免费的U盘启动引导制作工具,支持Legacy BIOS和UEFI模式,理论上几乎支持任何ISO镜像文件,支持加载多个不同类型的ISO文 ...
- VSCode环境下配置ESLint 对Vue单文件的检测
本文介绍了在VSCode环境下如何配置eslint进行代码检查,并介绍了如何对.vue单文件进行支持. ESLint 安装 1.在工程根目录下,安装eslint及初始化 $ npm install e ...
- 【rnnoise快速体验】rnnoise从编译到训练
运行环境为Ubuntu18.04 C部分 下载源码 从github上下载源码,目前只有master分支,就拿master分支下来. 准备编译环境 干净的linux环境可能会没有安装gcc等编译工具 所 ...
- 定制jQuery File Upload为微博式单文件上传
原文链接:http://avnpc.com/pages/single-file-upload-component-by-jquery-file-upload jQuery File Upload是一个 ...
最新文章
- CES 2020前瞻:一份最全的趋势预测报告
- windows窗体(winform)中嵌入显示Excel工作表。
- syslog数据接收并处理
- poj1236-Tarjan算法
- springboot实现增量备份_SpringBoot canal数据同步解决方案
- php动态写入vue,Vue自定义动态组件使用详解
- Oracle 之 管理
- 大数据基础学习二:在VMware虚拟机上安装Ubuntu完整步骤及需要注意的问题(以VMware Workstation 15.1.0 Pro和Ubuntu18.04.3优麒麟版为例)
- 选择排序----详细算法分析
- quot;数据结构翻转课堂quot;答疑实录——链表
- 子网划分与IP地址的概念
- bat 文件 服务器,bat文件做成服务器
- ffmpeg主要数据结构及其之间的关系
- Java语言的Hook实现
- LeetCode-11-Container With Most Water
- windows通过注册表修改IP
- [Excel数据处理与分析实战技巧精粹].Excelhome.扫描版
- Vue打开动态html页面,vue.js中怎么打开新页面?
- verilog语法进阶
- 如何更好的使用搜索引擎“百度”(附电影福利)
热门文章
- (转载)JDOM/XPATH编程指南
- call,apply
- java正则表达式提取字符串中的数字
- SQLServer 优化SQL语句 in 和not in的替代方案
- struts 2读书笔记-----struts2的开发流程
- JS模拟的Ping程序 (Web Ping)
- Python从菜鸟到高手(1):初识Python
- c# .Net 缓存 使用System.Runtime.Caching 做缓存 平滑过期,绝对过期
- 1.10-linux三剑客之sed命令详解及用法
- [转]使用Navicat for Oracle工具连接oracle的