单文件快速体验使用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.04KB
react-dom.min.js 130.29 KB
babel.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>
单文件快速体验使用react输出hello_world的更多相关文章
- React官网首页demo(单文件实现版)
本博客实现React官网首页上展示的demo, 为了方便直接采用单文件的形式, 如果想完整集成 在自己的项目中, 可以参考React官网的安装指南, 安装Create React App. hello ...
- webpack入坑之旅（五）加载vue单文件组件
这是一系列文章,此系列所有的练习都存在了我的github仓库中vue-webpack,在本人有了新的理解与认识之后,会对文章有不定时的更正与更新.下面是目前完成的列表: webpack入坑之旅(一)不 ...
- 一丢丢学习之webpack4 + Vue单文件组件的应用
之前刚学了一些Vue的皮毛于是写了一个本地播放器https://github.com/liwenchi123000/Local-Music-Player,如果觉得ok的朋友可以给个star. 就是很简 ...
- C# 日志记录分级功能使用 按照日期，大小，或是单文件存储
本文将使用一个Nuget的一个组件库来实现一个简单强大的日志记录功能,包采用线程安全实现,所有的记录在后台完成,即使您在前台调用100万次方法,耗时也不过1000ms(具体时间依照电脑性能决定),支持 ...
- 定制jQuery File Upload为微博式单文件上传
日志未经声明,均为AlloVince原创.版权采用『 知识共享署名-非商业性使用 2.5 许可协议』进行许可. jQuery File Upload是一个非常优秀的上传组件,主要使用了XHR作为上传方 ...
- 开源作品-PHP写的JS和CSS文件压缩利器(单文件绿色版)-SuMinify_PHP_1_5
前言: 网站项目需要引用外部文件以减小加载流量,而且第一次加载外部资源文件后,其他同域名的页面如果引用相同的地址,可以利用浏览器缓存直接读取本地缓存资源文件,而不需要每个页面都下载相同的外部资源文件. ...
- Vue系列（三）：组件及数据传递、路由、单文件组件、vue-cli脚手架
上一篇:Vue系列(二):发送Ajax.JSONP请求.Vue生命周期及实例属性和方法.自定义指令与过渡 一. 组件component 1. 什么是组件? 组件(Component)是 Vue.js ...
- PHP表单生成器,快速生成现代化的form表单,快速上手
form-builder PHP表单生成器,快速生成现代化的form表单.包含复选框.单选框.输入框.下拉选择框等元素以及省市区三级联动.时间选择.日期选择.颜色选择.树型.文件/图片上传等功能. 详 ...
- ASP.NET MVC 4 (十一) Bundles和显示模式--asp.net mvc中 @Scripts.Render("~/bundles/jquery")是什么意思? 在布局文件中使用Scripts.Render()输出脚本包，Styles.Render()输出风格包：
ASP.NET MVC 4 (十一) Bundles和显示模式 ASP.NET MVC 4 引入的js打包压缩功能.打包压缩jquery目录下的文件,在布局文件中使用Scripts.Render()输 ...
随机推荐
- go context包的WithTimeout和WithCancel的使用
1.WaitGroup 它是一种控制并发的方式,它的这种方式是控制多个goroutine同时完成. func main() { var wg sync.WaitGroup wg.Add(2) go f ...
- hdu6035 Colorful Tree 树形dp 给定一棵树，每个节点有一个颜色值。定义每条路径的值为经过的节点的不同颜色数。求所有路径的值和。
/** 题目:hdu6035 Colorful Tree 链接:http://acm.hdu.edu.cn/showproblem.php?pid=6035 题意:给定一棵树,每个节点有一个颜色值.定 ...
- Java反射小结
一.什么是反射? 在运行状态中,对于任意一个类,都能够获取到这个类的所有属性和方法,对于任意一个对象,都能够调用它的任意一个方法和属性(包括私有的方法和属性),这种动态获取的信息以及动态调用对象的方法 ...
- [Linux 学习] Centos 使用yum出现Loaded plugins: refresh-packagekit, security
sudo vim /etc/yum/pluginconf.d/fastestmirror.conf enabled=0 //把1改为0 verbose=0 socket_timeout=3 hos ...
- Android显示全局Dialog
1.需求:Dialog只能依附于某个具体的Activity显示,当我们需要一个全局的不依赖于某个Activity的Dialog时,应该怎么创建?类似于QQ消息提醒框 2.分析:我们可以在Service ...
- 3D游戏引擎〇 開始
游戏循环: 初始化:运行一些主要的初始化操作,如内存分配,资源获取.从磁盘载入数据等. 进入游戏循环:进入主游戏循环.用户不断地运行动作,知道退出主循环为止. 读取玩家输入:处理玩家输入,或将其存储到 ...
- angular_文本变化
注意,在input中用ng-change的时候,一定要结合着ng-model用 开头,注意在这里添加了ng-app <!DOCTYPE html> <html lang=" ...
- 如何转义CSV文件中的逗号
CSV全称是:Comma Separated Values 或者 Character Separated Values. 尽管第一种说法更常见,但我觉得还是第二种说法更确切一些,因为你可以使用其它字符 ...
- resolution will not be reattempted until the update interval of vas has elap
转自:http://kia126.iteye.com/blog/1785120 maven在执行过程中抛错: 引用 ... was cached in the local repository, re ...
- vue+node+mongoDB 火车票H5（一）---准备工作，基本配置
前端菜鸟一枚,由于公司项目用到了vue,我虽然参与了,但是很多环境配置和流程还不是特别清楚,就想自己个人业余做个webapp看看, 对于完全新手而言,很多坑会纠结很久,所以想借此机会自己做的同时记录各 ...