《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选项 ...
随机推荐
- java http httpclient
HttpClient post get 洗衣店 微信扫码支付
- Windows 7、Windows XP SP3关闭DEP堆栈执行保护
Windows XP SP3 在Windows XP SP3中,关闭DEP的方法是: 编辑C:\boot.ini,你大概会看到如下内容 [boot loader] timeout=30 default ...
- JAVA笔记17-容器之一 图、Collection接口、Iterator接口（重要）
掌握1136: (1)1个图 (2)1个类:Collections (3)3个知识点:For(了解),Generic泛型,Auto-boxing/unboxing(自动打包/解包) (4)6个接口:C ...
- luogu P2661 信息传递 x
P2661 信息传递 题目描述 有n个同学(编号为1到n)正在玩一个信息传递的游戏.在游戏里每人都有一个固定的信息传递对象,其中,编号为i的同学的信息传递对象是编号为Ti同学. 游戏开始时,每人都只知 ...
- 【BZOJ3894】 文理分科
Description 文理分科是一件很纠结的事情!(虽然看到这个题目的人肯定都没有纠 结过) 小P所在的班级要进行文理分科.他的班级可以用一个n*m的矩阵进行 描述,每个格子代表一个同学的座位. ...
- OverFeat：基于卷积网络的集成识别、定位与检测
摘要:我们提出了一个使用卷积网络进行分类.定位和检测的集成框架.我们展示了如何在ConvNet中有效地实现多尺度和滑动窗口方法.我们还介绍了一种新的深度学习方法,通过学习预测对象边界来定位.然后通过边 ...
- Django简单操作
一.静态文件配置 静态文件配置 STATIC_URL = '/static/' STATICFILES_DIRS = [ os.path.join(BASE_DIR,'static') ] # 暴露给 ...
- 在Eclipse中搭建Android开发环境
忙活了两天多的时间,终于在Eclipse中成功搭建了Android开发环境,着实不易啊!! 原本我用的编译器是MyEclipse的,但是从网上找不到如何在MyEclipse中搭建环境,于是乎就换了Ec ...
- Json和XML的一些差别
XML: 扩展标记语言,可以用来标记数据.定义数据类型, 优缺点: 1.格式统一,符合标准: 2.容易与其他系统进行远程交互,数据共享比较方便 3.XML文件庞大,文件格式复杂,传输占带宽,较复杂 J ...
- Windows 下安装Apache web服务器
1.Apache 服务器的下载 进入下载页面:http://httpd.apache.org/download.cgi 为提高下载速度,镜像选择清华大学的服务器(http://mirrors.tuna ...