01_React简介、基础入门

于 2024-08-19 20:00:00 发布
阅读量1.1k 收藏 29
点赞数 49
分类专栏： React 全家桶 文章标签： react.js 前端 前端框架
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_46143850/article/details/141256121
版权

React 简介、基础入门

一、React 简介

1、是什么？

用于构建用户界面的 JavaScript 库
界面–》 视图
只关注视图层
例子：使用原有的知识去展示数据的步骤
1）发送请求获取数据
2）处理数据（过滤、整理格式等）
3）操作 DOM 呈现页面 （React 只关注这一步骤）

React 是一个将数据渲染为 HTML 视图的开源 Javascript 库

2、谁开发的？

由 Facebook 开发的，且开源
时间线：
1）起初由 Facebook 的软件工程师 Jordan Walke 创建
2）于 2011 年部署于 Facebook 的 newsfeed
3）随后在 2012 年部署于 Instagram（INS）
4）2013 年 5 月宣布开源
…
近十年 “陈酿”React 正在被腾讯、阿里等一线大厂广泛使用

3、为什么要学？

1）原生 Javascript 操作 DOM 繁琐、效率低（DOM-API 操作 UI）

document.getElementById('app')
document.querySelector('#app')
document.getElementsByTagName('span')

2）使用 Javascript 直接操作 DOM， 浏览器会进行大量的重绘重排
3）原生 Javascript 没有组件化编码方案，代码复用率低
js 的模块化：将非常庞大的 js 按照功能点拆分成一个个小的 js，这就要做模块化
组件化：将结构和 js 都拆分成小的部分

以上是原生 JavaScript 的痛点。

4、React 的特点

1）采用 组件化 模式、声明式编码，提高开发效率及组件复用率。
命令式编程：缺少任何一个步骤都没法得到结果
声明式编程：只需要说出想要的结果，过程可以省略
2）在 React Native 中可以使用 React 语法进行 移动端开发。
3）使用 虚拟 DOM + 优秀的 Diffing 算法， 尽量减少与真实 DOM 的交互

5、学习 React 之前你要掌握的 Javascript 基础知识

1）判断 this 的指向
2）class（类）
3）ES6 语法规范，模板字符串等
4）npm 包管理器
5）原型、原型链
6）数组常用方法，筛选最值、条件求和等
7）模块化

二、React 入门

文档： https://react.docschina.org/

1、相关 js 库

1） react.js: React 核心库

jsx
在 js 的基础上增加一些语法和规范， 使用 babel 来转换

2）react-dom.js 提供操作 DOM 的 react 扩展库
3）babel.min.js 解析 JSX 语法代码转为 JS 代码的库

2、Hello React 入门小例子—React16.8.0 版本

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <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>
    <!-- 引入babel， 用于将 jsx 转为 js -->
    <script type="text/javascript" src="../js/babel.min.js"></script>
    <!-- 此处一定要写babel -->
    <script type="text/babel">
      // 1、创建虚拟 DOM. 此处一定不要写引号，因为不是字符串
      const vDom = <h1>Hello, React</h1>
      // 2、渲染虚拟 DOM 到页面
      // ReactDOM.render(虚拟DOM，容器)
      ReactDOM.render(vDom, document.getElementById('test'))
    </script>
  </body>
</html>

3、为什么不用 js ，而需要使用 jsx

3.1 使用 jsx 创建虚拟 DOM

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <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>
    <!-- 引入babel， 用于将 jsx 转为 js -->
    <script type="text/javascript" src="../js/babel.min.js"></script>

    <!-- 此处一定要写babel -->
    <script type="text/babel">
      // 1、创建虚拟 DOM. 此处一定不要写引号，因为不是字符串
      const vDom = <h1>Hello, React</h1>
      // 2、渲染虚拟 DOM 到页面
      // ReactDOM.render(虚拟DOM，容器)
      ReactDOM.render(vDom, document.getElementById('test'))
    </script>
  </body>
</html>

3.2 使用 js 创建虚拟 DOM

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <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>
    <script type="text/javascript">
      // 1、创建虚拟 DOM React.createElement(标签名， 标签属性， 标签内容)
      const vDom = React.createElement('h1', { id: 'title' }, 'Hello, React')
      // 2、渲染虚拟 DOM 到页面
      // ReactDOM.render(虚拟DOM，容器)
      ReactDOM.render(vDom, document.getElementById('test'))
    </script>
  </body>
</html>

3.3 通过对比发现

当标签内容都是 ‘Hello, React’ 的时候差别不大。
但是当标签 h1 需要嵌套一个 span 标签再显示 ‘Hello, React’ 的时候，
js 创建就需要这么写

React.createElement(
  'h1',
  { id: 'title' },
  React.createElement('span', {}, 'Hello, React'),
)

jsx 就这么写

const vDom = (
  <h1>
    <span>Hello, React</span>
  </h1>
)

jsx 创建虚拟 DOM 就是原生 js 写语法糖

4、虚拟 DOM 与真实 DOM

4.1 关于虚拟 DOM

（1）本质是 Object 类型的对象（一般对象）
（2）虚拟 DOM 比较“轻”，属性比较少，真实 DOM 比较“重”。因为虚拟 DOM 是 React 内部在用，无需真实 DOM 上那么多的属性。
（3）虚拟 DOM 最终会被 React 转化为真实 DOM，呈现在页面上。

5、JSX 语法规则

5.1 例子

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>JSX 语法规则</title>
    <style>
      .title {
        background-color: aquamarine;
      }
    </style>
  </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>
    <!-- 引入babel， 用于将 jsx 转为 js -->
    <script type="text/javascript" src="../js/babel.min.js"></script>

    <!-- 此处一定要写babel -->
    <script type="text/babel">
      let MyId = 'TestIn'
      // 1、创建虚拟 DOM. 此处一定不要写引号，因为不是字符串
      const vDom = (
        <div>
          <h1 className="title" id={MyId.toLowerCase()}>
            <span style={{ color: 'red', fontSize: '120px' }}>
              Hello, React
            </span>
          </h1>
          <h1 className="title" id={MyId.toUpperCase()}>
            <span style={{ color: 'red', fontSize: '80px' }}>Hello, React</span>
          </h1>
          <input type="text"></input>
          <Good></Good>
        </div>
      )
      // 2、渲染虚拟 DOM 到页面
      // ReactDOM.render(虚拟DOM，容器)
      ReactDOM.render(vDom, document.getElementById('test'))
    </script>
  </body>
</html>

5.2 语法规则

（1）全称 Javascript XML
（2）react 定义的一种类似于 XML 的 JS 扩展语法：JS+XML
a. XML 早期用于存储和传输数据

<student>
  <name>Tom</name>
  <age>19</age>
</student>

使用 json 进行存储： “{“name”: “Tom”, “age”: 19}”

（3）定义虚拟 DOM 时，不要写引号
（4）标签中混入 JS 表达式时 要用花括号 {}
（5）样式的类名指定不要用 class，需要使用 className
a. class 是 es6 中的关键字，react 在设计的时候避开了这个，所以用 className
（6）内联样式，要用 style={{key: value}} 的形式去写
（7）虚拟 DOM 必须只有一个根标签
（8）标签必须闭合
（9）标签首字母
a. 若小写字母开头，则将该标签转为 html 中同名元素， 若 html 中无该标签对应的同名元素，则报错
b. 若大写字母开头，react 就去渲染对应的组件，若组件没有定义，则报错

5.3 JSX 小练习

在页面上动态展示 前端 js 框架列表

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>jsx小练习</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>
    <!-- 引入babel， 用于将 jsx 转为 js -->
    <script type="text/javascript" src="../js/babel.min.js"></script>
    <!-- 此处一定要写babel -->
    <script type="text/babel">
      /*
        一定注意区分：【js 语句（代码）】与【js表达式】
        1. 表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方
            下面这些都是表达式:
                (1) a
                (2) a+b
                (3) demo(1)
                (4) arr.map()
                (5) function test(){}

        2.js语句（代码）：控制代码走向的
            下面这些都是语句（代码）:
                (1) if(){}
                (2) for(){}
                (3) switch(){case: xxx}
        */
      let data = ['Angluar', 'React', 'Vue']
      // 1、创建虚拟 DOM.
      const vDom = (
        <div>
          <h1>前端 js 框架列表</h1>
          <ul>
            {data.map((el, inx) => {
              return <li key={inx}>{el}</li>
            })}
          </ul>
        </div>
      )
      // 2、渲染虚拟 DOM 到页面
      // ReactDOM.render(虚拟DOM，容器)
      ReactDOM.render(vDom, document.getElementById('test'))
    </script>
  </body>
</html>
5.3.1 区分：【js 语句（代码）】与【js 表达式】

1. 表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方
下面这些都是表达式:
(1) a
(2) a+b
(3) demo(1)
(4) arr.map()
(5) function test(){}

2.js 语句（代码）：控制代码走向的
下面这些都是语句（代码）:
(1) if(){}
(2) for(){}
(3) switch(){case: xxx}

5.4 模块与组件、模块化与组件化的理解

5.4.1 模块

1）理解：向外提供特定功能的 js 程序，一般就是一个 js 文件
2）为什么要拆分成模块：随着业务逻辑增加，代码越来越多且复杂
3）作用：复用 js ，简化 js 的编写，提高 js 运行效率

5.4.2 组件

1）理解：用来实现局部功能效果的代码和资源的集合（html、css、js、image 等）
2）为什么：一个界面的功能更复杂
3）作用：复用编码，简化项目编码、，提供运行效率

5.4.3 模块化

当应用的 js 都以模块来编写，这个应用就是一个模块化的应用

5.4.4 组件化

当应用是以多组件的方式实现，这个应用就是一个组件化的应用

qiao若huan喜
关注
  • 49
    点赞
  • 踩
  • 29
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
React入门（一）——React介绍、项目创建、JSX语法
qq_52193816的博客
06-23 584
自学react，本文为b站千锋教育2022版React全家桶教程_react零基础入门到项目实战完整版课程笔记；补充部分React 18 特性
react零基础入门到项目实战-01
corn6的博客
03-14 982
React与传统MVC的关系 react的特性 声明式：我只告诉你我想的东西是什么，具体怎么实现不需要我去实现；只需要根据react模板写好的规则去书写即可，而react怎么把数据映射到视图上的、怎么渲染到页面上的不需要我们去关心；将来数据发生了改变，react怎么去更新模板不需要我们去关心，我只负责改变数据即可；我们只关注数据层的改变 ...
React基础入门
donglize521521的博客
09-24 3429
React系列二 - 核心JSX语法一 React系列二 - 核心JSX语法二 React系列三 - 阶段案例练习
react基础入门
妍思码匠的博客
01-12 1206
从以上概念可知，react组件就是一部分的js逻辑，封装的独立的可复用的代码片段，这样每个片段都可以进行独立的管理，很好的实现了代码的复用。react的核心是封装一个个大大小小的组件（小到一个按钮，大到一个页面）来构建复杂的UI界面，每个组件都是UI的一部分。函数式组件其实就是官网的标准案例，定义一个函数，接受任意的props参数，函数中返回jsx语法的页面UI内容。class组件不同于函数组件的是，class组件会创建对应的实例，因此。，该函数的返回值是JSX语法编写的React元素。
react 18 基础入门到项目实战总结
BradenHan的专栏
03-13 1107
此系列笔记的来缘起 此系列笔记，是我学习《千锋react零基础入门到项目实战》的学习笔记，其中也加入了部分自己的理解。 通过此系列笔记，你能得到什么？ •你可以完整的了解react的基础知识。 •通过实际需求案例驱动知识点吸收，通过幽默风趣讲解驱动学习的积极性，帮助大家成长为React开发高手打下基础。 下面，仅列出这套课程的知识点，点击查看详情，即可查看详细内容。
【React】基础入门教程
qq_45677671的博客
04-20 606
文章目录组件是啥？函数组件 组件是啥？ 组件，从概念上类似于 JavaScript 函数。它接受任意的入参（即 “props”），并返回用于描述页面展示内容的 React 元素 函数组件 由于元素没有办法传递参数，所以我们就需要把之前定义的变量改为一个方法，让这个方法去return一个元素: import React from 'react' import ReactDOM from 'react-dom' // 特别注意这里的写法，如果要在JSX里写js表达式(只能是表达式，不能流程控制)，就需
React基础入门项目实战
Da_Zhuang的博客
04-05 2937
今天参加了一整天reactjs的培训，看邮件说该课程价值100美元，该课程覆盖了react的大部分基础内容，确实很不错。听说外企中使用reactjs较多，国内使用vue较多，想在外企工作的同学有必要了解该框架。写该博文主要是梳理React的基础知识点，可以对ReactJS的基础知识有大体了解。
React从入门到精通教程01
qq_43742385的博客
06-15 1120
React从入门到精通教程 文章目录React从入门到精通教程React简介官方文档React使用来干什么的为什么需要ReactReact特点React基础React的使用Hello WorldJSX定义在JSX中嵌入JS表达式JSX也是一个表达式JSX特定属性JSX防止XSS（cross-site-scripting, 跨站脚本）攻击JSX表示对象总结：元素渲染将元素渲染为DOM更新已经渲染了的元素React只更新它需要更新的地方 React简介 官方文档 英文官网: https://reactjs
01-React简介、基础入门
最新发布
08-16
react 16.8.0 版本资源
react学习入门_react入门_react前端学习
09-20
这个“react学习入门”资料包显然是为初学者设计的，旨在帮助他们快速掌握React的基础知识。 React的核心概念是组件化。组件是React中的独立、可重用的代码块，它们可以像HTML元素一样嵌套和组合。通过这种方式，...
千锋2022版React全家桶教程_react零基础入门到项目实战完整版（资料）
07-27
这个 React 全家桶教程涵盖了 React 的基础知识、React Hooks、React 路由、Redux、React-Redux、Immutable、Mobx、TS、styled-components、单元测试、Redux-saga 等知识点，是一个非常全面的 React 教程。
intro_to_react:React基础
07-10
本教程将带你入门React的基础知识。 一、React核心概念 1. 组件：React的核心是组件。组件就像独立的可重用代码块，可以像JavaScript函数一样接收任意的输入（称为“props”），并返回React元素，描述应该在屏幕上...
react_first_reactbabylon_React_
10-03
描述中提到的"简单的react入门实例"表明这是一个适合初学者的项目，旨在快速引导学习者掌握React的基本概念和编程模式。通过实践项目，学习者可以了解如何设置React环境，创建组件，管理状态，处理事件，以及与其他...
Target_React:Target_React
03-26
React Redux基础指令运行应用程序。 yarn start或npm start 生成应用程序。 yarn build或npm run build 棉绒的应用程序。 yarn lint或npm run lint 测试应用程序。 yarn test或npm run test ，用于UI选项yarn test:...
React零基础自学手册.pdf
03-31
### React.js零基础自学核心知识点概览 #### 一、React.js简介与基本概念 - **React.js**：一种用于构建用户界面的JavaScript库，特别适用于构建单页应用(SPA)。 - **特点**：虚拟DOM、组件化设计、单向数据流。 #...
ionic4官网demo_blank_react
04-30
【标题】"Ionic4官网DemoBlankReact"是一个基于Ionic4框架和React库的示例项目，主要用于帮助开发者快速理解和入门Ionic4与React的结合使用。Ionic4是一个流行的开源框架，用于构建高性能的混合移动应用程序，它利用...
react适合小白入门的基础知识
03-08
1.与vue对比，更快入门react 2.结合 js 的相关知识，更容易理解react 这个框架 3.此文章为系列文章，后续会持续更新
JavaScript：前端框架入门：React基础
07-14
### JavaScript：前端框架入门：React基础 #### 一、React简介与环境搭建 ##### 1. React的历史与特点 **1.1 React的历史** React是由Facebook开发并维护的一个用于构建用户界面的JavaScript库。它最初在2013年...
React21K_react_lesson
03-30
3. **React基础** React使用JSX语法，它允许在JavaScript中编写类似HTML的代码。组件是React的核心概念，它们是可重用的代码块，可以代表页面上的任何部分，从小到按钮，大到整个页面。 4. **状态和属性** - **...
react 基础入门
07-27
对于React的基础入门，你可以按照以下步骤进行学习： 1. 确保你已经安装了Node.js和npm（Node包管理器）。你可以在官方网站上下载并安装它们。 2. 创建一个新的React项目。在命令行中，使用以下命令创建一个新的React项目： ``` npx create-react-app my-app ``` 这将创建一个名为"my-app"的新目录，并在其中初始化一个基本的React项目结构。 3. 进入新创建的项目目录： ``` cd my-app ``` 4. 启动开发服务器。运行以下命令来启动一个本地开发服务器： ``` npm start
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值