五分钟学习React(三)：纯HTML代码搭建React应用
上一期我们使用了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》我们讲了：
- 在页面中直接引入React框架，需要三个文件react、react-dom和babel。
- babel文件的作用，用来将ES6语法转义成为ES5的现有浏览器可执行文件。当然这里是直接编译JSX。
下一期，我们准备讲解一下JSX，大家尽情期待！
五分钟学习React(三)：纯HTML代码搭建React应用的更多相关文章
- 五分钟学习React(一)： 什么是React
在前端的世界里,我们要处理的文件不是太多,而是太少.每天开发项目将html.css.js.图片.字体文件都像大杂烩一般加载都网页上.当应用变得越来越臃肿的时候,会发现js用了那么多全局变量,css的继 ...
- .net reactor 学习系列(三)---.net reactor代码自动操作相关保护功能
原文:.net reactor 学习系列(三)---.net reactor代码自动操作相关保护功能 接上篇,上篇已经学习了界面的各种功能以及各种配置,这篇准备学习下代码控制许可证. ...
- 五分钟学习React(二)：我的第一个Hello World
我的第一个React应用 接着我们上一期所讲的内容,通过create-react-app脚手架创建的应用,它是基于ES6的语法生成的.我们清空src目录下的文件,并分别创建index.js和index ...
- 五分钟学习React(五)：React两种构建应用方式选择
经过这四期的讲解,我们从Hello World应用入手,解释了React最重要的概念JSX,以及两种不同模式的应用构建方法.这一讲我们着重对比传统模式和新模式下的React项目构建,从而为初学者提供学 ...
- 五分钟学习React(四)：什么是JSX
JSX,即javscript XML,是js内定义的一套XML语法.目前是使用babel作为JSX的编译器.这也是在前几期中载入babel的原因. Facebook引入JSX是为了解决前端代码工程复杂 ...
- 五分钟学习React（六）：元素（Element）和组件（Component）
俗话说"万丈高楼平地起",从这一期开始,我们将使用基于Webpack+Babel的React学习React框架中的一些基础概念.在学习React的过程中经常会把Element.Cl ...
- SonarQube学习（三）- 项目代码扫描
一.前言 元旦三天假,两天半都在玩86版本DNF,不得不说,这个服真的粘度太高了,但是真的很良心. 说明: 注册账号上线100w点券,一身+15红字史诗装备以及+21强化新手武器.在线泡点一分钟888 ...
- Spring学习系列(三) 通过Java代码装配Bean
上面梳理了通过注解来隐式的完成了组件的扫描和自动装配,下面来学习下如何通过显式的配置的装配bean 二.通过Java类装配bean 在前面定义了HelloWorldConfig类,并使用@Compon ...
- 五分钟学习Java8的流编程
1.概述 Java8中在Collection中增加了一个stream()方法,该方法返回一个Stream类型.我们就是用该Stream来进行流编程的: 流与集合不同,流是只有在按需计算的,而集合是已经 ...
随机推荐
- MyBatis_CURD
一.项目结构 二.代码实现 package com.jmu.bean; public class Student { private Integer id; private String name; ...
- Django的Models(三)
ORM操作的一些进阶的方法: ################################################################## # PUBLIC METHODS T ...
- 《程序设计方法》【PDF】下载
内容简介 <程序设计方法>主要以方法为主导,结合C语言,把程序设计方法学研究中若干成熟的理论和方法用通俗易懂的语言描述出来.<程序设计方法>还选取趣味性强.技巧性高.能够启发学 ...
- 【java】io流之字符输入流：java.io.Reader类及子类的子类java.io.FileReader
package 文件操作; import java.io.File; import java.io.FileReader; import java.io.IOException; import jav ...
- JavaWeb项目之电话本，两个版本，以及总结反思
使用技术: Oracle 数据库 前端后台: Servlet + jsp + JDBC + html + css + js 前端界面自定, 但一定实现需要的功能 实现功能: 用户可以登录 登录之后可以 ...
- ABP 用swagger UI测试API报401无权限访问问题
问题描述: 当我们用swagger UI对Web API 进行测试时报401错误 我们点开GET /api/services/app/Role/GetAll,输入参数 点击Try it out!按钮, ...
- Libevent源码分析 (1) hello-world
Libevent源码分析 (1) hello-world ⑨月份接触了久闻大名的libevent,当时想读读源码,可是由于事情比较多一直没有时间,现在手头的东西基本告一段落了,我准备读读libeven ...
- php项目报错 Warning: session_start(): open(D:/software/wamp/wamp/tmp\sess_msrjot7f32ciqb1p2hr4ahejg4, O_RDWR) f
今天一个php项目报错: Warning: session_start(): open(D:/software/wamp/wamp/tmp\sess_msrjot7f32ciqb1p2hr4ahejg ...
- 用node搭建简单的静态资源管理器
我们都知道,老牌的3p服务器都是自带静态资源管理器的.但是node不同,它没有web容器,它的路由地址和真实地址可以没有联系,所有node的优点,是可以把路由做得相当漂亮. 但静态资源管理器也是必不可 ...
- Docker安装入门 -- 中间件镜像
Docker安装入门 -- 中间件镜像 php-fpm 1.docker build -t csphere/php-fpm:5.4 . //在当前目录下创建镜像 2.docker run -d - ...