一直想掌握一门前端技术，于是想跟着张天宇老师学习，便开始学习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 的声明式API 到 GPT的 提示语

    命令式 命令式有时也称为指令式,命令式的场景下,计算机只会机械的完成指定的命令操作,执行的结果就取决于执行的命令是否正确.GPT 之前的人工智能就是这种典型的命令式,通过不断的炼丹,告诉计算机要怎么做 ...

  2. 脚本：bat批处理常用脚本

    windows下有很多场景需要编写批处理来解决问题,跟定时任务相结合使用更佳. 1.创建文件,md,mkdir都可以进行文件创建 set AwrPath=D:\OracleTabChk if not ...

  3. 【Vue项目】尚品汇（五）Detail组件开发 实现轮播图和放大镜效果

    1 基本准备工作 1.1 组件路由及数据准备 编写请求接口 api/index.js export const reqGetDetailInfo = (skuId ={}) => { retur ...

  4. SpringBoot 集成 Quartz + MySQL

    Quartz 简单使用 Java SpringBoot 中,动态执行 bean 对象中的方法 源代码地址 => https://gitee.com/VipSoft/VipBoot/tree/de ...

  5. SpringBoot应用集成微服务组件Nacos

    目录 springboot与微服务组件nacos Nacos服务快速启动 STS4 开发工具 Maven 环境配置 STS4开发工具引入Maven配置 Maven Repo配置阿里云镜像源 Sprin ...

  6. Java中方法的定义及注意事项

    一.方法 什么是方法: 方法(method)是程序中最小的执行单元 实际开发中,什么时候用到方法: 重复的代码.具有独立功能的代码可以抽取到方法中 实际开发中,方法有什么好处: 可以提高代码的复用性 ...

  7. RTSP&IGMP详解

                                                                                 RTSP协议 一.概述 1)RTSP(Real ...

  8. 第一章：PyTorch 入门

    第一章:PyTorch 入门 1.1 Pytorch 简介 1.1.1 PyTorch的由来 1.1.2 Torch是什么? 1.1.3 重新介绍 PyTorch 1.1.4 对比PyTorch和Te ...

  9. Netty服务端开发及性能优化

    作者:京东物流 王奕龙 Netty是一个异步基于事件驱动的高性能网络通信框架,可以看做是对NIO和BIO的封装,并提供了简单易用的API.Handler和工具类等,用以快速开发高性能.高可靠性的网络服 ...

  10. Rsync文件同步及备份

    Rsync文件同步及备份 目录 Rsync文件同步及备份 Rsync基本概述 远程文件传输 服务端口 Rsync的三种传输模式 本地方式(类似cp) 远程方式(类似scp) 守护进程(C/S结构) R ...