react jquery 推荐 react jquery区别

转载

angel 2024-01-21 08:42:42

文章标签 react jquery 推荐 react.js javascript 前端 html 文章分类 jQuery 前端开发

React:用于构建用户界面的javaScript库

React 是 Facebook 内部开源出来的一个前端 UI 开发框架，广义来讲 React 不仅仅是 js 框架本身，更是一套完整的前端开发生态体系，这套体系包括：. React.js.

react在2013年被facebook开源，之后这门前端框架的发展就一直很迅猛，很多的统计数据表明，在所有的前端语言当中，React的市场占有率是排在第一的位置的

和其他前端框架的区别：
如何高效，快捷，方便的把服务器后端丢过来的数据，丰富的展现在界面上。不管是老早的jQuery, 到现在的Vue, React, 以及Argular, 都是如此，框架和框架的差异，无非是设计思想不一样，组件不一样，数据流动不一样，但本质没变。

其中vue用于构建用户界面的渐进式JavaScript框架，使前端开发人员更容易

上手，灵活高效，是国内很多公司开发项目的首选

react jquery 推荐 react jquery区别_html

官方文档：点击进入react官方首页

react作为和vue类似的前端主流框架，运用范围广泛，尤其是一些大企业面试时对开发者是否会react格外注重，很多项目都是在react框架上落地的，可以看看一些招聘信息的任职要求就知道了。

除此之外,react在语法上更贴近原生javascript,书写上和js一样较为自由

<script>
    // 2 创建react元素
    // 参数一：元素名称
    // 参数二：元素属性
    // 参数三：元素的子节点
    const title = React.createElement('h1', null, 'Hello React')

    // 3 渲染react元素
    // 参数一：要渲染的react元素
    // 参数二：挂载点
    ReactDOM.render(title, document.getElementById('root'))
  </script>

react jquery 推荐 react jquery区别_html_02

框架优势：

速度快

它并不直接对DOM进行操作，引入了一个叫做虚拟DOM的概念，安插在javascript逻辑和实际的DOM之间，性能好

很好的跨浏览器兼容

虚拟DOM帮助我们解决了跨浏览器问题，它为我们提供了标准化的API，甚至在IE8中都是没问题的。

组件化开发

组件化的代码更加模块化，重用代码更容易，可维护性高。

React的安装与使用

接下来可以阅读下官方文档，看看react的操作流程怎样的

——啥也不管，首先安装：

npm i react react-dom

——接下来可以放心使用:
1、引入react和react-dom两个js文件
2、创建react元素
3、渲染React元素到页面中

在html中试试看

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>01-react基本使用</title>
</head>
<body>
  <div id="root"></div>
  
  <!-- 1 引入js文件 -->
  <script src="./node_modules/react/umd/react.development.js"></script>
  <script src="./node_modules/react-dom/umd/react-dom.development.js"></script>

  <script>
    // 2 创建react元素
    // 参数一：元素名称
    // 参数二：元素属性
    // 参数三：元素的子节点
    const title = React.createElement('h1', null, 'Hello React')

    // 3 渲染react元素
    // 参数一：要渲染的react元素
    // 参数二：挂载点
    ReactDOM.render(title, document.getElementById('root'))
  </script>
</body>
</html>