React框架学习基础篇-HelloReact-01
一直想掌握一门前端技术，于是想跟着张天宇老师学习，便开始学习React，以此来记录一下我的学习之旅。
学习一门新的技术首先是去官网看看，React官网链接是[https://zh-hans.reactjs.org/]。
可以看到非常的清爽，React的特点简介，见名知意不做过多介绍
- 声明式
- 组件化
- 一次学习，跨平台编写
一般学习一门新东西都是先写一个HelloWorld来看看效果，于是我们之类也是写一个HelloWorld来展示。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!-- 准备好容器 -->
<div id="test"></div>
<!-- 引入 React 库 -->
<script type="text/javascript" src="../js/react.development.js"></script>
<!-- 引入react-dom 用于react支持操作DOM -->
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<!-- 引入jsx,用于将jsx转为js -->
<script type="text/javascript" src="../js/babel.min.js"></script>
<script type="text/babel"> //此处一定要写babel，表示写的是jsx
//1.创建虚拟DOM
const VDOM = <h1>Hello React</h1>; //此处一定不要写引号，表示是jsx
//2.渲染虚拟DOM到页面上
ReactDOM.render(VDOM, document.getElementById('test'));
</script>
</body>
</html>
我们从头开始看起代码其实就是新建一个html文件，这个没什么好说的。然后主要看的body标签里面的东西。
第一个是创建一个div盒子，并取名字id为test。
后面四段脚本：前三个都为引入React库所需要的js文件，分别是React库，这个是核心。
第二个是引入react-dom 用于react支持操作DOM，如果不知道DOM是什么可以新开窗口百度搜索一下，相信很快就可以明白。
第三个是babel.min.js这个是用来进行转化你的jsx文件为js文件使用的，后期我们就不会写这种直接的html后缀结尾的前端文件，而是直接写jsx文件，这里先进行解释一下。
这是第4段脚本，这里就是我么写React代码的地方了，脚本标签显示的是babel,这就是我们要写jsx，而不再是js了。
我们创建了一个HelloWorld的标签的样式为h1，将他赋值为VDOM,这里的名字随意，但是这里便于理解就命名为虚拟DOM。于是，我们已经声明了一个这样的标签，我们要将他渲染到真实的DOM上的话，就需要使用ReactDOM来进行render渲染，第一个参数是需要渲染的对象，第二个表是渲染的地方，这里的话是使用的前面创建的test盒子对象。
写好后我们在vscode中使用插件open in liver进行打开,如下图所示。
这样在浏览器中就可以看到渲染的效果了：左上角一个h1属性的Hello React就出现了。
基础篇01结束
React框架学习基础篇-HelloReact-01的更多相关文章
- ABP框架实践基础篇之开发UI层
返回总目录<一步一步使用ABP框架搭建正式项目系列教程> 说明 其实最开始写的,就是这个ABP框架实践基础篇.在写这篇博客之前,又回头复习了一下ABP框架的理论,如果你还没学习,请查看AB ...
- Docker虚拟化实战学习——基础篇（转）
Docker虚拟化实战学习——基础篇 2018年05月26日 02:17:24 北纬34度停留 阅读数:773更多 个人分类: Docker Docker虚拟化实战和企业案例演练 深入剖析虚拟化技 ...
- 手撸ORM浅谈ORM框架之基础篇
好奇害死猫 一直觉得ORM框架好用.功能强大集众多优点于一身,当然ORM并非完美无缺,任何事物优缺点并存!我曾一度认为以为使用了ORM框架根本不需要关注Sql语句如何执行的,更不用关心优化的问题!!! ...
- [转]C++学习–基础篇（书籍推荐及分享）
C++入门 语言技巧,性能优化 底层硬货 STL Boost 设计模式 算法篇 算起来,用C++已经有七八年时间,也有点可以分享的东西: 以下推荐的书籍大多有电子版.对于技术类书籍,电子版并不会带来一 ...
- Laravel学习基础篇之--路由
终于还是决定再多学一门重量级框架,当然首选必备还是被称为最优雅的Web开发框架--Laravel 对于框架的入门,首先了解它的路由规则是先前必备的,以下是laravel 中几种常见的基础路由规则 // ...
- Web框架django基础篇
基本配置及学习 路由(Urls).视图(Views).模板(Template).Model(ORM). 简介 Django 是一个由 Python 写成的开放源代码的 Web 应用框架.它最初是被开 ...
- Bat 脚本学习 (基础篇)
[转]Bat 脚本学习 2015-01-05 14:13 115人阅读 评论(0) 收藏 举报 基础部分: ============================================== ...
- [性能测试] locust学习-基础篇
在本文中,我将介绍一个名为Locust的性能测试工具.我将从Locust的功能特性出发,结合实例对Locust的使用方法进行介绍. 概述 Locust主要有以下的功能特性: 在Locust测试框架中, ...
- java多线程系类：基础篇：01基本概念：
这个系类的内容全部来源于http://www.cnblogs.com/skywang12345/p/3479024.html.特别在此声明!!! 本来想直接看那位作家的博客的,但还是复制过来. 多线程 ...
- ios学习基础篇一
搜集的不错的oc学习资料 大概总结: http://my.oschina.net/luoguankun/blog/208526 详细教程: http://www.w3cschool.cc/ios/io ...
随机推荐
- 自建kms2种方法，亲测有效
你还在用网上那种坑爹的Ghost盗版系统吗?内置各种辣鸡.流氓软件,新系统?纯净版Ghost系统?不存在的~ 在开始自建KMS服务器之前,我觉得很有必要给大家分享一个神站,没错就是MSDN! 地址:h ...
- 【Vue】前端解决跨域问题
Vue解决跨域问题 什么是跨域:违背了同源策略,即协议名.主机名.端口号必须一致.浏览器与服务器之间存在跨域问题,而服务器与服务器之间由于通过Http通信是不存在跨域问题的. 如图所示,浏览器 ...
- Android Studio中的一些常见控件
Android Studio是一款非常流行的用于开发Android应用程序的集成开发环境(IDE).它提供了许多内置控件,使开发人员可以轻松创建应用程序界面和功能.在本文中,我们将介绍Android ...
- 网络框架重构之路plain2.0(c++23 without module) 环境
接下来本来就直接打算分享框架重构的具体环节,但重构的代码其实并没有完成太多,许多的实现细节在我心中还没有形成一个定型.由于最近回归岗位后,新的开发环境需要自己搭建,搭建的时间来说花了我整整一天的时间才 ...
- 百度飞桨(PaddlePaddle)- 张量（Tensor）
飞桨 使用张量(Tensor) 来表示神经网络中传递的数据,Tensor 可以理解为多维数组,类似于 Numpy 数组(ndarray) 的概念.与 Numpy 数组相比,Tensor 除了支持运行在 ...
- 2020-12-09：TCP中，慢启动是什么？
福哥答案2020-12-09: 简单回答:乘法增大. 中级回答:cwnd拥塞窗口.rwnd接收窗口.MSS最大报文段长度.ssthresh慢开始门限.使用慢开始算法后,每经过一个传输轮次(即往返时延R ...
- 2022-06-19：给出n个数字，你可以任选其中一些数字相乘，相乘之后得到的新数字x， x的价值是x的不同质因子的数量。 返回所有选择数字的方案中，得到的x的价值之和。 来自携程。
2022-06-19:给出n个数字,你可以任选其中一些数字相乘,相乘之后得到的新数字x, x的价值是x的不同质因子的数量. 返回所有选择数字的方案中,得到的x的价值之和. 来自携程. 答案2022-0 ...
- transaction.atomic装饰器
from django.shortcuts import renderfrom django.http import HttpResponsefrom django.views.generic imp ...
- MongoDB + SpringBoot 的基础CRUD、聚合查询
1.数据准备 1.1.springboot导包 springboot版本:2.7.10 点击查看代码 <!--mongodb的包--> <dependency> <gro ...
- 2015年蓝桥杯C／C++大学B组省赛真题(星系炸弹)
题目描述: 在X星系的广袤空间中漂浮着许多X星人造"炸弹",用来作为宇宙中的路标. 每个炸弹都可以设定多少天之后爆炸. 比如:阿尔法炸弹2015年1月1日放置,定时为15天,则它在 ...