上一期我们使用了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. Ubuntu 报错 sudo: unable to resolve host

    Ubuntu 在每次执行命令的时候,会报如下错误: $ sudo sudo: unable to resolve host iZ2zecsdy8flu603bmdg1bZ iZ2zecsdy8flu6 ...

  2. 如何修改maven默认仓库（即repository）的路径

    如何修改maven默认仓库(即repository)的路径 1  在maven的安装目录下,修改Eclipse(或IntelliJ IDEA)的MAVEN的存储位置,点击Browser按钮,选择set ...

  3. Function：html结构转字符串形式显示

    //Html结构转字符串形式显示 支持<br>换行 function ToHtmlString(htmlStr) { return toTXT(htmlStr).replace(/\&am ...

  4. 瞎j8封装第二版之数据层的封装

    看了以前写的代码,对就是下面这个 手把手封装数据层之DataUtil数据库操作的封装 觉得以前写的代码好烂啊!!!,重新理了一下思路,写得更规范和简练,应该效率也会高很多,用了一下下午写的连接池(半废 ...

  5. android中的五大布局(控件的容器，可以放button等控件)

    一.android中五大布局相当于是容器,这些容器里可以放控件也可以放另一个容器,子控件和布局都需要制定属性. 1.相对布局:RelativeLayout @1控件默认堆叠排列,需要制定控件的相对位置 ...

  6. bzoj 3626: [LNOI2014]LCA

    Description 给出一个n个节点的有根树(编号为0到n-1,根节点为0).一个点的深度定义为这个节点到根的距离+1.设dep[i]表示点i的深度,LCA(i,j)表示i与j的最近公共祖先.有q ...

  7. ln 命令详解

    ln 命令 作用:它的功能是为某一个文件在另外一个位置建立一个同步的链接 参数:必要参数:  -b 删除,覆盖以前建立的链接  -d 允许超级用户制作目录的硬链接  -f 强制执行  -i 交互模式, ...

  8. 在一个终端后台运行的进程在新的终端中使用job不会被发现

    我在一个终端后台运行了一个程序.之后由于工作需要又新开了一个新的终端.在新的终端中,我想查看后台程序的运行状态,输入jobs时,发现没有后台任务运行.难道我的程序死掉了?我接着top了下,发现我的后台 ...

  9. 使用plenv安装perl，并使其支持多线程

    plenv与pyenv.rbenv等都是同类型软件中非常好用的,这三个软件不仅命名类似,操作方式也相差无几,节约了很多学习的成本,所以非常推荐: 安装使用plenv: git clone git:// ...

  10. CRUL学习记录

    在学习web相关知识的时候,了解到crul可以对网址进行请求,并可以看到网站的响应. 1.curl获取web网站返回的网页内容 命令:curl http://XXXXX 2.curl查看web网站的s ...