React框架的介绍、特点、安装及基本使用流程

这篇具有很好参考价值的文章主要介绍了React框架的介绍、特点、安装及基本使用流程。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一、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:进入官网,按图顺序点击

react框架,React框架,react.js,javascript,vue.js

 react框架,React框架,react.js,javascript,vue.js

react框架,React框架,react.js,javascript,vue.js 

react框架,React框架,react.js,javascript,vue.js 

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

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

react框架,React框架,react.js,javascript,vue.js

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

react框架,React框架,react.js,javascript,vue.js

此时的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://www.toymoban.com/news/detail-812047.html

到了这里,关于React框架的介绍、特点、安装及基本使用流程的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • React 基本介绍

    目录 1、React是什么 2、React 三大颠覆性的特点 2.1 组件 2.2 JSX 2.3 Virtual DOM 3、Flux 架构(redux) 3.1 Flux 3.2 redux 4、打包工具(webpack) 4.1 webpack与RequireJS、browserify 4.2 模块规范 4.3 非 JavaScript 模块支持 4.4 webpack 的特点与优势 React 是 Facebook 推出的一个 JavaScript 库,它的口号就是

    2024年02月08日
    浏览(44)
  • react---react router 5 基本使用

    目录 1.路由介绍 2.路由使用 3.路由组件和一般组件 4.Switch 单一匹配 5.解决二级路由样式丢失的问题 6.路由精准匹配和模糊匹配 7.Redirect路由重定向 1.路由介绍 路由是根据不同的 URL 地址展示不同的内容或页面,在 SPA 应用中,大部分页面结果不改变,只改变部分内容的使用。

    2024年02月09日
    浏览(32)
  • 请简述React是什么?React的主要特点有哪些?React中有哪些主要组件?

    React是一个用于构建用户界面的JavaScript库,它由Facebook开发并开源。React的主要特点是其数据驱动和组件化的设计理念。它允许开发者将复杂的界面分解为简单的组件,并将这些组件以数据流的方式组合在一起,使得组件的状态和行为可以根据数据的变化而自动更新。React还提

    2024年02月14日
    浏览(46)
  • 面试题-React(一):React是什么?它的主要特点是什么?

    探索React:前端开发中的重要角色与主要特点 引言: 在现代前端开发领域,React已经成为最受欢迎和广泛使用的JavaScript库之一。它由Facebook开发并于2013年首次发布。随着时间的推移,React在开发社区中获得了强大的支持和认可。本篇博客将深入探讨React是什么,以及它的主要

    2024年02月13日
    浏览(43)
  • react的特点

    React的特点包括以下几个方面: 组件化:React将用户界面分解成小而独立的组件,每个组件都有自己的状态和属性。通过组合这些组件,可以构建复杂而灵活的用户界面。 虚拟DOM:React使用虚拟DOM(Virtual DOM)来提高性能。它通过将真实DOM的变化与操作进行比较,并最小化对实

    2024年02月15日
    浏览(34)
  • React Hooks 基本使用

    class 组件如果业务复杂,很难拆分和重构,很难测试;相同业务逻辑分散到各个方法中,逻辑混乱 逻辑复用像 HOC 、 Render Props ,不易理解,学习成本高 React 提倡函数式编程,函数更易拆分,更易测试 但是函数组件太简单,为了增强函数组件的功能,媲美 class 组件: 函数组

    2024年01月21日
    浏览(41)
  • react Ref 的基本使用

    在类组件中,你可以使用 createRef 来创建一个ref,并将它附加到DOM元素或类组件实例上。使用ref允许你在类组件中访问和操作特定的DOM元素或类组件实例。 下面是在类组件中使用ref的步骤: 引入 React 和 createRef : 在类组件文件的顶部,你需要从React中导入 React 和 createRef 。

    2024年02月14日
    浏览(31)
  • 【前端知识】React 基础巩固(三十九)——React-Router的基本使用

    Router中包含了对路径改变的监听,并且会将相应的路径传递给子组件。 Router包括两个API: BrowserRouter使用history模式 HashRouter使用hash模式(路径后面带有#号) 尝试在项目中使用HashRouter: 安装Router 在 index.js 中引入并使用HashRouter Routes:包裹所有的Route,在其中匹配一个路由(

    2024年02月14日
    浏览(66)
  • 第三十章 React的路由基本使用

    关于 React 路由,我们在学习之前先了解一下其他知识点: SPA 应用、路由的理解、 react 中如何使用路由。 SPA应用的理解 我们知道 React 脚手架给我们构建的是一个单页应用程序( SPA ),在页面加载时,只会加载一个 HTML 文件,然后使用 JavaScript 动态地更新页面内容。这意味

    2024年02月03日
    浏览(33)
  • React+Mobx|基本使用、模块化

    欢迎来到我的博客 📔博主是一名大学在读本科生,主要学习方向是前端。 🍭目前已经更新了 【Vue】、【React–从基础到实战】、【TypeScript】等等系列专栏 🛠目前正在学习的是🔥 R e a c t 框架 React框架 R e a

    2023年04月27日
    浏览(30)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包