React框架的介绍、特点、安装及基本使用流程-程序员宅基地

技术标签： react.js React框架 vue.js javascript

一、react介绍

官网：React (docschina.org)

react是由facebook前端开发团队开发和维护的js框架

react的实现功能类似VUE，但是由于国外的开发风格，导致在react上，并没有对数据渲染的步骤进行封装，需要开发者更多的使用es6的语法手动完成数据渲染，所以，代码难度比VUE高。

二、react的优缺点

优点：

1.一切皆组件：在react中几乎都是使用组件进行开发，好处：提高代码的复用率和可维护性

2.速度快：在react中提供了虚拟DOM机制（virtual DOM）

3.跨浏览器兼容：在react中采用虚拟DOM，不直接解析真实的DOM，解决了跨域浏览器兼容的问题，甚至在IE8中都可以使用。

4.同构，纯粹的JavaScript：在整个项目开发中，几乎都是使用JavaScript进行开发

5.单向数据流：在react中提供了两个架构：flux和redux来构建单向数据流

缺点：

1.不是一个完整的框架

2.react顶多在MVC中算V层（视图层），一般需要结合reactRouter和redux来构建完整的项目。

三、react的安装及使用

cdn：进入官网，按图顺序点击

之后会出现一个html文档，这是react的基本使用文档。可以点击鼠标右键选择另存为保存到桌面（或任意文件夹）。

红框圈住的是react在线cdn链接，没网不能使用。也可以复制红框内容在新的页面打开，把全部代码保存到本地。

用vscode打开此html文件，即可出现以下效果

此时的html全部代码为（注释为我个人理解）

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello World</title>
    <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>

    <!-- Don't use this in production: -->
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  </head>
  <body>
    <div id="root"></div>     <!-- 声明需要渲染的区域  -->
    <script type="text/babel">
    
      function MyApp() {
        return <h1>Hello, world!</h1>;
      }

      const container = document.getElementById('root');  // 捕获渲染区域
      const root = ReactDOM.createRoot(container);  //创建DOM元素
      root.render(<MyApp />);  //将DOM元素渲染到渲染区域当中

    </script>
  </body>
</html>

npm

npm init -y //初始化package.json

npm i react react-dom -S

本文链接：https://blog.csdn.net/qq_56715703/article/details/130288771

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

源代码图纸文档防泄密场景方案分析-程序员宅基地

文章浏览阅读161次，点赞5次，收藏3次。财务数据、员工信息、工资信息、客户和业务数据等被员工非法获取、外泄

Linux查磁盘大小命令,linux系统查看磁盘空间的命令是什么-程序员宅基地

文章浏览阅读2k次。linux系统查看磁盘空间的命令是【df -hl】，该命令可以查看磁盘剩余空间大小。如果要查看每个根路径的分区大小，可以使用【df -h】命令。df命令以磁盘分区为单位查看文件系统。本文操作环境：red hat enterprise linux 6.1系统、thinkpad t480电脑。(学习视频分享：linux视频教程)Linux 查看磁盘空间可以使用 df 和 du 命令。df命令df 以磁..._df -hl

Office & delphi_range[char(96 + acolumn) + inttostr(65536)].end[xl-程序员宅基地

文章浏览阅读923次。uses ComObj;var ExcelApp: OleVariant;implementationprocedure TForm1.Button1Click(Sender: TObject);const // SheetType xlChart = -4109; xlWorksheet = -4167; // WBATemplate xlWBATWorksheet = -4167_range[char(96 + acolumn) + inttostr(65536)].end[xlup]

若依 quartz 定时任务中 service mapper无法注入解决办法_ruoyi-quartz无法引入ruoyi-admin的service-程序员宅基地

文章浏览阅读2.3k次。上图为任务代码，在任务具体执行的方法中使用，一定要写在方法内使用SpringContextUtil.getBean()方法实例化Spring service类下边是ruoyi-quartz模块中util/SpringContextUtil.java(已改写)import org.springframework.beans.BeansException;import org.springframework.context.ApplicationContext;import org.s..._ruoyi-quartz无法引入ruoyi-admin的service

CentOS7配置yum源-程序员宅基地

文章浏览阅读2w次，点赞10次，收藏77次。yum，全称“Yellow dog Updater, Modified”，是一个专门为了解决包的依赖关系而存在的软件包管理器。可以这么说，yum 是改进型的 RPM 软件管理器，它很好的解决了 RPM 所面临的软件包依赖问题。yum 在服务器端存有所有的 RPM 包，并将各个包之间的依赖关系记录在文件中，当管理员使用 yum 安装 RPM 包时，yum 会先从服务器端下载包的依赖性文件，通过分析此文件从服务器端一次性下载所有相关的 RPM 包并进行安装。_centos7配置yum源