10天学完React——01、react概述和脚手架使用

长河落日#

已于 2022-08-05 16:13:03 修改

阅读量732

点赞数

分类专栏： react框架文章标签： react.js javascript 前端

于 2022-08-05 16:10:36 首次发布

本文链接：https://blog.csdn.net/weixin_47065927/article/details/126178661

版权

react框架专栏收录该内容

3 篇文章 1 订阅

订阅专栏

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

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

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

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

其中vue用于构建用户界面的渐进式JavaScript框架，使前端开发人员更容易
上手，灵活高效，是国内很多公司开发项目的首选
在这里插入图片描述

官方文档：点击进入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>

在这里插入图片描述
框架优势：

速度快

它并不直接对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>

React脚手架

react脚手架是开发现代web必备工具
充分利用webpack,Babel,Eslint等工具辅助项目开发

先初始化项目myapp：

npx create-react-app myapp

启动运行该项目:
在myapp目录下，

npm start

在这里插入图片描述

长河落日#

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
10天学完React——01、react概述和脚手架使用

如何高效，快捷，方便的把服务器后端丢过来的数据，丰富的展现在界面上。不管是老早的jQuery, 到现在的Vue, React, 以及Argular, 都是如此，框架和框架的差异，无非是设计思想不一样，组件不一样，数据流动不一样，但本质没变。react在2013年被facebook开源，之后这门前端语言的发展就一直很迅猛，很多的统计数据表明，在所有的前端语言当中，React的市场占有率是排在第一的位置的。虚拟DOM帮助我们解决了跨浏览器问题，它为我们提供了标准化的API，甚至在IE8中都是没问题的。.....
复制链接

扫一扫