React.js入门级教程附带代码详解
React.js 是一个用于构建用户界面的 JavaScript 库。它最初由 Facebook 开发并维护，现在已经成为前端开发者非常流行的工具之一。以下是一个简单的 React.js 入门级教程，附带代码详解。 1. 设置开发环境 首先，你需要安装 Node.js 和 npm（Node.js 的包管理器）。然后，你可以使用 Create React App 来快速创建一个新的 React 项目。在命令行...
React - 实现菜单栏滚动
简介 本文将会基于react实现滚动菜单栏功能。 技术实现 实现效果 点击菜单，内容区域会自动滚动到对应卡片。内容区域滑动，指定菜单栏会被选中。 ScrollMenu.js import {useRef, useState} from "react";import './ScrollMenu.css'; export const ScrollMenu = ({products...
React状态管理Mobx
3 3 https://cn.mobx.js.org/refguide/observable.html mobx入门基础教程-慕课网 Mobx学习 - 掘金 十分钟入门 MobX & React 十分钟入门 MobX & React 概念 MobX区分了应用程序中的以下三个概念： State(状态)Actions(动作)Derivations(派生) 让我们仔细看看下面的这些概念，或...
React 实现下拉刷新效果
简介 本文基于react实现下拉刷新效果，在下拉的时候会进入loading状态。 实现效果 效果如上图所示，在下拉到底部时候，会出现loading条，在处理完成后loading条消失。 具体代码 布局 & 逻辑 import {useRef, useState} from "react"; export const ScrollView = ({loadingComponent, conte...
Linux系统之部署react-tetris俄罗斯方块小游戏
Linux系统之部署react-tetris俄罗斯方块小游戏 一、react-tetris小游戏介绍 1.1 react-tetris小游戏简介 1.2 项目预览 二、本地环境介绍 2.1 本地环境规划 2.2 本次实践介绍 三、检查本地环境 3.1 检查本地操作系统版本 3.2 检查系统内核版本 四、部署Node.js环境 4.1 下载Node.js安装包 4.2 解压Node.js安装包 4.3 链接...
【React】Vite创建React+TS项目
项目和进行热模块更新时。 4.依次执行命令，启动项目 至此项目已初始化完毕 关闭严格模式 建议关闭严格模式，因为不能自动检测副作用，有意双重调用。将严格模式注释即可。 main.ts中 import React from "react"import ReactDOM from "react-dom/client"import App from "./App.tsx"import "./index.sc...
React组件 - 实现侧滑删除
实现效果 组件源码 SlideContainer.js import React, {useRef, useState} from "react"; export const SlideContainer = (props) => { const childrenArray = React.Children.toArray(props.children); const [left, setLeft] = u...
React-Mock数据
1.概念 说明：React中使用Mock数据主要是为了模拟后端接口和数据，以便前端开发可以在没有实际后端支持的情况下进行。 2.实现步骤 2.1安装 2.2准备json文件 { "list":[ { "name":"李四", "age":"12" },{ "name":"王二", "age":"15" } ]} 2.3添加起动命令 2.4页面显示 ...
React 教程
学习主要来源 React 教程 | 菜鸟教程 React 特点 1.声明式设计 −React采用声明范式，可以轻松描述应用。 2.高效 −React通过对DOM的模拟，最大限度地减少与DOM的交互。 3.灵活 −React可以与已知的库或框架很好地配合。 4.JSX − JSX 是 JavaScript 语法的扩展。React 开发不一定使用 JSX ，但我们建议使用它。 5.组件 − 通过 Reac...
React-路由导航
1.声明式路由导航 1.1概念 说明：声明式导航是指通过在模版中通过<Link/>组件描述出要跳转到哪里去，比如后台管理系统的左侧菜单通常使用这种方式进行。 import {Link} from "react-router-dom"const Login=()=>{ return ( <div>我是登录页面 <Link to={"/home"}>跳转Home页</Link> </div> )}expo...