一直想掌握一门前端技术，于是想跟着张天宇老师学习，便开始学习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. k8s加入新的master节点出现etcd检查失败

        背景:     昨天在建立好新的集群后,出现了新的问题,其中的一台master节点无法正常工作.虽然可以正常使用,但是就出现了单点故障,今天在修复时出现了etcd健康检查自检没通过.      ...

  2. LeeCode 栈与队列问题（一）

    LeeCode 20: 有效的括号 题目描述 给定一个只包括 '(', ')', '{', '}', '[', ']' 的字符串s,判断字符串是否有效. 有效字符串满足: 左括号必须用相同类型的右括号 ...

  3. Azure DevOps（二）Azure Pipeline 集成 SonarQube 维护代码质量和安全性

    一,引言 对于今天所分析的 SonarQube,首先我们得了解什么是 SonarQube ? SonarQube 又能帮我们做什么?我们是否在项目开发的过程中遇到人为 Review 代码审核规范?带着 ...

  4. node服务端

    一,node起服务+数据交互+中间件 什么是node express koa node是js在后端运行时的一个环境 express,koa是基于node的框架,快速构建web应用 前后端交互方式 1. ...

  5. C# 几种获取电脑内存、CPU信息的方案

    计数器.WMI 获取设备的内存信息,如系统可用运行内存: 1 public static async Task<double> GetMemoryAvailableAsync(FileSi ...

  6. 如何在SpringBoot项目中兼容Jersey和SpringMVC框架?

    文章目录 Jersey框架介绍 常用的注解: SpringBoot中SpringMVC兼容Jersey 整合Jersey REST(Representational State Transfer)表象 ...

  7. 如何通过C#/VB.NET代码将PowerPoint转换为HTML

    利用PowerPoint可以很方便的呈现多媒体信息,且信息形式多媒体化,表现力强.但难免在某些情况下我们会需要将PowerPoint转换为HTML格式.因为HTML文档能独立于各种操作系统平台(如Un ...

  8. Prism Sample 18-NavigationCallback

    同17相比,在导航方法中增加了回调函数 private void Navigate(string navigatePath) { if (navigatePath != null) _regionMa ...

  9. 用R语言进行时间序列ARMA模型分析

    应用时间序列 时间序列分析是一种重要的数据分析方法,应用广泛.以下列举了几个时间序列分析的应用场景: 1.经济预测:时间序列分析可以用来分析经济数据,预测未来经济趋势和走向.例如,利用历史股市数据和经 ...

  10. ai问答：使用vite如何配置多入口页面

    Vite 是一个 web 开发构建工具,它可以用于开发单页应用和多页应用.要在 Vite 中配置多入口,可以: 在 vite.config.js 中定义多个 entry 入口: export defa ...