《React+Redux前端开发实战》笔记1：不涉及React项目构建的Hello World案例
本小节实现一个不涉及项目构建的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的设计思想影响了无数的开发者，当下正是属于它的时代！！
《React+Redux前端开发实战》笔记1：不涉及React项目构建的Hello World案例的更多相关文章
- React前端有钱途吗？《React+Redux前端开发实战》学起来
再不学React就真的跟不上大前端的形式了,目前几乎所有前端的招聘条件都是精通React者优先,看看拉勾网的React薪资,都是15K-20K,这个暑假,必须动起来了. 如果你熟悉JavaScript ...
- 《React+Redux前端开发实战》笔记3：基于Webpack构建的Hello World案例（下）
2．使用React编码 下面正式开始使用React来编写前端代码. (1)npm安装react和react-dom: npm install react react-dom -S (2)用下面代码替换 ...
- 《React+Redux前端开发实战》笔记2：基于Webpack构建的Hello World案例（上）
这次搭建分为两部分:一部分是前期必要配置,一部分是开发React代码. [基于Webpack的React Hello World项目] 1．前期必要配置 (1)首先要确保读者的开发设备上已经安装过No ...
- webpack+react+redux+es6开发模式---续
一.前言 之前介绍了webpack+react+redux+es6开发模式 ,这个项目对于一个独立的功能节点来说是没有问题的.假如伴随着源源不断的需求,前段项目会涌现出更多的功能节点,需要独立部署运行 ...
- webpack+react+redux+es6开发模式
一.预备知识 node, npm, react, redux, es6, webpack 二.学习资源 ECMAScript 6入门 React和Redux的连接react-redux Redux 入 ...
- React Native移动开发实战-5-Android平台的调试技巧
Android平台的调试和其他平台的调试也很类似,例如:在Android Studio打开的工程中,打开源码MainActivity.java,然后,将鼠标移至代码编辑区的左侧后,单击鼠标即可添加断点 ...
- React Native移动开发实战-4-Android平台的适配原理
打开Android开发工具Android Studio,选择菜单 Open an existing AndroidStudio project,打开ch04项目的android文件夹,如图5.8所示. ...
- React Native移动开发实战-3-实现页面间的数据传递
React Native使用props来实现页面间数据传递和通信.在React Native中,有两种方式可以存储和传递数据:props(属性)以及state(状态),其中: props通常是在父组件 ...
- React Native移动开发实战-2-如何调试React Native项目
在实际开发中,还有一个影响开发效率的重要因素:调试. 在1.4.3节中已经介绍了Enable Live Debugger的使用.本节来介绍另一个非常重要的调试选项:Debug JSRemotely选项 ...
随机推荐
- mysql远程不能连接问题
解决Navicat无法连接到腾讯云MySQL的问题 工具/原料 Navicat phpstudy 腾讯云 Xshell6 方法/步骤 1 1.首先远程连接进入服务器,在cmd中输入mysql ...
- 如何编写高质量的js代码--底层原理
转自: 如何编写高质量的 JS 函数(1) -- 敲山震虎篇 本文首发于 vivo互联网技术 微信公众号 链接:https://mp.weixin.qq.com/s/7lCK9cHmunvYlbm ...
- SP Flash Tool版本对应MTK处理器型号(SP Flash Tool 版本速查)
SP Flash Tool v3.1224.0.100 MT6516,MT6573,MT6573,MT6575,MT6575,MT6577, SP Flash Tool v3.1332.0.187 M ...
- NSMutableArray修改替换某个位置的元素
使用NSMutableArray的replaceObjectAtIndex方法.
- excel解决日常问题记录
=MOD(ROW(),2)和=TEXT(B2487-B2486,"[h]:mm:ss"),我利用excel分析出了延迟的数据 比较2个字符串是否一样:=EXACT(A2,F2) 公 ...
- 浅谈Android的资源编译过程
转载自 http://www.cnblogs.com/dyllove98/p/3144950.html 好长,记录下,一次看完感觉像没看一样 Android APK 一．APK的结构以及生成 APK是 ...
- 2018百度之星初赛B轮 p1m2
p1m2 Accepts: 954 Submissions: 4063 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 131072/1310 ...
- ubuntu下，VSCode采用cmake编译C++工程
首先在VSCode中下载CMake和CMake Tools两个插件. 选中CMake Tools,可以看到在VSCode中如何使用cmake编译C++工程的教程. 官网教程 最重要且最实用,看这个网址 ...
- 安装mariadb报错： Job for mariadb.service failed because the control process exited with error code. See "systemctl status mariadb.service" and "journalctl -xe" for details.
卸载和删除都使用过了,没有起到效果,然后用了如下的方案,进行解决: CentOS 从 Yum 源安装配置 Mariadb 2017.03.01 WangYan 学习笔记 热度 7℃ 一.安装 Mar ...
- Canvas 实现钟表
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...