准备：

官网：https://facebook.github.io/react/downloads.html

Github地址：https://github.com/facebook/react

首先需要引入的3个库：

react.js 是 React 的核心库，

react-dom.js 是提供与 DOM 相关的功能，

browser.min.js 的作用是将 JSX 语法转为 JavaScript 语法

而且凡是使用 JSX 的地方，script都要加上 type="text/babel"

第一个实例：

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8" />

    <title>Hello React</title>

    <script src="build/react.js"></script>

    <script src="build/react-dom.js"></script>

    <script src="build/browser.min.js"></script>

</head>

<body>

    <div id="example"></div>

    <script type="text/babel">

        // ** Your code goes here! **

         ReactDOM.render(

        <h1>Hello, world!</h1>, document.getElementById('example')

        );

    </script>

</body>

</html>

效果：

React的第一个例子的更多相关文章

  1. react实战系列 —— react 的第一个组件

    react 的第一个组件 写了 react 有一个半月,现在又有半个月没写了,感觉对其仍旧比较陌生. 本文分两部分,首先聊一下 react 的相关概念,然后不使用任何语法糖(包括 jsx)或可能隐藏底 ...

  2. ElasticSearch 5学习(5)——第一个例子（很实用）

    想要知道ElasticSearch是如何使用的,最快的方式就是通过一个简单的例子,第一个例子将会包括基本概念如索引.搜索.和聚合等,需求是关于公司管理员工的一些业务. 员工文档索引 业务首先需要存储员 ...

  3. MXNet学习～第一个例子～跑MNIST

    反正基本上是给自己看的,直接贴写过注释后的代码,可能有的地方理解不对,你多担待,看到了也提出来(基本上对未来的自己说的),三层跑到了97%,毕竟是第一个例子,主要就是用来理解MXNet怎么使用. #导 ...

  4. emberjs学习一(环境和第一个例子)

    code { margin: 0; padding: 0; white-space: pre; border: none; background: transparent; } code, pre t ...

  5. Qt之QCustomPlot绘图（一）配置和第一个例子

    最近一个用Qt开发的项目需要绘制坐标曲线,我在老师的指点下使用了QCustomPlot这个插件,使用方法简单,功能还算不错. 可是在网上找了很多资料和博文都只是将官方提供的例子演示一遍,没有系统全面的 ...

  6. 键盘过滤第一个例子ctrl2cap（4.1~4.4）汇总，测试

    键盘过滤第一个例子ctrl2cap(4.1~4.4)汇总,测试 完整源代码 /// /// @file ctrl2cap.c /// @author wowocock /// @date 2009-1 ...

  7. springmvc的介绍和第一个例子

    SpringMVC是Spring 框架自带的一部分. SpringMVC底层基于:Servlet Struts2底层基于:filter struts1底层基于:Servlet spring 各模块 我 ...

  8. 04springMVC结构，mvc模式，spring-mvc流程，spring-mvc的第一个例子，三种handlerMapping，几种控制器，springmvc基于注解的开发，文件上传，拦截器，s

     1. Spring-mvc介绍 1.1市面上流行的框架 Struts2(比较多) Springmvc(比较多而且属于上升的趋势) Struts1(即将被淘汰) 其他 1.2  spring-mv ...

  9. mapReducer第一个例子WordCount

    mapreducer第一个例子,主要是统计一个目录下各个文件中各个单词出现的次数. mapper package com.mapreduce.wordCount; import java.io.IOE ...

随机推荐

  1. 湖南省第六届省赛题 Biggest Number (dfs+bfs，好题)

    Biggest Number 时间限制:1000 ms  |  内存限制:65535 KB 难度:4 描述 You have a maze with obstacles and non-zero di ...

  2. php极速后台开发框架LotusAdmin

    组件:基于thinkphp5.0.12+layui2.1版本 演示站点:https://www.lotusadmin.top/账号 : admin密码:123456 官方QQ交流群:606645328 ...

  3. JS 判断浏览器类型，获取位置信息，让手机震动

    判断是否是安卓 var isAndroid = /Android/i.test(navigator.userAgent); 判断是否是IOS系统 var isIOS = /iPhone|iPad|iP ...

  4. 【BZOJ 3289】 3289: Mato的文件管理 （莫队）

    3289: Mato的文件管理 Time Limit: 40 Sec  Memory Limit: 128 MBSubmit: 2819  Solved: 1185 Description Mato同 ...

  5. 【51Nod 1815】【算法马拉松 23】调查任务

    http://www.51nod.com/onlineJudge/questionCode.html#!problemId=1815 tarjan缩点后在DAG上递推即可. 每个点维护所有根到它的路径 ...

  6. AtCoder Regular Contest 81

    链接 C.Make a Rectangle 给出一堆木棍的长度 从中选4根,询问在能围成矩形的情况下,矩形的最大面积 开个map统计一下就行 分正方形和矩形分别统计即可 复杂度$O(n \log n) ...

  7. HDU 5514 Frogs（容斥原理）

    [题目链接] http://acm.hdu.edu.cn/showproblem.php?pid=5514 [题目大意] m个石子围成一圈,标号为0~m-1,现在有n只青蛙,每只每次跳a[i]个石子, ...

  8. bzoj 1211: [HNOI2004]树的计数 -- purfer序列

    1211: [HNOI2004]树的计数 Time Limit: 10 Sec  Memory Limit: 162 MB Description 一个有n个结点的树,设它的结点分别为v1, v2, ...

  9. bzoj 1231: [Usaco2008 Nov]mixup2 混乱的奶牛 -- 状压DP

    1231: [Usaco2008 Nov]mixup2 混乱的奶牛 Time Limit: 10 Sec  Memory Limit: 162 MB Description 混乱的奶牛 [Don Pi ...

  10. 树形DP+（分组背包||二叉树,一般树,森林之间的转换）codevs 1378 选课

    codevs 1378 选课 时间限制: 1 s  空间限制: 128000 KB  题目等级 : 钻石 Diamond  题目描述 Description 学校实行学分制.每门的必修课都有固定的学分 ...