上一期我们使用了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. 三、spring cloud 服务提供与调用

    如何使用eureka服务注册中心,搭建一个简单的服务端注册服务,客户端去调用服务使用. 案例中有三个角色:服务注册中心.服务提供者.服务消费者,eureka单机版启动既可,流程是首先启动注册中心,服务 ...

  2. 四.RabbitMQ之发布/订阅（Publish/Subscribe）

    一.基础知识点 在上述章节中,我们理解的RabbitMQ是基于如下这种模式运作的. 而事实上,这只是我们简单化了的模型的结果,真正的模型应该是这样的. P:Producer 生产者,生产消息,把它放进 ...

  3. python __getattr__ 巧妙应用

    在之前的文章有提到__getattr__函数的作用: 如果属性查找(attribute lookup)在实例以及对应的类中(通过__dict__)失败, 那么会调用到类的__getattr__函数, ...

  4. Pycharm配置（一）

    Pycharm作为一款强力的Python IDE,在使用过程中感觉一直找不到全面完整的参考手册,因此决定对官网的Pycharm教程进行简要翻译,与大家分享. 1.准备工作 官网下载 2.如何选择Pyc ...

  5. IOS学习8——常用框架学习汇总

    我们在学习和code过程中经常会用到一些框架,本文将会持续更新最新学习和用到的框架 布局框架: Masonry介绍与使用实践:快速上手Autolayout iOS MJRefresh下拉.上拉刷新自定 ...

  6. java 异常处理机制（java 编程思想）

    一.概念 "异常"这个词有"我对此感到意外"的意思.问题出现了,你也许并不清楚该如何处理,但你的确知道不应该置之不理:你要停下来,看看是不是有别人或在别的地方, ...

  7. n年前，我没钱但年轻，我怕n年后我老时，还是一无所成——2017我的收获和反思

    记得当年我刚从学校里出来时,应该和现在的95后差不多,当时还是很惶恐的,怕找不到工作,怕无法挣到足够的钱买房子支撑家庭,(当然还有其它的担心点),却唯独没意识到自己拥有着最宝贵的财富:年轻. 年轻意味 ...

  8. 支持各种特殊字符的 CSV 解析类 (.net 实现)(C#读写CSV文件)

    CSV是一种十分简洁的数据结构,在DOTNET平台实际使用中发现微软官方并没有提供默认的方法,而网上好多例子发现实现并不严谨甚至一些含有明显错误,所以后面自己实现了一个读写工具类,这里发出来希望方便后 ...

  9. 关于asp.net web form 和 asp.net mvc 的区别

    asp.net web forms 有什么缺陷? 1.视图状态臃肿:服务器和客户端传输过程中包含了大量的试图状态——在现在的web程序中甚至多达几百kb,而且每次往返都会请求,导致服务器请求带宽增加, ...

  10. 细说MyEclipse调试

     在程序出现问题时,我们需要找到并解决掉这些恼人的Bug,才能使程序顺利的运行下去.但是,当代码很多,程序很大的时候,找起来就很麻烦. 所以,我们需要借助工具——Eclipse/MyEclipse中的 ...