当前位置： 首页 > news >正文

React入门准备

news 2026/5/15 21:11:41

React是什么

React是一个用于构建用户界面的JavaScript框架，用于构建“可预期的”和“声明式的”Web用户界面，特别适合于构建那些数据会随时间改变的大型应用的用户界面。

它起源于Facebook的内部项目，因为对市场上所有JavaScript MVC框架都不满意，所以决定自行开发一套，用于架设Instagram的网站。React于2013年5月开源，它只负责应用的视图层，帮助开发人员构建快速且交互式的web应用程序。React使用组件的方式构建用户界面，这种设计提高了代码的复用率，降低了测试的难度和代码复杂度。React的核心组成部分是JSX，它使用XML标记的方式直接声明界面，与HTML、JS混写。虽然React不是JavaScript本身，但它是用JavaScript语言编写的一个库，这使得开发人员可以使用JavaScript编写简短、独立的代码片段，并通过React组合成复杂的UI界面‌。

React学习路线

React官方文档是最好的学习资料，但是在学习其之前，我们需要知道一下内容。

DOM

DOM（文档对象模型）是HTML和XML文档的编程接口。HTML文档加载到浏览器时，浏览器会解析HTML元素为DOM元素，构建DOM模型。这个模型将HTML文档视作树结构，即节点树。通过DOM，节点树中的所有节点都可以通过JavaScript进行访问和修改‌。DOM不是编程语言，而是一种标准，一个模型，它与编程语言相对独立。没有DOM，javascript无法操作页面元素，则网页只能是静止的。

HTML

HTML全称为HyperText Markup Language，译为超文本标记语言，是用于描述网页内容的一种标准标记语言。HTML不是编程语言，而是一种描述性的标记语言，它通过一系列标签（如<body><head><table><p><img><div>等）来定义网页内容的结构和格式，如文字、图形、动画、声音、表格、链接等。HTML常与CSS、JavaScript等技术一起使用，用于设计网页、网页应用程序以及移动应用程序的用户界面。浏览器可以读取HTML文件，并将其渲染成可视化网页‌。

CSS

CSS是层叠样式表，用于描述网页或应用程序的外观和样式‌。它是一种计算机语言，主要用于表现HTML或XML等文件的样式。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。它能够对网页中的对象的位置排版进行像素级的精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力，并能够进行初步交互设计。

JavaScript

JavaScript是一种用于构建交互式网页和Web应用程序的脚本语言。

JavaScript库&JavaScript框架

Javascript框架一定是javascript库，而库不一定是框架。

  • ‌JavaScript库‌通常是一组可重用的函数和方法，专注于执行特定任务。它们提供了一些可配置的选项，但不会对项目结构进行强制规定，允许开发者自由地引入库的单个功能，并在自己的代码中组织这些功能。例如，jQuery和Bootstrap就是典型的JavaScript库，它们提供了丰富的功能，如DOM操作、事件处理、Ajax请求等，但开发者可以根据需要选择使用其中的某些功能‌。

  • ‌JavaScript框架‌则是一种预先定义好的项目结构和代码组织方式，它们提供了一种“约定的优于配置”的开发方法。框架定义了软件应用程序的工作流程，并告知开发人员需要做什么，同时在必要时调用开发人员的代码。框架通常包含预构建的UI组件、布局管理器、事件处理机制、数据模型和存储等，这些都有助于简化开发过程。例如，React和Vue.js就是典型的JavaScript框架，它们提供了完整的解决方案，包括组件化开发、状态管理、路由等，开发者需要遵循框架的规则和约定来组织代码‌。

JSX

JSX是JavaScript的一种语法扩展，广泛应用于React中‌。它允许开发者在JavaScript代码中直接编写类似HTML的语法，使得构建用户界面变得更加直观和简洁。尽管JSX看起来像HTML，但它实际上是语法糖，最终会被转译为JavaScript对象，供React使用。

在学习react官网文档之前，我们对以上知识入门即可。不需要深入学习，不然就没不完了。：）。下一篇我们搭建react开发环境。

相关文章：

React入门准备

React是什么 React是一个用于构建用户界面的JavaScript框架&#xff0c;用于构建“可预期的”和“声明式的”Web用户界面&#xff0c;特别适合于构建那些数据会随时间改变的大型应用的用户界面。 它起源于Facebook的内部项目&#xff0c;因为对市场上所有JavaScript MVC框架都…...

编程日记 2024/9/29 7:32:47

robomimic基础教程（四）——开源数据集

robomimic开源了大量数据集及仿真环境&#xff0c;数据集标准格式为HDF5 目录 一、基础要求 二、使用步骤 1. 下载数据集 2. 后处理 3. 训练 4. 查看训练结果 三、HDF5数据集结构与可视化 1. 数据集结构 &#xff08;1&#xff09;根级别&#xff08;data 组 group&a…...

编程日记 2024/9/29 7:29:45

胤娲科技：AI界的超级充电宝——忆阻器如何让LLM告别电量焦虑

当AI遇上“记忆橡皮擦”&#xff0c;电量不再是问题&#xff01; 嘿&#xff0c;朋友们&#xff0c;你们是否曾经因为手机电量不足而焦虑得像个无头苍蝇&#xff1f;想象一下&#xff0c;如果这种“电量焦虑”也蔓延到了AI界&#xff0c; 特别是那些聪明绝顶但“耗电如喝水”的…...

编程日记 2024/9/29 7:27:43

前端大模型入门：使用Transformers.js手搓纯网页版RAG（二）- qwen1.5-0.5B - 纯前端不调接口

书接上文&#xff0c;本文完了RAG的后半部分&#xff0c;在浏览器运行qwen1.5-0.5B实现了增强搜索全流程。但受限于浏览器和模型性能&#xff0c;仅适合于研究、离线和高隐私场景&#xff0c;但对前端小伙伴来说大模型也不是那么遥不可及了&#xff0c;附带全部代码&#xff0c…...

编程日记 2024/9/29 7:26:42

K-means聚类分析对比

K-means聚类分析&#xff0c;不同K值聚类对比&#xff0c;该内容是关于K-means聚类分析的&#xff0c;主要探讨了不同K值对聚类结果的影响。K-means聚类是一种常见的数据分析方法&#xff0c;用于将数据集划分为K个不同的类别。在这个过程中&#xff0c;选择合适的K值是非常关键…...

编程日记 2024/9/29 7:22:38

tar命令：压缩、解压的好工具

一、命令简介 用途&#xff1a; tar​ 命令用于创建归档文件&#xff08;tarball&#xff09;&#xff0c;以及从归档文件中提取文件。 标签&#xff1a; 文件管理&#xff0c;归档。 特点&#xff1a; 归档文件可以保留原始文件和目录的层次结构&#xff0c;通常使用 .tar ​…...

编程日记 2024/9/29 7:20:36

Mac电脑上最简单安装Python的方式

背景 最近换了一台新的 MacBook Air 电脑&#xff0c;所有的开发软件都没有了&#xff0c;需要重新配环境&#xff0c;而我现在最常用的开发程序就是Python。这篇文章记录一下我新Mac电脑安装Python的全过程&#xff0c;也给大家一些思路上的提醒。 以下是我新电脑的配置&…...

编程日记 2024/9/29 7:18:35

Linux基础命令cd详解

cd&#xff08;change directory&#xff09;命令是 Linux 中用于更改当前工作目录的基础命令。它没有很多复杂的参数&#xff0c;但它的使用非常频繁。以下是 cd 命令的详细说明及示例。 基本语法 cd [选项] [路径] 常用选项 -L : 使用逻辑路径&#xff08;默认选项&…...

编程日记 2024/9/29 7:15:31

【大模型对话 的界面搭建-Open WebUI】

Open WebUI 前身就是 Ollama WebUI&#xff0c;为 Ollama 提供一个可视化界面&#xff0c;可以完全离线运行&#xff0c;支持 Ollama 和兼容 OpenAI 的 API。 github网址 https://github.com/open-webui/open-webui安装 第一种 docker安装 如果ollama 安装在同一台服务器上&…...

编程日记 2024/9/29 7:13:29

如何在算家云搭建text-generation-webui（文本生成）

一、text-generation-webui 简介 text-generation-webui 是一个流行的用于文本生成的 Gradio Web UI。支持 transformers、GPTQ、AWQ、EXL2、llama.cpp (GGUF)、Llama 模型。 它的特点如下&#xff0c; 3 种界面模式&#xff1a;default (two columns), notebook, chat支持多…...

编程日记 2024/9/29 7:08:24

【Java SE】初遇Java，数据类型，运算符

&#x1f525;博客主页&#x1f525;&#xff1a;【 坊钰_CSDN博客 】 欢迎各位点赞&#x1f44d;评论✍收藏⭐ 1. Java 概述 1.1 Java 是什么 Java 是一种高级计算机语言&#xff0c;是一种可以编写跨平台应用软件&#xff0c;完全面向对象的程序设计语言。Java 语言简单易学…...

编程日记 2024/9/29 7:07:23

XSS（内含DVWA）

目录 一.XSS的攻击方式&#xff1a; 1. 反射型 XSS&#xff08;Reflected XSS&#xff09; 2. 存储型 XSS&#xff08;Stored XSS&#xff09; 3. DOM型 XSS&#xff08;DOM-based XSS&#xff09; 总结 二..XSS的危害 三.常见的XSS方式 1.script标签 四.常见基本过滤方…...

编程日记 2024/9/29 7:00:17

【SpringCloud】环境和工程搭建

环境和工程搭建 1. 案例介绍1.1 需求1.2 服务拆分服务拆分原则服务拆分⽰例 2. 项目搭建 1. 案例介绍 1.1 需求 实现⼀个电商平台(不真实实现, 仅为演⽰) ⼀个电商平台包含的内容⾮常多, 以京东为例, 仅从⾸⻚上就可以看到巨多的功能 我们该如何实现呢? 如果把这些功能全部…...

编程日记 2024/9/29 6:59:16

基于Java开发的（控制台）模拟的多用户多级目录的文件系统

多级文件系统 1 设计目的 为了加深对文件系统内部功能和实现过程的理解&#xff0c;设计一个模拟的多用户多级目录的文件系统&#xff0c;并实现具体的文件物理结构、目录结构以及较为完善的文件操作命令集。 2 设计内容 2.1系统操作 操作命令风格&#xff1a;本文件系统的…...

编程日记 2024/9/29 6:56:13

tailwindcss group-hover 不生效

无效 <li class"group"><div class"tw-opacity-0 group-hover:tw-opacity-100" /> </li>配了tw前缀&#xff0c;group要改成tw-group // tailwind.config.jsmodule.exports {prefix: "tw-", }<li class"tw-group&q…...

编程日记 2024/9/29 6:55:12

python环境配置问题(个人经验)

很久没配置 python 新环境了&#xff0c;最近新项目需要进行配置&#xff0c;在配置过程中发现了不少问题&#xff0c;记录下。 问题1&#xff1a;fatal error: longintrepr.h: 没有那个文件或目录 这个问题的原因是新环境的 python 版本(3.10以上)与本地的版本(3.8.x)差异过…...

编程日记 2024/9/29 6:54:11

BERT训练之数据集处理(代码实现)

目录 1读取文件数据 2.生成下一句预测任务的数据 3.预测下一个句子 4.生成遮蔽语言模型任务的数据 5.从词元中得到遮掩的数据 6.将文本转化为预训练数据集 7.封装函数类 8.调用 import os import random import torch import dltools 1读取文件数据 def _read_wiki(data_d…...

编程日记 2024/9/29 6:53:10

一款辅助渗透测试过程，让渗透测试报告一键生成

《网安面试指南》http://mp.weixin.qq.com/s?__bizMzkwNjY1Mzc0Nw&mid2247484339&idx1&sn356300f169de74e7a778b04bfbbbd0ab&chksmc0e47aeff793f3f9a5f7abcfa57695e8944e52bca2de2c7a3eb1aecb3c1e6b9cb6abe509d51f&scene21#wechat_redirect 《Java代码审…...

编程日记 2024/9/29 6:47:05

力扣最热一百题——颜色分类

目录 题目链接&#xff1a;75. 颜色分类 - 力扣&#xff08;LeetCode&#xff09; 题目描述 示例 提示&#xff1a; 解法一&#xff1a;不要脸用sort Java写法&#xff1a; 运行时间 解法二&#xff1a;O1指针 Java写法&#xff1a; 重点 运行时间 C写法&#xff1a;…...

编程日记 2024/9/29 6:45:03

2024年工业制造企业CRM研究报告：需求清单、市场格局、案例分析

我国是世界上产业体系最完备的国家&#xff0c;拥有全球规模最大、门类最齐全的生产制造体系&#xff0c;在500种主要工业产品中&#xff0c;有四成以上产品产量位居全球第一。2023年制造业增加值达33万亿元&#xff0c;占世界的比重稳定在30%左右&#xff0c;我国制造业增加值…...

编程日记 2024/9/29 6:43:01

基于Cursor的AI编程助手：从提示词工程到个性化工作流配置

1. 项目概述&#xff1a;一个基于Cursor的AI编程助手最近在GitHub上看到一个挺有意思的项目&#xff0c;叫mk-knight23/AI-ASSISTANT-CURSOR。乍一看名字&#xff0c;你可能以为又是一个普通的AI代码生成工具&#xff0c;但仔细研究下来&#xff0c;发现它的定位和实现思路有点…...

编程新知 2026/5/15 21:02:42

基于LLM的智能GA4数据分析代理：架构、部署与实战优化

1. 项目概述与核心价值 最近在折腾一个挺有意思的开源项目&#xff0c;叫 Synter-Media-AI/google-analytics-agent 。乍一看名字&#xff0c;你可能觉得这又是一个把Google Analytics数据导出来做可视化的工具&#xff0c;市面上这种工具一抓一大把。但实际深入把玩之后&am…...

编程新知 2026/5/15 19:43:15

NotebookLM生物学研究辅助落地手册（实验室已验证的7个不可公开的Prompt工程模板）

更多请点击&#xff1a; https://intelliparadigm.com 第一章&#xff1a;NotebookLM生物学研究辅助落地手册&#xff08;实验室已验证的7个不可公开的Prompt工程模板&#xff09; NotebookLM 作为 Google 推出的文档感知型 AI 助手&#xff0c;在分子生物学、结构生物学与高通…...

编程新知 2026/5/15 19:10:05

使用 Taotoken 后 API 调用延迟与稳定性体验分享

&#x1f680; 告别海外账号与网络限制&#xff01;稳定直连全球优质大模型&#xff0c;限时半价接入中。 &#x1f449; 点击领取海量免费额度 使用 Taotoken 后 API 调用延迟与稳定性体验分享 作为一名日常需要频繁调用大模型 API 的开发者&#xff0c;服务的稳定性和响应速…...

编程新知 2026/5/15 18:36:41

基于MCP协议的Claude对话历史管理工具：架构、配置与实战

1. 项目概述&#xff1a;一个为Claude桌面应用量身定制的历史记录管理工具如果你和我一样&#xff0c;是Claude桌面应用的深度用户&#xff0c;那你一定对那个内置的对话历史管理功能颇有微词。它太基础了&#xff0c;基础到几乎只能算是一个“查看器”。想按日期、按项目、按关…...

编程新知 2026/5/15 17:30:43

赛博朋克风格商业变现闭环：从DALL·E对比测试到Fiverr接单模板，7天打造高单价AI艺术IP

更多请点击&#xff1a; https://intelliparadigm.com 第一章&#xff1a;赛博朋克视觉语法与AI艺术IP的神经接口 赛博朋克视觉语法并非仅关乎霓虹、雨巷与义体——它是一套高度结构化的符号系统&#xff0c;其色彩模型&#xff08;如青紫-品红双主调&#xff09;、构图逻辑&a…...

编程新知 2026/5/15 17:16:29

从赛博朋克到量子有机体，未来主义风格演进全图谱，深度解析MJ 5.2→6.2→NijiV6的渲染范式跃迁

更多请点击&#xff1a; https://intelliparadigm.com 第一章&#xff1a;赛博朋克到量子有机体&#xff1a;未来主义视觉范式的哲学跃迁 当霓虹雨巷中的义体少女凝视全息广告牌&#xff0c;她瞳孔倒映的已不仅是资本编码的欲望图景&#xff0c;而是意识与拓扑量子态耦合的初始…...

编程新知 2026/5/15 15:42:00

3大核心优势：为什么GanttProject能让你秒懂项目管理

3大核心优势&#xff1a;为什么GanttProject能让你秒懂项目管理 【免费下载链接】ganttproject Official GanttProject repository. 项目地址: https://gitcode.com/gh_mirrors/ga/ganttproject 你是否曾经面对复杂的项目计划感到无从下手&#xff1f;GanttProject这款免…...

编程新知 2026/5/15 15:31:44

别再手动对比了！用Beyond Compare 4在Ubuntu上5分钟搞定文件同步与合并

高效文件管理利器&#xff1a;Beyond Compare 4在Ubuntu中的深度应用指南 在当今快节奏的开发与运维工作中&#xff0c;文件比较与同步已成为日常工作中不可或缺的环节。无论是代码合并、配置同步还是日志分析&#xff0c;传统的手动对比方式不仅效率低下&#xff0c;还容易出错…...

编程新知 2026/5/15 15:18:38

长期使用Taotoken对接各类工具后的稳定性综合观感

&#x1f680; 告别海外账号与网络限制&#xff01;稳定直连全球优质大模型&#xff0c;限时半价接入中。 &#x1f449; 点击领取海量免费额度 长期使用Taotoken对接各类工具后的稳定性综合观感 作为一名长期将大模型能力集成到日常开发与自动化流程中的开发者&#xff0c;我…...

编程新知 2026/5/15 14:53:08