本小节实现一个不涉及项目构建的Hello World。
【React的第一个Hello World网页】
源码地址：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>
上面代码很简单，直接引用CDN（ContentDeliveryNetwork）上的react.min.js、react-dom.min.js和babel.min.js这3个脚本即可直接使用。唯一需要注意的就是script的type属性需要写为text/babel。浏览器打开这个HTML文件即可展示Hello World文案。
注1：CDN（Content Delivery Network）是构建在网络之上的内容分发网络，依靠部署在各地的边缘服务器，通过中心平台的负载均衡、内容分发、调度等功能模块，使用户就近获取所需内容，降低网络拥塞，提高用户访问响应速度和命中率。
注2：react.main.js是React的核心代码包；react-dom.min.js是与DOM相关的包，主要用于把虚拟DOM渲染到文档变为真实DOM，当然还有其他一些方法；babel.min.js是用来编译还不被浏览器支持的代码的编译工具。其中min表示这是被压缩过的JS库。
或者将JavaScript代码写在外面，比如在根目录下新建main.js：
- ReactDOM.render(
-
- <h1>Hello World</h1>, //JSX格式
-
- document.getElementById("root")
-
- );
然后在HTML文件内引入：
- <script type=“text/babel” src=“./main.js”></script>
《海贼王》中罗杰说，每个人都有自己出场的机会！在将来，React可能会在前端历史的浪潮中被人遗忘，但今天，React的设计思想影响了无数的开发者，当下正是属于它的时代！！
经验首页