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

react框架基础入门

前端三大框架:

  1. angular

  1. vue —-2||3

  1. react

区别:vue国内框架 封装较完成。全程使用封装的api来完成。

react国外技术框架—-偏向于底层js实现。没有的大量的封装。需要使用js手动实现。

react需求在不断增大。必会框架。

官网


https://react.docschina.org/   中文官网

react:用于构建用户界面的 JavaScript 库

react核心


1.声明式 —-在书写react代码时以较少的业务变更状态可以更准确有效的更新UI界面。

2.组件化 —-创建拥有各自状态的组件,再由这些组件构成更加复杂的 UI。

react的库分类


  1. react.js 基本库

  1. react-dom 操作浏览器dom元素节点的库

  1. react-native 操作安卓和ios 系统方面的库

网页版react测试:

<!-- 引入js文件 -->
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
<script>//React  库的操作对象//操作DOM的对象ReactDOM//获取根节点let root = document.querySelector("#root");//编译产生虚拟DOMlet ele = React.createElement("button", {name: "ss",//事件属性  并非事件onClick: () => {console.log("测试");}}, '按钮');//将虚拟DOM转化为真实DOM 挂载到root节点ReactDOM.render(ele, root);

使用react脚手架搭建项目


使用脚手架create-react-app 搭建项目环境

要求:Node >= 8.10 和 npm >= 5.6。

1.使用脚手架创建项目
create-react-app  项目名称 || .
进入项目目录进行启动
npm start

启动成功之后显示

目录结构


入口文件的相关代码

import React from 'react';
import ReactDOM from 'react-dom/client';
//全局css
import './assets/index.css';
//根模板
import App from './App';const root = ReactDOM.createRoot(document.getElementById('root'));
//编译app模板 生成真实dom 挂载到root
//React.StrictMode  react中语法校验的严格模式
root.render(<React.StrictMode><App /></React.StrictMode>
);

相关文章:

react框架基础入门

前端三大框架&#xff1a;angularvue —-2||3react区别&#xff1a;vue国内框架 封装较完成。全程使用封装的api来完成。react国外技术框架—-偏向于底层js实现。没有的大量的封装。需要使用js手动实现。react需求在不断增大。必会框架。官网https://react.docschina.org/ 中…...

C++ ,JNI, Java 数据传递全解(一)

在讲正题之前&#xff0c;先说一下C&#xff0c;JNI和Java 对应的数据类型对比吧&#xff0c;废话不多说&#xff0c;直接上图上面为C&#xff0c;Java&#xff0c;JNI 三者只见对应的数据类型好了&#xff0c;现在我们有了上面的数据类型比对&#xff0c;下面就讲讲从C如何将数…...

【Unity逆向】玩游戏遇到的“飞天锁血”是怎么实现的?

文章目录前言什么是外挂&#xff1f;锁血瞬移都是怎么做的&#xff1f;Unity引擎的致命缺陷是什么&#xff1f;WEB入侵如何做到&#xff1f;Unity外挂攻防概述典型游戏现实应用Unity开发流程Unity工作界面打包发布方式MonoMono跨平台原理JIT方式优点&#xff1a;因此后期Unity发…...

Spring基础与创建

目录 前言 Spring基础与核心概念 Spring是什么 1、什么是容器 2、什么是IoC 3、理解SpringIoC 4、DI&#xff08;依赖注入&#xff09; Spring的创建和使用 1、创建Spring项目 1.1、创建一个普通Maven项目 1.2、添加Spring框架支持 1.3、添加启动类和main方法 2、…...

虚拟机系列教程:虚拟机克隆

克隆主要是对磁盘文件进行操作。 1&#xff09;完整克隆 a、拷贝虚拟机磁盘文件 b、生成虚拟机配置文件 centos7-2 291b0480-955a-45e2-a001-690fded69d1b c、导入xml并启动 [rootcentos8 ~]# virt-clone -o centos7 --auto-clone ERROR 要克隆的域必须已经关闭。 [rootcent…...

iperf3主页官方信息

​ iPerf 是一款支持TCP,UDP和SCTP的高速协议测试工具 网络极限性能测试网络中立性检测 主页 下载iPerf安装包 公共的iPerf3服务器 iPerf用户手册 iPerf论坛—法语 联系我们 iPerf / iPerf3简介 iPerf3是一款用于对IP网络的最大带宽进行主动测试的工具。提供对和时间&…...

Linux-0.11 kernel目录进程管理sched.c详解

Linux-0.11 kernel目录进程管理sched.c详解 sched.c主要功能是负责进程的调度&#xff0c;其最核心的函数就是schedule。除schedule以外&#xff0c; sleep_on和wake_up也是相对重要的函数。 schedule void schedule(void)schedule函数的基本功能可以分为两大块&#xff0c;…...

AI已到,普通人的机会在哪里?

“普通人赚到钱很难 但是被骗到钱很容易”。每当火起来一个行业&#xff08;或者仅是一个概念&#xff09;&#xff0c;都会有人来问&#xff1a;现在去做点什么&#xff0c;能够踩上风口&#xff1f;普通人的赚钱机会在哪&#xff1f;怎么做能够暴富&#xff1f;让我们先来看看…...

CSP-J2022入门组二轮补赛试题(山东)T2:宴会

题目链接 CSP-J2022入门组二轮补赛(山东)第2题:宴会 题目背景 今人不见古时月,今月曾经照古人。梦回长安,大唐风华,十里长安花,一日看尽。 唐长安城是当时世界上规模最大、建筑最宏伟、规划布局最为规范化的一座都城。其营建 制度规划布局的特点是规模空前、创设皇城…...

ubuntu 使用 CMake 构建 Qt5 项目

Qt 概述 概念 Qt 是一个跨平台的 C 图形用户界面应用程序框架 常见的 C GUI: Qt 和 MFC 跨平台 Windows Linux MacOS 嵌入式平台 版本 包括商业版和开源免费版 案例 Linux 桌面环境 KDE WPS Office Qt 安装 下载地址: https://download.qt.io/archive/qt/ http…...

ZooKeeper命令及JavaAPI操作

ZooKeeper数据模型 ZooKeeper是一个树形目录服务&#xff0c;其数据模型和Uiix的文件目录树很类似&#xff0c;拥有一个层次化结构。这里面的每一个节点都被称为&#xff1a;ZNode&#xff0c;每个节点上都会保存自己的数据和节点信息。节点可以拥有子节点&#xff0c;同时也允…...

云医疗信息系统源码(云HIS)商业级全套源代码

云his系统源码&#xff0c;有演示 一个好的HIS系统&#xff0c;要具有开放性&#xff0c;便于扩展升级&#xff0c;增加新的功能模块&#xff0c;支撑好医院的业务的拓展&#xff0c;而且可以反过来给医院赋能&#xff0c;最终向更多的患者提供更好地服务。 私信了解更多&…...

u盘拔掉再插上去文件没了原因|文件恢复方法

如果您遇到了“u盘拔了再插文件变空了”的类似问题困扰&#xff0c;请仔细阅读文本&#xff0c;下面将分享几种方法来恢复u盘上丢失的文件&#xff0c;赶紧来试试&#xff01;为什么u盘拔掉再插上去文件没了“我的u盘为什么放进东西后拔出&#xff0c;再插进电脑去东西就没有了…...

CorelDRAW2023详解新增七大功能 ,CorelDRAW2023最新版本更新怎么样?

CorelDRAW2023新功能有哪些&#xff1f;CorelDRAW2023最新版本更新怎么样&#xff1f;让我们带您详细了解&#xff01; CorelDRAW Graphics Suite 2023是矢量制图行业的标杆软件&#xff0c;2023年全新版本为您带来多项新功能和优化改进。本次更新强调易用性&#xff0c;包括更…...

LearnOpenGL-光照-4.光照贴图

本人刚学OpenGL不久且自学&#xff0c;文中定有代码、术语等错误&#xff0c;欢迎指正 我写的项目地址&#xff1a;https://github.com/liujianjie/LearnOpenGLProject 文章目录光照贴图漫反射贴图例子1镜面光贴图例子2 采样镜面光贴图小结什么是光照贴图光照贴图如何影响颜色光…...

ThreadLocal解析

ThreadLocal是一个存储线程本地变量的对象&#xff0c;在ThreadLocal中存储的对象在其他线程中是不可见的&#xff0c;本文介绍ThreadLocal的原理。 1、threadLocal使用 有如下代码&#xff1a; Slf4j public class TestThreadLocal {public static void main(String[] args…...

时间格式表

时间格式化对照表 仅供参考标识符含义aAM/PM(上午/下午)A0~86399999 (一天的第A微秒)c/cc1~7 (一周的第一天, 周天为1)cccSun/Mon/Tue/Wed/Thu/Fri/Sat (星期几简写)ccccSunday/Monday/Tuesday/Wednesday/Thursday/Friday/Saturday (星期几全拼)d1~31 (月份的第几天, 带0)D1~36…...

enscape和twinmotion哪个好用?

Twinmotion 和 Enscape这2款渲染软件最近受到了一些初学者的关注。这 2 个软件适用于那些需要 3D 渲染但质量不是他们项目的首要任务的人。在本文中&#xff0c;我们将对Twinmotion 和 Enscape 进行面对面的比较&#xff0c;并帮助您确定哪一个更适合您。什么是 Twinmotion&…...

Canvas

canvas介绍 什么是 Canvas&#xff1f;Canvas 是为了解决 Web 页面中只能显示静态图片这个问题而提出的&#xff0c;一个可以使用 JavaScript 等脚本语言向其中绘制图像的 HTML 标签。 Canvas 解决了什么问题 我在 MSDN&#xff08;《Microsoft Developer Network》是微软一…...

旅游预约APP开发具有什么优势和功能

旅游活动目前正在作为广大用户休闲娱乐的一个首选内容&#xff0c;不仅是公司团建活动可以选择旅游&#xff0c;而且一些节假日也可以集结自己的亲朋好友来一次快乐有趣的旅游活动&#xff0c;随着当代人对于旅游的需求呈现上升的趋势&#xff0c;也让旅游预约APP开发开始流行并…...

Objective-C常用命名规范总结

【OC】常用命名规范总结 文章目录 【OC】常用命名规范总结1.类名&#xff08;Class Name)2.协议名&#xff08;Protocol Name)3.方法名&#xff08;Method Name)4.属性名&#xff08;Property Name&#xff09;5.局部变量/实例变量&#xff08;Local / Instance Variables&…...

macOS多出来了:Google云端硬盘、YouTube、表格、幻灯片、Gmail、Google文档等应用

文章目录 问题现象问题原因解决办法 问题现象 macOS启动台&#xff08;Launchpad&#xff09;多出来了&#xff1a;Google云端硬盘、YouTube、表格、幻灯片、Gmail、Google文档等应用。 问题原因 很明显&#xff0c;都是Google家的办公全家桶。这些应用并不是通过独立安装的…...

页面渲染流程与性能优化

页面渲染流程与性能优化详解&#xff08;完整版&#xff09; 一、现代浏览器渲染流程&#xff08;详细说明&#xff09; 1. 构建DOM树 浏览器接收到HTML文档后&#xff0c;会逐步解析并构建DOM&#xff08;Document Object Model&#xff09;树。具体过程如下&#xff1a; (…...

linux 下常用变更-8

1、删除普通用户 查询用户初始UID和GIDls -l /home/ ###家目录中查看UID cat /etc/group ###此文件查看GID删除用户1.编辑文件 /etc/passwd 找到对应的行&#xff0c;YW343:x:0:0::/home/YW343:/bin/bash 2.将标红的位置修改为用户对应初始UID和GID&#xff1a; YW3…...

在鸿蒙HarmonyOS 5中使用DevEco Studio实现录音机应用

1. 项目配置与权限设置 1.1 配置module.json5 {"module": {"requestPermissions": [{"name": "ohos.permission.MICROPHONE","reason": "录音需要麦克风权限"},{"name": "ohos.permission.WRITE…...

MySQL账号权限管理指南:安全创建账户与精细授权技巧

在MySQL数据库管理中&#xff0c;合理创建用户账号并分配精确权限是保障数据安全的核心环节。直接使用root账号进行所有操作不仅危险且难以审计操作行为。今天我们来全面解析MySQL账号创建与权限分配的专业方法。 一、为何需要创建独立账号&#xff1f; 最小权限原则&#xf…...

C#中的CLR属性、依赖属性与附加属性

CLR属性的主要特征 封装性&#xff1a; 隐藏字段的实现细节 提供对字段的受控访问 访问控制&#xff1a; 可单独设置get/set访问器的可见性 可创建只读或只写属性 计算属性&#xff1a; 可以在getter中执行计算逻辑 不需要直接对应一个字段 验证逻辑&#xff1a; 可以…...

C++.OpenGL (20/64)混合(Blending)

混合(Blending) 透明效果核心原理 #mermaid-svg-SWG0UzVfJms7Sm3e {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-SWG0UzVfJms7Sm3e .error-icon{fill:#552222;}#mermaid-svg-SWG0UzVfJms7Sm3e .error-text{fill…...

mac 安装homebrew (nvm 及git)

mac 安装nvm 及git 万恶之源 mac 安装这些东西离不开Xcode。及homebrew 一、先说安装git步骤 通用&#xff1a; 方法一&#xff1a;使用 Homebrew 安装 Git&#xff08;推荐&#xff09; 步骤如下&#xff1a;打开终端&#xff08;Terminal.app&#xff09; 1.安装 Homebrew…...

LangFlow技术架构分析

&#x1f527; LangFlow 的可视化技术栈 前端节点编辑器 底层框架&#xff1a;基于 &#xff08;一个现代化的 React 节点绘图库&#xff09; 功能&#xff1a; 拖拽式构建 LangGraph 状态机 实时连线定义节点依赖关系 可视化调试循环和分支逻辑 与 LangGraph 的深…...