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 ...
随机推荐
- 使用 screw(螺丝钉) 快速生成数据库文档
一.框架介绍 回想起那个去年的7月份,第一份实习,组长让我写一份金蝶云的SQL文档,当时一看2000多张表,当时就猛吸一根烟,然后去gitee看看有没有好的框架快速生成 SQL 文档 ,由此找到了 s ...
- 10.CAS实现单点登录
1.总结: 昨天主要是了解和编写了CAS实现单点登录的代码: CAS实现单点登录的流程:用户访问资源服务器,先跳转到验证服务器验证身份通过后,认证服务器发送一个ticket给用户,用户拿着ticket ...
- .NET中使用RabbitMQ总结
目前业界使用较多的消息队列组件有RabbitMQ.ActiveMQ.MSMQ.kafka.zeroMQ等 之间的对比可以看这里 之前搭过ActiveMQ环境带源码 点击这里 后来发现RabbitMQ性 ...
- 手动编写Swagger文档与部署指南
Swagger介绍 在Web开发中,后端开发者在完成接口开发后,需要给前端相应的接口使用说明,所以一般会写一份API文档.一般来说,有两种方式提供API接口文档,一种是利用插件在代码中自动生成,另一种 ...
- 27-lazy loading（懒加载和预加载）
懒加载 document.getElementById('btn').onclick = function () { // 懒加载:当文件需要使用时才加载 import(/* webpackChunk ...
- 吃透Redis面试八股文
Redis连环40问,绝对够全! Redis是什么? Redis(Remote Dictionary Server)是一个使用 C 语言编写的,高性能非关系型的键值对数据库.与传统数据库不同的是,Re ...
- RocketMQ的简单使用
大家好,我是Leo!今天来和大家分享RocketMQ的一些用法. 领域模型介绍 Producer: 用于生产消息的运行实体. Topic: 主题,用于消息传输和存储的分组容器. MessageQueu ...
- latex-作业模板（自用，因为记不住语法55）
\documentclass[12pt, a4paper, oneside]{ctexart} \usepackage{amsmath, amsthm, amssymb, bm, graphicx, ...
- Spring中TranslationDefinition接口规定的七种类型的事务传播行为及其意思
- 2023-02-28：moonfdd/ffmpeg-go是用go语言绑定ffmpeg的库，目前是github上最好用的库。请用go语言将yuv文件编码为h264文件。
2023-02-28:moonfdd/ffmpeg-go是用go语言绑定ffmpeg的库,目前是github上最好用的库.请用go语言将yuv文件编码为h264文件. 答案2023-02-28: 使用 ...