《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选项 ...
随机推荐
- JavaScript双重排序
前言:正好这两天正在做一个功能,需要在前台进行排序展示,因为是动态的,后台排序不能搞定,只能咋前台通过JS来进行排序展示,所以我们用sort()来解决这个问题,sort不仅能给数组,对象,集合进行简单 ...
- init.uniform / unit.normal
均匀分布nn.init.uniform(tensor,a=0,b=1)tensor -n维的torch.Tensora 均匀分布的下界,默认值为0b 均匀分布的上界,默认值为1 正态分布torcn.n ...
- Educational Codeforces Round 77 比赛总结
比赛情况 我太菜了 A题 加减乘除不会 B题 二元一次方程不会 C题 gcd不会 就会一个D题二分答案大水题,本来想比赛最后一分钟来一个绝杀,结果 Wrong Answer on test 4 比赛总 ...
- win2008 ad域控搭建
一.前言 1.1 AD 域服务 什么是目录(directory)呢? 日常生活中使用的电话薄内记录着亲朋好友的姓名.电话与地址等数据,它就是 telephone directory(电话目录):计算机 ...
- 解决“Caused by: org.gradle.api.plugins.UnknownPluginException: Plugin with id 'org.springframework.boot' not found.”
升级老项目spring boot 和 cloud版本之后 gradle clean 报错:“Caused by: org.gradle.api.plugins.UnknownPluginExcepti ...
- Lambda表达式匿名类实现接口方法
Lamb表达式匿名类实现接口方法 import java.util.ArrayList; public class HandlerDemo{ public static void main(Strin ...
- priority_queue与multiset
感觉c++最有用的stl是bitset.堆(优先队列)和平衡树,其他的都可以手打 这里主要讲一下堆和平衡树的基本用法和区别所在 priority_queue 堆/优先队列 定义: priority_q ...
- js-计算textarea可剩余的字数？？？
效果图 HTML: JS:
- 状态管理-vuex
1.使用vuex // 使用vuex // 第一步:装包npm i vuex -S // 第二步: import Vuex from 'vuex' Vue.use(Vuex) // 第三步: cons ...
- 与HTTP协作的Web服务器——代理、网关、隧道
1.虚拟主机 (1)HTTP/1.1规范允许一台HTTP服务器搭建多个Web站点: (2)在互联网上,域名通过DNS服务映射到IP地址(域名解析)之后访问目标网站,即当请求发送到服务器时,已经是以IP ...