当前位置: 首页 > 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开发开始流行并…...

基于FPGA的PID算法学习———实现PID比例控制算法

基于FPGA的PID算法学习 前言一、PID算法分析二、PID仿真分析1. PID代码2.PI代码3.P代码4.顶层5.测试文件6.仿真波形 总结 前言 学习内容&#xff1a;参考网站&#xff1a; PID算法控制 PID即&#xff1a;Proportional&#xff08;比例&#xff09;、Integral&#xff08;积分&…...

爬虫基础学习day2

# 爬虫设计领域 工商&#xff1a;企查查、天眼查短视频&#xff1a;抖音、快手、西瓜 ---> 飞瓜电商&#xff1a;京东、淘宝、聚美优品、亚马逊 ---> 分析店铺经营决策标题、排名航空&#xff1a;抓取所有航空公司价格 ---> 去哪儿自媒体&#xff1a;采集自媒体数据进…...

回溯算法学习

一、电话号码的字母组合 import java.util.ArrayList; import java.util.List;import javax.management.loading.PrivateClassLoader;public class letterCombinations {private static final String[] KEYPAD {"", //0"", //1"abc", //2"…...

在QWebEngineView上实现鼠标、触摸等事件捕获的解决方案

这个问题我看其他博主也写了&#xff0c;要么要会员、要么写的乱七八糟。这里我整理一下&#xff0c;把问题说清楚并且给出代码&#xff0c;拿去用就行&#xff0c;照着葫芦画瓢。 问题 在继承QWebEngineView后&#xff0c;重写mousePressEvent或event函数无法捕获鼠标按下事…...

区块链技术概述

区块链技术是一种去中心化、分布式账本技术&#xff0c;通过密码学、共识机制和智能合约等核心组件&#xff0c;实现数据不可篡改、透明可追溯的系统。 一、核心技术 1. 去中心化 特点&#xff1a;数据存储在网络中的多个节点&#xff08;计算机&#xff09;&#xff0c;而非…...

五子棋测试用例

一.项目背景 1.1 项目简介 传统棋类文化的推广 五子棋是一种古老的棋类游戏&#xff0c;有着深厚的文化底蕴。通过将五子棋制作成网页游戏&#xff0c;可以让更多的人了解和接触到这一传统棋类文化。无论是国内还是国外的玩家&#xff0c;都可以通过网页五子棋感受到东方棋类…...

Tauri2学习笔记

教程地址&#xff1a;https://www.bilibili.com/video/BV1Ca411N7mF?spm_id_from333.788.player.switch&vd_source707ec8983cc32e6e065d5496a7f79ee6 官方指引&#xff1a;https://tauri.app/zh-cn/start/ 目前Tauri2的教程视频不多&#xff0c;我按照Tauri1的教程来学习&…...

MeshGPT 笔记

[2311.15475] MeshGPT: Generating Triangle Meshes with Decoder-Only Transformers https://library.scholarcy.com/try 真正意义上的AI生成三维模型MESHGPT来袭&#xff01;_哔哩哔哩_bilibili GitHub - lucidrains/meshgpt-pytorch: Implementation of MeshGPT, SOTA Me…...

C++11 constexpr和字面类型:从入门到精通

文章目录 引言一、constexpr的基本概念与使用1.1 constexpr的定义与作用1.2 constexpr变量1.3 constexpr函数1.4 constexpr在类构造函数中的应用1.5 constexpr的优势 二、字面类型的基本概念与使用2.1 字面类型的定义与作用2.2 字面类型的应用场景2.2.1 常量定义2.2.2 模板参数…...

比特币:固若金汤的数字堡垒与它的四道防线

第一道防线&#xff1a;机密信函——无法破解的哈希加密 将每一笔比特币交易比作一封在堡垒内部传递的机密信函。 解释“哈希”&#xff08;Hashing&#xff09;就是一种军事级的加密术&#xff08;SHA-256&#xff09;&#xff0c;能将信函内容&#xff08;交易细节&#xf…...