五分鐘學習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