五分钟学习React(三)：纯HTML代码搭建React应用

时间 2019-11-26

标签五分 5分学习 react html 代码搭建应用栏目 React 繁體版

原文原文链接

上一期咱们使用了React官方的脚手架运行React应用。你们可能会以为这种方法很繁琐，须要配置各类第三方插件。JQuery时代的前端真是让人怀念。这一期，我就带领你们建立一个“怀旧版”的React应用。javascript

一. 文件结构一览

此次项目的文件结构至关简单，一个index.html和scripts文件夹。在scripts放着必要的文件babel.min.js、react.development.js、react-dom.development.js。值得注意的是react提供了development和production两种模式下的js文件。他们分别表明用于开发环境和生产环境。
html

在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如今版本浏览器能够执行的语言。想要深刻了解请见：[传送门]java

二. 如何获取相关文件：

在React官网提供了CDN链接服务，想要直接使用请看该连接react

三. 总结

这一期《五分钟学习React》咱们讲了：segmentfault

在页面中直接引入React框架，须要三个文件react、react-dom和babel。
babel文件的做用，用来将ES6语法转义成为ES5的现有浏览器可执行文件。固然这里是直接编译JSX。

下一期，咱们准备讲解一下JSX，你们尽情期待！浏览器