《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选项 ...
随机推荐
- 二叉树中序遍历，先序遍历，后序遍历（递归栈，非递归栈，Morris Traversal）
例题 中序遍历94. Binary Tree Inorder Traversal 先序遍历144. Binary Tree Preorder Traversal 后序遍历145. Binary Tre ...
- u-boot中bss段的使用
近日在调试uboot时,发现了一个现象,即在relocate_code前如果给未初始化或者初始化值为0的变量赋值的话,则在relocate_code后程序无法正常执行.经过学习,恶补如下知识 BSS段 ...
- HDU - 4358 Boring counting (树上启发式合并/线段树合并)
题目链接 题意:统计树上每个结点中恰好出现了k次的颜色数. dsu on tree/线段树合并裸题. 启发式合并1:(748ms) #include<bits/stdc++.h> usin ...
- Rsync服务端部署流程
Rsync服务端部署流程 Rsync服务端部署流程: 一.rsync服务端配置流程 配置rsync配置文件/etc/rsyncd.conf 创建同步的本地目录/dingjian 并根据需要 ...
- python之路day13--迭代器
迭代器 我们已经知道,可以直接作用于for循环的数据类型有以下几种: 一类是集合数据类型,如list.tuple.dict.set.str等: 一类是generator,包括生成器和带yield的ge ...
- 【UOJ#450】[集训队作业2018] 复读机
题目链接 题目描述 群里有\(k\)个不同的复读机.为了庆祝平安夜的到来,在接下来的\(n\)秒内,它们每秒钟都会选出一位优秀的复读机进行复读.非常滑稽的是,一个复读机只有总共复读了\(d\)的倍数次 ...
- 消息中间件--kafka（1）安装部署
一.概念 1.什么是kafka Kafka是由Apache软件基金会开发的一个开源的分布式流处理平台,由LinkedIn公司开发,使用 Scala和Java编写.Kafka是一个分布式.分区的.多副本 ...
- 【NOIP2016提高A组集训第13场11.11】最大匹配
题目 mhy12345学习了二分图匹配,二分图是一种特殊的图,其中的点可以分到两个集合中,使得相同的集合中的点两两没有连边. 图的"匹配"是指这个图的一个边集,里面的边两两不存在公 ...
- mysql57 在windows 下无法修改 大小写设置
参考: https://blog.csdn.net/ceciliawanghenan/article/details/82916662 清空data文件,我的data文件在programdata\My ...
- Ubuntu下安装CUDA8.0及nvidia驱动
参考:https://blog.csdn.net/qq_35379989/article/details/80147630 cuda的历史版本下载地址:https://developer.nvidia ...