一直想掌握一门前端技术，于是想跟着张天宇老师学习，便开始学习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. Nginx主要功能

    Nginx主要功能: 1.反向代理2.负载均衡3.HTTP服务器(包含动静分离)4.正向代理 一.反向代理 反向代理应该是 Nginx 做的最多的一件事了,什么是反向代理呢,以下是百度百科的说法:反向 ...

  2. .NET中使用Redis总结 —— 1.Redis搭建

    注:关于如何在windows,linux下配置redis,详见这篇文章:) 下载地址:http://redis.io/download Redis官方是不支持windows的,只是 Microsoft ...

  3. LeeCode数组问题（一）

    LeeCode 27:移除元素 题目描述: 给你一个数组 nums 和一个值 val,你需要 原地 移除所有数值等于 val 的元素,并返回移除后数组的新长度length. 不要使用额外的数组空间,你 ...

  4. .NET周报 【4月第2期 2023-04-08】

    国内文章 LRU缓存替换策略及C#实现 https://www.cnblogs.com/eventhorizon/p/17290125.html 这篇文章讲述了缓存替换策略,特别是LRU算法.LRU算 ...

  5. python：selenium爬取boss网站被关小黑屋

    问题描述:使用selenium访问次数过多,被boss反爬封掉IP,这种方式有什么好一点的解决方法,首次可以用图形验证解封,今天访问次数过多,被关进了小黑屋 首次让我用图形界面解封 不过还好,手动解封 ...

  6. spring事务里面开启线程插入，报错了是否会回滚?

    1.前言 一道非常有意思的面试题目.大概是这样子的,如果在一个事务中,开启线程进行插入更新等操作,如果报错了,事务是否会进行回滚 2.代码 示例1 @RequestMapping("/tes ...

  7. Linux 根据名称自动kill掉当前相关进程

    ps aux | grep app | grep -v "grep" | awk '{print $2}' | xargs -r kill

  8. 保姆级教程：用GPU云主机搭建AI大语言模型并用Flask封装成API，实现用户与模型对话

    导读 在当今的人工智能时代,大型AI模型已成为获得人工智能应用程序的关键.但是,这些巨大的模型需要庞大的计算资源和存储空间,因此搭建这些模型并对它们进行交互需要强大的计算能力,这通常需要使用云计算服务 ...

  9. Vue中插槽的使用

    1.作用:让父组件可以向子组件指定位置插入html结构,也是一种组件间通信的方式,适用于 父组件 ===> 子组件 . 2.分类:默认插槽.具名插槽.作用域插槽 3.使用方式: ①默认插槽    ...

  10. 文章学习：TPRE：分布式门限代理重加密

    学习文章:TPRE:分布式门限代理重加密 前言 成方金科新技术实验室与隐语团队合作,构建了"基于国密的分布式门限代理重加密算法TPRE",为用户提供了一种安全.高效.自主可控的数据 ...