上一期我们使用了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. nginx+redis缓存微信的token数据

    上一篇文章我们讲了如何在负载均衡的项目中使用redis来缓存session数据,戳这里. 我们在项目的进展过程中,不仅需要缓存session数据,有时候还需要缓存一些别的数据,比如说,微信的acces ...

  2. MySQL 导入外部数据时报错：1153: Got a packet bigger than 'max_allowed_packet' 解决方案

    MySQL 导入外部数据时报错:1153: Got a packet bigger than 'max_allowed_packet' 解决方案 zoerywzhou@163.com http://w ...

  3. Inception使用详解

    一.Inception简介一款用于MySQL语句的审核的开源工具,不但具备自动化审核功能,同时还具备执行.生成对影响数据的回滚语句功能. 基本架构: 二.Inception安装 1.软件下载 下载链接 ...

  4. 通过SQL创建一个有主键自动递增有默认值不为空有注释的表

    -- create database db_std_mgr_sys; use db_std_mgr_sys; create table student( std_id bigint not null ...

  5. JPA实体类注解、springboot测试类、lombok的使用

    前提准备: 搭建一个springboot项目,详情请参见其它博客:点击前往 1 引入相关依赖 web.mysql.jpa.lombok <?xml version="1.0" ...

  6. cd 命令详解

    cd 命令 作用:  cd 用来切换目录,目录表示法可为绝对路径或相对路径, 若目录名称省略,则变换至使用者的登陆目录. ~ 可表示为家目录,.为当前目录,..为上级目录 语法: cd (选项)(参数 ...

  7. java的运行机制（基础）

    1:高级语言的运行机制: 我们编程都是用的高级语言(写汇编和机器语言的大牛们除外),计算机不能直接理解高级语言,只能理解和运行机器语言,所以必须要把高级语言翻译成机器语言,计算机才能运行高级语言所编写 ...

  8. K：正则表达式之基础简介

    正则表达式(regular expression 简称regex) 是一种工具,和其它工具一样是为了解决某一类问题而发明的.正则表达式是一些用来匹配和处理文本的字符串.平时主要用于查找和替换符合相应模 ...

  9. git环境搭建以及第一个PHP程序

    使用mac下的sublime等编辑器帮助代码编写,然后到linux下运行网页代码.可以通过/vagrant共享目录完成,但是默认apache默认目录为/var/www/html,不想改变该目录,同时为 ...

  10. Lambda 表达式，Java中应用Lambda 表达式

    一.Lambda 表达式 简单来说,编程中提到的 lambda 表达式,通常是在需要一个函数,但是又不想费神去命名一个函数的场合下使用,也就是指匿名函数. 链接:知乎 先举一个普通的 Python 例 ...