上一期我们使用了React官方的脚手架运行React应用。大家可能会觉得这种方法很繁琐，需要配置各种第三方插件。JQuery时代的前端真是让人怀念。这一期，我就带领大家创建一个“怀旧版”的React应用。

一. 文件结构一览

这次项目的文件结构相当简单，一个index.html和scripts文件夹。在scripts放着必要的文件babel.min.js、react.development.js、react-dom.development.js。值得注意的是react提供了development和production两种模式下的js文件。他们分别代表用于开发环境和生产环境。

在scripts文件夹内添加完这三个文件之后，我们在index.html输入一下几行代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8" />

    <title>Hello World</title>

    <script src="scripts/react.development.js"></script>

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

    <script src="scripts/babel.min.js"></script>

</head>

<body>

    <div id="root"></div>

    <script type="text/babel">

      ReactDOM.render(

        <h1>Hello, world!</h1>,

        document.getElementById('root')

      );

    </script>

</body>

</html>

其中<script type="text/babel">是第二代javascript编译器，用于将ES6的新一代语法转化成为ES5现在版本浏览器可以执行的语言。想要深入了解请见：[传送门]

二. 如何获取相关文件：

在React官网提供了CDN连接服务，想要直接使用请看该链接

三. 总结

这一期《五分钟学习React》我们讲了：

  1. 在页面中直接引入React框架，需要三个文件react、react-dom和babel。
  2. babel文件的作用，用来将ES6语法转义成为ES5的现有浏览器可执行文件。当然这里是直接编译JSX。

下一期，我们准备讲解一下JSX，大家尽情期待！

五分钟学习React(三)：纯HTML代码搭建React应用的更多相关文章

  1. 五分钟学习React(一)： 什么是React

    在前端的世界里,我们要处理的文件不是太多,而是太少.每天开发项目将html.css.js.图片.字体文件都像大杂烩一般加载都网页上.当应用变得越来越臃肿的时候,会发现js用了那么多全局变量,css的继 ...

  2. .net reactor 学习系列(三)---.net reactor代码自动操作相关保护功能

    原文:.net reactor 学习系列(三)---.net reactor代码自动操作相关保护功能         接上篇,上篇已经学习了界面的各种功能以及各种配置,这篇准备学习下代码控制许可证. ...

  3. 五分钟学习React(二)：我的第一个Hello World

    我的第一个React应用 接着我们上一期所讲的内容,通过create-react-app脚手架创建的应用,它是基于ES6的语法生成的.我们清空src目录下的文件,并分别创建index.js和index ...

  4. 五分钟学习React(五)：React两种构建应用方式选择

    经过这四期的讲解,我们从Hello World应用入手,解释了React最重要的概念JSX,以及两种不同模式的应用构建方法.这一讲我们着重对比传统模式和新模式下的React项目构建,从而为初学者提供学 ...

  5. 五分钟学习React(四)：什么是JSX

    JSX,即javscript XML,是js内定义的一套XML语法.目前是使用babel作为JSX的编译器.这也是在前几期中载入babel的原因. Facebook引入JSX是为了解决前端代码工程复杂 ...

  6. 五分钟学习React（六）：元素（Element）和组件（Component）

    俗话说"万丈高楼平地起",从这一期开始,我们将使用基于Webpack+Babel的React学习React框架中的一些基础概念.在学习React的过程中经常会把Element.Cl ...

  7. SonarQube学习（三）- 项目代码扫描

    一.前言 元旦三天假,两天半都在玩86版本DNF,不得不说,这个服真的粘度太高了,但是真的很良心. 说明: 注册账号上线100w点券,一身+15红字史诗装备以及+21强化新手武器.在线泡点一分钟888 ...

  8. Spring学习系列(三) 通过Java代码装配Bean

    上面梳理了通过注解来隐式的完成了组件的扫描和自动装配,下面来学习下如何通过显式的配置的装配bean 二.通过Java类装配bean 在前面定义了HelloWorldConfig类,并使用@Compon ...

  9. 五分钟学习Java8的流编程

    1.概述 Java8中在Collection中增加了一个stream()方法,该方法返回一个Stream类型.我们就是用该Stream来进行流编程的: 流与集合不同,流是只有在按需计算的,而集合是已经 ...

随机推荐

  1. adb连接手机报错解决方案汇总(win7)

    >>adb devices常见错误:   >>解决方案汇总 检查端口是否占用:netstat -ano | findstr 5037 | findstr LISTENING 检 ...

  2. angularf封装echarts

    前言:angular中快速使用echarts 在html使用ehart很简单,你只需要引入文件和按照官方例子按照对应参数配置和数据填充就Ok了,那么在angular中怎么使用eharts(可以使用ec ...

  3. gulp实现公共html代码复用

    在开发网站的时候,尤其是类似于官网这样的项目,顶部都会有一个导航栏,底部会有一些其他信息,而这两个部分在每一个页面都是有的.我们不可能在每个html页面都写一遍,这样也不便后期维护等操作,所以可以把顶 ...

  4. 【MySQL】数据库字段类型

    1.数值型 整型 TINYINT SMALLINT MEDIUMINT INT BIGINT 浮点型 FLOAT(m,n) - m表示总位数,n表示小数位数. DOUBLE(m,n) DECIMAL( ...

  5. JavaScript数字例子，二分法，冒泡排序

    先看一下两个例子: 十个成绩,求总分,最高分,最低分 //输入10个成绩,求总分,最高,最低 var arr=new Array(67,45,56,12,90,98,23,43,56,99,97); ...

  6. Java面试题汇总

    第一阶段:三年我认为三年对于程序员来说是第一个门槛,这个阶段将会淘汰掉一批不适合写代码的人.这一阶段,我们走出校园,迈入社会,成为一名程序员,正式从书本 上的内容迈向真正的企业级开发.我们知道如何团队 ...

  7. MAMP升级mysql5.6到5.7

    RT 1.先把mamp环境停掉 sudo sh /Applications/MAMP/bin/stop.sh 2.然后使用brew安装mysql5.7 brew install mysql 3.默认安 ...

  8. Docker（八）：Docker端口映射

    1.随机映射 docker run -P -d --name mynginx1 nginx [root@node1 ~]# docker ps -l CONTAINER ID IMAGE COMMAN ...

  9. [编织消息框架][netty源码分析]14 PoolChunk 的 PoolSubpage

    final class PoolSubpage<T> implements PoolSubpageMetric { //该page分配的chunk final PoolChunk<T ...

  10. C# 给DateTime赋值正确方式

    DateTime xxx = new DateTime(2007,1,1,21,21,21); string time = new DateTime(2007, 1, 1, 21, 21, 21).T ...