一直想掌握一门前端技术，于是想跟着张天宇老师学习，便开始学习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的更多相关文章

  1. ABP框架实践基础篇之开发UI层

    返回总目录<一步一步使用ABP框架搭建正式项目系列教程> 说明 其实最开始写的,就是这个ABP框架实践基础篇.在写这篇博客之前,又回头复习了一下ABP框架的理论,如果你还没学习,请查看AB ...

  2. Docker虚拟化实战学习——基础篇（转）

    Docker虚拟化实战学习——基础篇 2018年05月26日 02:17:24 北纬34度停留 阅读数:773更多 个人分类: Docker   Docker虚拟化实战和企业案例演练 深入剖析虚拟化技 ...

  3. 手撸ORM浅谈ORM框架之基础篇

    好奇害死猫 一直觉得ORM框架好用.功能强大集众多优点于一身,当然ORM并非完美无缺,任何事物优缺点并存!我曾一度认为以为使用了ORM框架根本不需要关注Sql语句如何执行的,更不用关心优化的问题!!! ...

  4. [转]C++学习–基础篇（书籍推荐及分享）

    C++入门 语言技巧,性能优化 底层硬货 STL Boost 设计模式 算法篇 算起来,用C++已经有七八年时间,也有点可以分享的东西: 以下推荐的书籍大多有电子版.对于技术类书籍,电子版并不会带来一 ...

  5. Laravel学习基础篇之--路由

    终于还是决定再多学一门重量级框架,当然首选必备还是被称为最优雅的Web开发框架--Laravel 对于框架的入门,首先了解它的路由规则是先前必备的,以下是laravel 中几种常见的基础路由规则 // ...

  6. Web框架django基础篇

    基本配置及学习  路由(Urls).视图(Views).模板(Template).Model(ORM). 简介 Django 是一个由 Python 写成的开放源代码的 Web 应用框架.它最初是被开 ...

  7. Bat 脚本学习 (基础篇)

    [转]Bat 脚本学习 2015-01-05 14:13 115人阅读 评论(0) 收藏 举报 基础部分: ============================================== ...

  8. [性能测试] locust学习-基础篇

    在本文中,我将介绍一个名为Locust的性能测试工具.我将从Locust的功能特性出发,结合实例对Locust的使用方法进行介绍. 概述 Locust主要有以下的功能特性: 在Locust测试框架中, ...

  9. java多线程系类：基础篇：01基本概念：

    这个系类的内容全部来源于http://www.cnblogs.com/skywang12345/p/3479024.html.特别在此声明!!! 本来想直接看那位作家的博客的,但还是复制过来. 多线程 ...

  10. ios学习基础篇一

    搜集的不错的oc学习资料 大概总结: http://my.oschina.net/luoguankun/blog/208526 详细教程: http://www.w3cschool.cc/ios/io ...

随机推荐

  1. kubernetes（k8s）命名空间一直Terminating

    root@hello:~# kubectl get ns NAME STATUS AGE auth Terminating 34m default Active 23h kube-node-lease ...

  2. [Linux]CPU架构/指令集：RISC / CISC | arm | amd | X86/i386 | aarch64

    1 前言 本文是解决在软件开发.软件交付过程中,常常需要找寻与服务器硬件的CPU架构适配的软件包时,开发者和交付者又时常摸不着头脑.[迷迷糊糊]地就下载了某个所谓"适配".&quo ...

  3. LeeCode哈希问题（二）

    LeeCode 454: 四数相加II 题目描述 给你四个整数数组 nums1.nums2.nums3 和 nums4,数组长度均为 n ,请你计算有多少个元组 (i, j, k, l) 能满足: \ ...

  4. ORA-17629: Cannot connect to the remote database server

    rman远程连接目标库,提示报错ORA-17629: Cannot connect to the remote database server,首先排查网络问题是否通路,结果发现目标端防火墙是开着的, ...

  5. 浅谈对属性描述符__get__、__set__、__delete__的理解

    1.属性描述符的基础介绍 1.1 何为属性描述符? 属性描述符是一种Python语言中的特殊对象,用于定义和控制类属性的行为.属性描述符可以通过定义__get__.__set__.__delete__ ...

  6. CommunityToolkit.Mvvm8.1 IOC依赖注入控制反转(5)

    本系列文章导航 https://www.cnblogs.com/aierong/p/17300066.html https://github.com/aierong/WpfDemo (自我Demo地址 ...

  7. 信息论之从熵、惊奇到交叉熵、KL散度和互信息

    一.熵(PRML) 考虑将A地观测的一个随机变量x,编码后传输到B地. 这个随机变量有8种可能的状态,每个状态都是等可能的.为了把x的值传给接收者,需要传输⼀个3⽐特的消息.注意,这个变量的熵由下式给 ...

  8. LAL v0.35.4发布，OBS支持RTMP H265推流，我跟了

    Go语言流媒体开源项目 LAL 今天发布了v0.35.4版本. LAL 项目地址:https://github.com/q191201771/lal 老规矩,简单介绍一下: ▦ 一. OBS支持RTM ...

  9. Mysql中如果建立了索引，索引所占的空间随着数据量增长而变大，这样无论写入还是查询，性能都会有所下降，怎么处理？

    索引所占空间的增长确实会对MySQL数据库的写入性能和查询性能造成影响,这主要是由于索引数据过多时会导致磁盘I/O操作变得非常频繁,从而使性能下降.为此,可以采取以下几种方式来减缓这种影响: 1. 限 ...

  10. win11 计算器的进制转换