【React1】React概述、基本使用、脚手架、JSX、组件

news2024/9/22 5:40:09

文章目录

  • 1. React基础
    • 1.1 React 概述
      • 1.1.1 什么是React
      • 1.1.2 React 的特点
        • 声明式
        • 基于组件
        • 学习一次，随处使用
    • 1.2 React 的基本使用
      • 1.2.1 React的安装
      • 1.2.2 React的使用
      • 1.2.3 React常用方法说明
        • React.createElement()
        • ReactDOM.render()
    • 1.3 React 脚手架的使用
      • 1.3.1 React 脚手架的意义
      • 1.3.2 使用React 脚手架初始化项目
        • 另：npx命令介绍
      • 1.3.3 在脚手架中使用React
  • 2. JSX
    • 2.1 JSX的基本使用
      • 2.1.1 React.createElement()的问题
      • 2.1.2 JSX简介
      • 2.1.3 JSX使用步骤
      • 2.1.4 思考：为什么脚手架中可以使用JSX语法？
      • 2.1.5 JSX的注意点
    • 2.2 JSX中使用Javascript表达式
    • 2.3 JSX的条件渲染
    • 2.4 JSX的列表渲染
    • 2.5 JSX的样式处理
      • 2.5.1 行内样式 -- style
      • 2.5.2 类名 -- className
    • 2.6 JSX总结
  • 3. React组件基础
    • 3.1 React组件的介绍
    • 3.2 React组件的两种创建方式
      • 3.2.1 使用`函数`创建组件
      • 3.2.2 使用`类class`创建组件
      • 3.2.3 把创建好的组件，`抽离成独立的JS文件`
    • 3.3 React事件处理
      • 3.3.1 事件绑定
      • 3.3.2 事件对象
    • 3.4 有状态组件 和 无状态组件
    • 3.5 组件中的state 和 setState()
      • 3.5.1 state的基本使用
        • 1. `初始化state` / 初始化状态
        • 2. `获取状态` / 在组件中使用状态
      • 3.5.2 setState()修改状态state
      • 3.5.3 从JSX中`抽离`事件处理程序
    • 3.6 事件绑定this指向
    • 3.7 表单处理

参考：

  1. React 入门实例教程 - 阮一峰–太早，不推荐
  2. React 官网
  3. React 官网 -中文
  4. React入门看这篇就够了

加微信1124692 领取资料

1. React基础

React基础目标：

  1. 能够说出react是什么
  2. 能够说出react的特点
  3. 能够掌握react的基本使用
  4. 能够使用react脚手架

1.1 React 概述

1.1.1 什么是React

  • React是一个用于构建用户界面的javascript库。

用户界面：对前端来说就是HTML页面， 所以，React 主要用来写HTML页面，或构建Web应用。

  • 如果从MVC的角度看，React仅仅是视图层（V），也就是只负责视图的渲染，而并非提供了完整的M 和 C的功能。
  • React 起源于Facebook的内部项目，后又用来假设Instagram的网站，并与2013年5月开源。

React简介

  • React 是Facebook用来创建用户界面的JS库，在2013年开源。
  • React 不是一个MVC框架，而是一个用于构建组件化UI的库，是一个前端界面开发工具，所以很多人认为React 是MVC中的V(视图view)。
  • React的存在能够很好的解决“构建随着时间数据不断变化的大规模应用程序” – 相当于一个组件化的思想，把一个大应用拆分成很多小的组件，所以React能够引导我们重新思考如何构建应用程序。
  • React的核心就是封装可复用性高的组件，各个组件维护自己的状态和UI，当状态变更，自动重新渲染整个组件。

学习React前了解：

  • 目前前端的主流框架由Vue、React、Angular组成。
  • Angular因为革命性太高（每次发布新版本，都会颠覆前面版本的语法与使用，所以维护成本比较高），所以Vue、React 比较受欢迎
  • Vue、React 都是一个MVVM框架，为什么需要MVVM框架？ – 以往用js 或者jquery 来操作大量的dom，会导致渲染的时间很慢，但是MVVM这种设计模式不会直接操作dom，而是用model来代替dom，用js形成一个虚拟的dom树，只会在最后一次进行渲染（什么时候数据不修改了，确定了dom了，才会对dom进行渲染，不像实际dom，操作一次渲染一次）

1.1.2 React 的特点

  • 声明式
  • 基于组件
  • 学习一次，随处使用
声明式
  • 只需要描述UI（HTML）看起来是什么样，就跟写HTML一样
  • 我们负责用React代码来描述结构，React负责渲染UI，并在数据变化时更新UI
//比如我们在页面中响应一个标题，我们只需要写一个h1标签
const jsx = <div className = "app">
	<h1>Hello React! 动态变化数据:{
   count}</h1>
</div>
基于组件
  • 组件是React最重要的内容
  • 组件表示页面中的一部分内容
  • 组合、复用多个组件，可以实现完整的页面功能
学习一次，随处使用
  • React的必杀技
  • 使用React 不仅可以开发Web应用，还可以开发移动端（安卓/苹果）原生应用（react-native），还可以开发VR（虚拟现实）应用（react 360）

React 特性
React 是声明式、组件化的，非常灵活。

  • 声明式
  • 组件化
  • 灵活 ： 支持单页面（一个html，由路由方式去进行分发） / 多页面（多个html）
  • 支持服务端渲染，可以把react 放到node服务器中渲染页面出来，一些官网、商城的项目，react 写的是单页面，但需求是多页面，这时可以用next.js来生成多个视图，这样方便做seo优化，提高网站排名
  • 可以做react native ，还可以做app开发，所以react 应用非常广泛。

组件化 和 模块化的区别：

  • 组件化侧重于UI,把前端一个独立的UI模块，开发成一个小的组件，然后在不同的页面进行嵌套、拼接，就像积木一样。
  • 模块化侧重于功能，比如get、post请求这个功能要在很多地方用到，我们就把它做成一个独立的模块，在其他地方使用。

1.2 React 的基本使用

1.2.1 React的安装

  • 安装命令：npm i react react-dom
  • react 包是核心，提供了创建元素、组件等功能
  • react-dom 包提供DOM相关功能等

安装完成后可在package.json中查看
在这里插入图片描述
node_modules中有相应的包，且可在package.json中查看具体信息在这里插入图片描述

1.2.2 React的使用

1. 引入react
原生的html中引react库的方法：

<!-- React -->
<script src="https://cdn.jsdelivr.net/npm/react@17.0.2/umd/react.production.min.js"></script>
<!-- React DOM -->
<script src="https://cdn.jsdelivr.net/npm/react-dom@17.0.2/umd/react-dom.production.min.js"></script>

或者，像上面用npm 安装后，引入

<script src="./node_modules/react/umd/react.development.js"></script>
<script src="./node_modules/react-dom/umd/react-dom.development.js"></script>

2. 创建react元素

<script>
    const title = React.createElement('h1',null,'Hello React')   // React是由核心库react.js提供的
</script>
  1. 渲染创建好的react元素到页面中
ReactDOM.render(title,document.getElementById('app'))    //ReactDOM 是由react-dom提供的

完整代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>lxz20231103</title>
</head>
<body>
    <div id="app"></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元素
        // React.createElement('元素名称',元素属性,'元素子节点（文本节点或者元素节点）')
        const title = React.createElement('h1',null,'Hello React')  //声明一个常量title来接收创建好的React元素
        // 3. 渲染react元素到页面某元素中
        // ReactDOM.render(要渲染的react元素，要把元素渲染、挂载在哪位位置（挂载点）)
        ReactDOM.render(title,document.getElementById('app'))
    </script>
</body>
</html>

1.2.3 React常用方法说明

React.createElement()
  • 了解即可，因为这个方法用起来不是特别友好，在创建复杂结构的时候会很繁琐，后面会有一种简单友好的方法来创建react元素
  • 参数：
    参数1：元素名称，也就是html元素的名字，字符串，eg: ‘p’，'h1’等
    参数2：元素属性，没有属性写null，有属性写对象,eg： {title:‘我是标题’}
    参数3及以后的参数：元素的子节点，所以这个方法不知有3个参数，可能有很多参数

情况1： 没有属性，文本子节点

 const title = React.createElement('h1',null,'Hello React')   // 没有属性的h1标签，子节点是文本 Hello React

在这里插入图片描述
情况2：有属性，文本子节点

const title = React.createElement(
    'p',
    {
   id:'p1',title:'我是标题'},
    'Hello React' 
)

在这里插入图片描述
情况3：

const title = React.createElement(
    'p',    // 元素1：创建元素的 标签名称
    {
   id:'p1',title:'我是标题'},    // 元素2： 创建元素的 属性
    'Hello React',   // 元素3 及以后 ：  创建元素的子节点，子节点1：文本
    React.createElement('span',null,'加油！')    // 元素3 及以后 ：  创建元素的子节点，同级子节点2：元素
)

在这里插入图片描述
类似上图这样一个简单的结构也要很多代码，所以这个方法用起来并不是很方便，了解即可

ReactDOM.render()
  • 作用：用来将创建好的react元素渲染到页面中
  • 参数：
    参数1：创建好的react元素或者组件
    参数2:dom对象，通常用 document.getElementById('app') 来获取根节点

1.3 React 脚手架的使用

1.3.1 React 脚手架的意义

  • 脚手架是开发现代web应用的必备
  • 现代web应用不再像传统的方式去创建页面写css，js那样
  • 现在web应用写代码只是其中的一环，除此之外还有代码规范、项目打包上线、预编译等等问题要考虑。所以我们需要一套完整的解决方案来帮我们开发项目，如果手动一个个处理，就很繁琐，因此我们需要这么一套工具，这个工具就是脚手架。
  • 另外我们还可以充分的利用webpack、babel、eslint等工具来辅助我们进行项目的开发。
    使用react 完全不用考虑webpack等的配置问题，react脚手架是开箱即用的，我们可以用更多的时间来关注业务，而非配置。

1.3.2 使用React 脚手架初始化项目

  1. 初始化项目：
  • 推荐使用： npx create-react-app my-app-name
  • 方式2：npm init react-app my-app-name
  • 方式3：yarn create react-app my-app-name
    在这里插入图片描述
    happy hacking – 快乐黑客
    在这里插入图片描述
  1. 启动项目，在项目根目录执行命令： npm start
  • 项目根目录-- 有p

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1947012.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

PostgreSQL使用（四）——数据查询

PostgreSQL使用（四）——数据查询

说明&#xff1a;对于一门SQL语言&#xff0c;数据查询是我们非常常用的&#xff0c;也是SQL语言中非常大的一块。本文介绍PostgreSQL使用中的数据查询&#xff0c;如有一张表&#xff0c;内容如下&#xff1a; 简单查询 --- 1.查询某张表的全部数据 select * from tb_student…
阅读更多...
MSPM0G3507基于keil无法烧录的解决方法

MSPM0G3507基于keil无法烧录的解决方法

在学习M0的板卡过程中&#xff0c;遇到了诸多玄学问题。网上的教学大多基于CCS开发&#xff0c;对keil的教学几乎没有。 一开始我以为这个问题是没添加这个&#xff0c;但其实并非如此 在群里的网友说的清除flash&#xff0c;插拔USB,这些都不管用,后面也发现先在CCS烧录一遍&…
阅读更多...
前端开发知识(二)-css

前端开发知识(二)-css

<head> <style> div{ } </style> </head> div是布局标签&#xff0c; 一般放在head标签内&#xff0c;最下部。 若直接在在.css文件中写css,文件中&#xff0c;直接写就行&#xff0c;如下所示。 div{ }
阅读更多...
VLLM代码解读 | VLLM Hack 3

VLLM代码解读 | VLLM Hack 3

在上一期&#xff0c;我们看到了多个输入如何被封装&#xff0c;然后被塞入llm_engine中&#xff0c;接下来&#xff0c;通过_run_engine,我们要进行输入的处理了。 def _run_engine(self, *, use_tqdm: bool) -> List[Union[RequestOutput, EmbeddingRequestOutput]]:# Ini…
阅读更多...
java-poi实现excel自定义注解生成数据并导出

java-poi实现excel自定义注解生成数据并导出

因为项目很多地方需要使用导出数据excel的功能&#xff0c;所以开发了一个简易的统一生成导出方法。 依赖 <dependency> <groupId>org.apache.poi</groupId> <artifactId>poi-ooxml</artifactId> <version>4.0.1</version…
阅读更多...
【LeetCode】201. 数字范围按位与

【LeetCode】201. 数字范围按位与

1. 题目 2. 分析 这题挺难想的&#xff0c;我到现在还没想明白&#xff0c;为啥只用左区间和右区间就能找到目标值了&#xff0c;而不用挨个做与操作&#xff1f; 3. 代码 class Solution:def rangeBitwiseAnd(self, left: int, right: int) -> int:left_bin bin(left).…
阅读更多...
五. TensorRT API的基本使用-TensorRT-network-structure

五. TensorRT API的基本使用-TensorRT-network-structure

目录 前言0. 简述1. 案例运行2. 代码分析2.1 main.cpp2.2 model.cpp 总结下载链接参考 前言 自动驾驶之心推出的 《CUDA与TensorRT部署实战课程》&#xff0c;链接。记录下个人学习笔记&#xff0c;仅供自己参考 本次课程我们来学习课程第五章—TensorRT API 的基本使用&#x…
阅读更多...
java面向对象进阶进阶篇--《接口和接口与抽象类综合案例》（附带全套源代码）

java面向对象进阶进阶篇--《接口和接口与抽象类综合案例》（附带全套源代码）

个人主页→VON 收录专栏→java从入门到起飞 抽象类→抽象类和抽象方法 目录 一、初识接口 特点和用途 示例&#xff1a; Animal类 Dog类 Frog类 Rabbit类 Swim接口 text测试类 结果展示&#xff1a; 二、接口的细节 接口中的成员特点&#xff1a; 成员特点与接口的关…
阅读更多...
【通信模块】WiFi＆Bluetooth简介与对比

【通信模块】WiFi＆Bluetooth简介与对比

学习云里物里科技文章及结合CSDN优秀作者Edison Tao总结笔记&#xff0c;侵权联删&#xff01; 云里物里科技&#xff1a; https://www.minewtech.com/news/industry-2019-01-25-01.html CSDN&#xff1a; https://blog.csdn.net/taotongning/article/details/95215927 WIFI…
阅读更多...
EXCEL 排名(RANK,COUNTIFS)

EXCEL 排名(RANK,COUNTIFS)

1.单列排序 需求描述&#xff1a;如有下面表格&#xff0c;需要按笔试成绩整体排名。 解决步骤&#xff1a; 我们使用RANK函数即可实现单列整体排名。 Number 选择第一列。 Ref 选择这一整列&#xff08;CtrlShift向下箭头、再按F4&#xff09;。 "确定"即可计算…
阅读更多...
C++ | Leetcode C++题解之第284题窥视迭代器

C++ | Leetcode C++题解之第284题窥视迭代器

题目&#xff1a; 题解&#xff1a; template <class T> class PeekingIterator : public Iterator<T> { public:PeekingIterator(const vector<T>& nums) : Iterator<T>(nums) {flag Iterator<T>::hasNext();if (flag) {nextElement Ite…
阅读更多...
AUTOSAR从入门到精通-CAN-FD

AUTOSAR从入门到精通-CAN-FD

目录 几个高频面试题目 CAN与CAN FD的区别是什么？ 一、CAN与CAN FD的概念 二、CAN与CANFD的比较 三、CAN与CANFD的优劣势 为何CANFD还不能大面积取代CAN总线？ 算法原理 什么是CAN FD CAN FD的特点 为什么会出现CAN FD？ CAN FD和CAN总线协议帧异同 Can FD报文讲解…
阅读更多...
调用python-docx 提示出错

调用python-docx 提示出错

&#x1f3c6;本文收录于《CSDN问答解答》专栏&#xff0c;主要记录项目实战过程中的Bug之前因后果及提供真实有效的解决方案&#xff0c;希望能够助你一臂之力&#xff0c;帮你早日登顶实现财富自由&#x1f680;&#xff1b;同时&#xff0c;欢迎大家关注&&收藏&…
阅读更多...
【Django】 读取excel文件并在前端以网页形式显示-安装使用Pandas

【Django】 读取excel文件并在前端以网页形式显示-安装使用Pandas

文章目录 安装pandas写views写urls安装openpyxl重新调试 安装pandas Pandas是一个基于NumPy的Python数据分析库&#xff0c;可以从各种文件格式如CSV、JSON、SQL、Excel等导入数据&#xff0c;并支持多种数据运算操作&#xff0c;如归并、再成形、选择等。 更换pip源 pip co…
阅读更多...
C#开发的全屏图片切换效果应用 - 开源研究系列文章 - 个人小作品

C#开发的全屏图片切换效果应用 - 开源研究系列文章 - 个人小作品

这天无聊&#xff0c;想到上次开发的图片显示软件《 PhotoNet看图软件 》&#xff0c;然后想到开发一个全屏图片切换效果的应用&#xff0c;类似于屏幕保护程序&#xff0c;于是就写了此博文。这个应用比较简单&#xff0c;主要是全屏切换换图片效果的问题。 1、 项目目录&…
阅读更多...
Boost搜索引擎项目相关介绍

Boost搜索引擎项目相关介绍

Boost搜索引擎相关介绍&#xff1a; 首先&#xff0c;Boost库不具备搜索条件&#xff0c;所以我们这个项目借此实现搜索功能。 项目的核心就是以用户搜索的相关内容在目标数据中进行查找。 首先&#xff0c;我们面临的第一大难题就是目标数据&#xff0c;在这里目标数据就是Boo…
阅读更多...
气膜羽毛球馆的维护和运营成本解析—轻空间

气膜羽毛球馆的维护和运营成本解析—轻空间

随着人们对健康生活方式的追求不断增加&#xff0c;羽毛球这项运动也愈发受到欢迎。然而&#xff0c;传统的羽毛球馆往往存在建设周期长、成本高、维护复杂等问题。气膜羽毛球馆作为一种新型的运动场馆解决方案&#xff0c;因其快速搭建、环保节能、舒适环境等优势而逐渐被广泛…
阅读更多...
整合StarRocks更新表全部知识点

整合StarRocks更新表全部知识点

总结StarRocks更新表的全部内容的集合&#xff08;V3.2版本&#xff09; 一、基本功能 聚合函数replace的聚合表主键被主键表替代采用Merge-On-Read的策略&#xff0c;读取时需要在线Merge多个版本的数据文件&#xff0c;谓词和索引无法下推至底层数据&#xff0c;会严重影响…
阅读更多...
开源AI智能名片O2O商城小程序在私域流量营销中的应用与实践

开源AI智能名片O2O商城小程序在私域流量营销中的应用与实践

摘要 在数字化时代&#xff0c;私域流量营销已成为企业构建长期客户关系、实现可持续增长的关键策略。本文深入探讨了开源AI智能名片O2O商城小程序如何以其独特的智能化、个性化及高效性&#xff0c;在私域流量营销领域发挥重要作用。通过详细分析其在扩大公域影响力、打造微信…
阅读更多...
c生万物系列（封装）

c生万物系列（封装）

为了对c语言进行封装&#xff0c;笔者参考了lw_oopc等开源库&#xff0c;决定使用宏对结构体进行封装。 先说一下大致思想&#xff1a;通过宏&#xff0c;结构体和文件来实现封装。 大概步骤&#xff1a;抽象出类-> 使用lw_oopc库进行封装->定义接口封装底层实现 ->…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023