上一期我们使用了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. 【quickhybrid】API规划

    前言 当一切就绪后,就要开始进行API规划,这一块是整个Hybrid框架中非常重要的内容,毕竟对于前端页面来说,只会通过JS API来调用功能. 基本上,API调用起来是否方便简洁影响着整个体验. 这 ...

  2. path和classpath细节

    从学习java的最初我们就被要求先设置path变量和classpath变量.但是这两个环境变量到底有什么作用呢? 1.path环境变量 path环境变量的主要作用是告诉操作系统到哪里去寻找某个程序,如 ...

  3. 前端MVC Vue2学习总结（二）——Vue的实例、生命周期与Vue脚手架（vue-cli）

    一.Vue的实例 1.1.创建一个 Vue 的实例 每个 Vue 应用都是通过 Vue 函数创建一个新的 Vue 实例开始的: var vm = new Vue({ // 选项 }) 虽然没有完全遵循 ...

  4. Android系统拍照之后回显并且获取文件路径

    /*调用拍照返回*/ case PHOTO_REQUEST_GALLERY: if (data != null) { Uri uri = data.getData(); String photopat ...

  5. 【python】字典dict

  6. 【java】文件复制的简单实现

    package 文件操作; import java.io.File; import java.io.FileInputStream; import java.io.FileOutputStream; ...

  7. ABP 找不到版本为 (>= 1.0.0-preview1-27891) 的包 Microsoft.AspNetCore.SignalR 错误

    错误描述: 下载ABP模板项目3.4.1的版本(当前最新版本),编译加载nuget包Microsoft.AspNetCore.SignalR时会报如下错误: 严重性     代码         说明 ...

  8. ABP PUT、DELETE请求错误405.0 - Method Not Allowed 因为使用了无效方法(HTTP 谓词) 引发客户端错误 No 'Access-Control-Allow-Origin' header is present on the requested resource

    先请检查是否是跨域配置问题,请参考博客:http://www.cnblogs.com/donaldtdz/p/7882225.html 一.问题描述 ABP angular前端部署后,查询,新增都没问 ...

  9. C语言应用程序的内存图

    1.综述 c语言应用程序加载到内存,这时它所占据的内存分为四个区,分别为栈Stack,堆Heap,静态存储区Static Area,代码存储区Code Area,这四个区分别放置应用程序的不同部分,从 ...

  10. 447. Number of Boomerangs

    Given n points in the plane that are all pairwise distinct, a "boomerang" is a tuple of po ...