看了下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的更多相关文章

  1. React官网首页demo(单文件实现版)

    本博客实现React官网首页上展示的demo, 为了方便直接采用单文件的形式, 如果想完整集成 在自己的项目中, 可以参考React官网的安装指南, 安装Create React App. hello ...

  2. webpack入坑之旅（五）加载vue单文件组件

    这是一系列文章,此系列所有的练习都存在了我的github仓库中vue-webpack,在本人有了新的理解与认识之后,会对文章有不定时的更正与更新.下面是目前完成的列表: webpack入坑之旅(一)不 ...

  3. 一丢丢学习之webpack4 + Vue单文件组件的应用

    之前刚学了一些Vue的皮毛于是写了一个本地播放器https://github.com/liwenchi123000/Local-Music-Player,如果觉得ok的朋友可以给个star. 就是很简 ...

  4. C# 日志记录分级功能使用 按照日期，大小，或是单文件存储

    本文将使用一个Nuget的一个组件库来实现一个简单强大的日志记录功能,包采用线程安全实现,所有的记录在后台完成,即使您在前台调用100万次方法,耗时也不过1000ms(具体时间依照电脑性能决定),支持 ...

  5. 定制jQuery File Upload为微博式单文件上传

    日志未经声明,均为AlloVince原创.版权采用『 知识共享署名-非商业性使用 2.5 许可协议』进行许可. jQuery File Upload是一个非常优秀的上传组件,主要使用了XHR作为上传方 ...

  6. 开源作品-PHP写的JS和CSS文件压缩利器(单文件绿色版)-SuMinify_PHP_1_5

    前言: 网站项目需要引用外部文件以减小加载流量,而且第一次加载外部资源文件后,其他同域名的页面如果引用相同的地址,可以利用浏览器缓存直接读取本地缓存资源文件,而不需要每个页面都下载相同的外部资源文件. ...

  7. Vue系列（三）：组件及数据传递、路由、单文件组件、vue-cli脚手架

    上一篇:Vue系列(二):发送Ajax.JSONP请求.Vue生命周期及实例属性和方法.自定义指令与过渡 一. 组件component 1. 什么是组件? 组件(Component)是 Vue.js ...

  8. PHP表单生成器,快速生成现代化的form表单,快速上手

    form-builder PHP表单生成器,快速生成现代化的form表单.包含复选框.单选框.输入框.下拉选择框等元素以及省市区三级联动.时间选择.日期选择.颜色选择.树型.文件/图片上传等功能. 详 ...

  9. 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()输 ...

随机推荐

  1. iOS 新手引导页图片适配及其尺寸大全

    早期新手引导页只需要几张图片就可以解决了,随着屏幕尺寸的的越来越多,新手引导页的尺寸适配起来越来越麻烦,否则就会出现尺寸不匹配,图片被拉伸的情况 目前应该是有2种方法来解决这个问题 方法1: 根据每款 ...

  2. VMware虚拟机实用经验总结十一条

    转:http://article.pchome.net/content-948404.html 1.VMware虚拟机实用经验之支持的Guest OS: VMWare支持如下Guest OS:MS-D ...

  3. redis 优缺点 使用场景

    1. 使用redis有哪些好处? (1) 速度快,因为数据存在内存中,类似于HashMap,HashMap的优势就是查找和操作的时间复杂度都是O(1) (2) 支持丰富数据类型,支持string,li ...

  4. 在java中，List是个接口，那实现List接口的类有哪些，有什么区别？

    在java中,List是个接口,那实现List接口的类有哪些,有什么区别? 解答: ArrayList是使用数组方式存储数据,此数组元素数大于实际存储的数据以便增加和插入元素,它们都允许直接按序号索引 ...

  5. XV Open Cup named after E.V. Pankratiev Stage 6, Grand Prix of Japan Problem J. Hyperrectangle

    题目大意: 给出一个$d$维矩形,第i维的范围是$[0, l_i]$. 求满足$x_1 + x_2 + ...x_d \leq s$ 的点构成的单纯形体积. $d, l_i \leq 300$ 题解: ...

  6. PHP 清除HTML代码、空格、回车换行符的函数

    function DeleteHtml($str) { $str = trim($str); $str = strip_tags($str,""); $str = ereg_rep ...

  7. Oozie安装与部署

    原创文章,转载请注明: 转载自http://www.cnblogs.com/tovin/p/3885162.html 安装基础环境: Hadoop – 2.2.0  Linux – Centos 6. ...

  8. php 对字符串的分块处理

    //如何把以下的字符串分成每一个小块, 如:2017.2.14\n我们都是中国人\n小日本 这样的为一个小块 $str = '2017.2.14 我们都是中国人 小日本 2017.2.15 订单取消 ...

  9. python uwsgi 部署以及优化

    这篇文章其实两个月之前就应该面世了,但是最近琐事.烦心事太多就一直懒得动笔,拖到现在才写 一.uwsgi.wsgi.fastcgi区别和联系 参见之前的文章 http://www.cnblogs.co ...

  10. Android开发：《Gradle Recipes for Android》阅读笔记(翻译)5.2——使用Android Testing Support Library进行测试

    问题: 你想要测试app的Android组件. 解决方案: 使用新的测试类实现JUnit风格的测试. 讨论: 测试像activities,services等的Android组件,需要将app部署到连接 ...