"React + Redux front-end development actual combat" Notes 1: Hello World case does not involve construction projects React

This section does not involve the realization of a project to build the Hello World.

React [first page] Hello World

Source address: https: //jsfiddle.net/allan91/2h1sf0ky/8/

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Hello World</title>

    <script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script>

    <script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script>

    <script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>

</head>

<body>

    <div id="root"></div>

    <script type="text/babel">

      ReactDOM.render(

        <h1>Hello World</h1>, //JSX格式

        document.getElementById("root")

      );

    </script>

</body>

</html>

The above code is very simple, direct reference react.min.js on the CDN (ContentDeliveryNetwork), react-dom.min.js and babel.min.js these three scripts can be used directly. The only caveat is the need to write a script type attribute is text / babel. Browser to open the HTML file to display Hello World copywriting.

Note 1: CDN (Content Delivery Network) is built on top of network content distribution network, relying deployed around the edge server, load balancing through the center of the platform, content distribution, scheduling and other functional modules, allowing users to obtain the required content of the nearest reduce network congestion and improve user access response speed and hit rate.

Note 2: react.main.js React is the core code package; react-dom.min.js is related to the DOM package, mainly for DOM rendering the virtual becomes real to the document DOM, of course, there are other methods; babel.min.js is used to compile the code not supported by the browser build tools. Wherein min indicates that this is to be a compressed JS libraries.

Or to write JavaScript code on the outside, such as the new main.js in the root directory:

ReactDOM.render(

        <h1>Hello World</h1>,                          //JSX格式

        document.getElementById("root")

);

Then introduced in the HTML file:

<script type=“text/babel” src=“./main.js”></script>

"One Piece" in Roger said, everyone has their own chance appearances! In the future, React might be forgotten in the wave front end of history, but today, React design ideas influenced countless developers, the moment it is part of its time! !

"React + Redux front-end development actual combat" Notes 1: Hello World case does not involve construction projects React

Guess you like