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。
image

后面四段脚本：前三个都为引入React库所需要的js文件，分别是React库，这个是核心。
第二个是引入react-dom 用于react支持操作DOM，如果不知道DOM是什么可以新开窗口百度搜索一下，相信很快就可以明白。
第三个是babel.min.js这个是用来进行转化你的jsx文件为js文件使用的，后期我们就不会写这种直接的html后缀结尾的前端文件，而是直接写jsx文件，这里先进行解释一下。

image

这是第4段脚本，这里就是我么写React代码的地方了，脚本标签显示的是babel,这就是我们要写jsx，而不再是js了。
我们创建了一个HelloWorld的标签的样式为h1，将他赋值为VDOM,这里的名字随意，但是这里便于理解就命名为虚拟DOM。于是，我们已经声明了一个这样的标签，我们要将他渲染到真实的DOM上的话，就需要使用ReactDOM来进行render渲染，第一个参数是需要渲染的对象，第二个表是渲染的地方，这里的话是使用的前面创建的test盒子对象。

写好后我们在vscode中使用插件open in liver进行打开,如下图所示。
image

这样在浏览器中就可以看到渲染的效果了：左上角一个h1属性的Hello React就出现了。
image

基础篇01结束

posted @ 2022-11-11 15:20  程序员hg  阅读(107)  评论(0)  编辑  收藏  举报