《React+Redux前端开发实战》—1.5 Hello World实战训练
1.5 Hello World实战训练
遵循传统，在学习React前先带领读者构建一个基于Webpack的Hello World应用。
1.5.1 不涉及项目构建的Hello World
本节实现一个不涉及项目构建的Hello World。
React的第一个Hello World网页示例（源码地址是https://jsfiddle.net/allan91/2h1sf0ky/8/）：
<!DOCTYPE html>
<html>
<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（Content-Delivery-Network）上的react.min.js、react-dom.min.js和babel.min.js这3个脚本即可直接使用。唯一需要注意的是，script的type属性需要写为text/babel。在浏览器中打开这个HTML文件即可展示Hello World文案。
说明：CDN（Content Delivery Network）是构建在网络之上的内容分发网络，依靠部署在各地的边缘服务器，通过中心平台的负载均衡、内容分发、调度等功能模块，使用户就近获取所需内容，降低网络拥塞，提高用户访问响应速度和命中率。
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>
- 点赞
- 收藏
- 关注作者
评论（0）