react：制作新页面

最新推荐文章于 2025-07-04 22:41:26 发布
转载 最新推荐文章于 2025-07-04 22:41:26 发布 · 987 阅读 · 1 ·
CC 4.0 BY-SA版权
原文链接：https://juejin.im/post/5c9dc45b5188250f4d3a0870
文章标签：

#javascript #ViewUI

本文介绍如何创建并配置一个由状态机控制显示与隐藏行为的组件。首先，通过复制现有组件并进行必要的修改来定义新的组件；其次，设置路由以便可以通过导航访问到此组件；接着，实现在组件内部使用状态机数据控制元素的可见性；最后，演示了如何复用现有的API接口以获取和更新数据。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

1，定义一个组件（从其它组件copy一套并重新命名文件），并删掉无用的代码

2，定义该组件的路由，直到可以在页面通过路由访问到



3，在该组件的页面上定义一个被状态机数据控制的div，并写一个按钮来控制这个div显示隐藏（数据变化）


4，获取任意一个接口的数据（从其他页面copy一个接口）


call：获取数据，调接口
put：存取数据，更新页面布局
select：获取状态机

dispatch：改变状态机内的值




通过 React 来构建界面
张培跃的个人博客
01-31 1468
/ 通过createRoot函数，将 id 为 root 的 div 作为呈现 React 内容的容器。注意：以上两个文件可以通过浏览器打开，另存为并保存至目录lib中即可，lit目录文件如下。// ReactDOM 来自react-dom.development.js。同一个挂载位置，可以执行多次 render ，后者会覆盖掉前者的内容。同一个挂载位置，不允许多次被指定为 React 容器。// 在容器中呈现 Hello, world!允许在同一个界面中指定多个挂载容器。：React中的核心库文件。
react新建页面步骤（新手必看）
weixin_30273931的博客
09-28 1875
react+antd新建页面步骤： 1.antd创键一个页面从routes开始 import React from 'react'; import { connect } from 'dva'; import UserPage from '../components/userPage' //这是链接组件的地方 function User({dis...
react项目新增页面方法(Ant Design Pro)
BHSZZY的博客
01-04 2492
最近本人在看react，目标是快速上手可以开发前端页面。好不容易搞清楚了react项目启动流程、路由规则；）下一步就总结下如何写新页面。
从零开始创建一个react项目完整实践（非常全面，建议收藏）
最新发布
hello！
07-04 1566
本文介绍了React项目开发的完整流程，从环境准备到部署上线。主要内容包括：1) 安装Node.js和包管理器；2) 使用Vite或Create React App创建项目；3) 初始化开发环境并配置目录结构；4) 推荐开发顺序：路由规划→页面框架→组件体系→状态管理→API封装→业务逻辑开发→权限控制→环境配置→用户体验优化；5) 调试测试与部署方案。文章还提供了Vite+React+TypeScript的项目模板建议，适合中小型到中大型项目参考。整个流程强调模块化开发和工程化规范，涵盖了从技术选型到实际
react——初步创建页面
qq_37899792的博客
07-24 794
create react app:https://www.html.cn/create-react-app/docs/getting-started/ 创建一个react项目的步骤 npx create-react-app my-app cd my-app npm start (npx来自 npm 5.2+ 或更高版本, 查看npm 旧版本的说明) 你无需安装或配置 Webpack 或 Babel 等工具。 它们是预先配置好并且隐藏的，因此你可以专注于代码。 只需创建一个项目，就可以...
react添加页面
秃头少女
06-26 1297
1、新建要添加的文件夹和页面 2、在路由处引入 import QrUntreatinfo from '../../pages/test/Test'; <Route path="/test" component={Test} title='练习' />
登陆页面：使用React＆Next.js的新登陆页面
02-13
这个项目标题“登陆页面：使用React与Next.js构建的新登录页面”暗示了开发者使用React和Next.js来创建一个登录界面。以下是这个项目可能涉及的关键知识点： 1. **React组件**：React的核心概念是组件化，允许我们...
car-shop-react:这是我的第一个React项目
03-25
这是我的第一个React App，应该是关于汽车的“迷你”电子商店 现场演示： : 重要的 当我构建此应用程序时，我使用了一个“轻型... 店铺页面：商品分类 产品详细信息：能够购买产品 制作说明 克隆回购 npm安装 npm开始
TraversyTutorial-React:youtube = youtu.bew7ejDZ8SWv8
03-13
【标题】"TraversyTutorial-React:youtube = youtu.bew7ejDZ8SWv8" 提供的信息表明，这是一个关于React的教程视频，由Traversy Media制作，并在YouTube上发布，视频ID为"w7ejDZ8SWv8"。Traversy Media是一家知名的...
Vue与React：前端框架的巅峰对决
yan1915766026的博客
12-20 1515
Vue.js 是由尤雨溪（Evan You）于 2014 年创建的一个开源 JavaScript 框架，其设计目标是通过数据驱动的方式构建用户界面。Vue.js 具有诸多显著特点，它是渐进式框架，意味着可以逐步采用其功能，从简单的库到全面的框架，能够适应不同规模的项目需求。例如在小型项目中，开发者只需引入核心库，利用其声明式渲染（Delarative Rendering）和组件系统（Component System）就可以开展业务开发；
react_book:图书“制作过程中的React简介”（ISBN479805075X）支持页面
04-28
“制作时进行React学习简介”支持页面 建立开发环境 代码 注意 添加了对Webpack 5更改的支持（错误：找不到模块'webpack-cli / bin / config-yargs'） 添加了对Webpack5的支持（webpack-cli @ 4） “使用Selenium ...
ReactJS静态网页生成器Gatsby.zip
07-18
Gatsby 可以使用 React.js 把纯文本转换到动态博客或者网站上。目标：无需重载页面转换热重载编辑为构建静态网站创建 React.js 组件模型和生态系统 直观的基于目录的 URLs支持 "Starters" 标签：Gatsby
第4课：使用react-router添加路由，然后为我们的现有主页和新帽子页面创建新路由
02-10
第4课 使用react-router添加路由，然后为我们的现有主页和新帽子页面创建新路由 如何分叉和克隆 关于克隆此项目的简要说明。 如果您希望在克隆此存储库后进行提交并向上推代码，则应首先派生该项目。 为了拥有该存储库的副本，您必须对其进行分叉，以便在自己的配置文件中获得自己的副本！ 您可以在每个GitHub项目的右上角看到fork按钮； 单击它，该项目的副本将以与原始项目相同的名称添加到您的GitHub个人资料中。 分叉该项目后，只需按照从您自己的GitHub存储库中新分叉的项目中克隆它的方式，就可以自由提交并推送它！ 分叉并克隆后： 安装依赖 克隆完项目后，在终端中，请记住运行yarn或npm install来构建项目中的所有依赖项。
react-antdesign组件库实时可视化编辑器实时生成react代码
08-14
ant-design 组件库实时可视化编辑器，实时生成 react 代码
Hello React （创建自己的第一个React 页面）
cvvvvvvvvvv的博客
11-05 2549
Rract是啥？ React 是用于构建用户界面的 JavaScript 库 构建用户界面. User Interface，对咱们前端来说，简单理解为：HTML 页面 javscrtipt库。不是框架，是库， react 全家桶才是框架 react 全家桶： react: 核心库 react-dom: dom操作 react-router：路由, redux：集中状态管理 背景 Rract最牛逼！全球使用最多 特点 声明式 用类似于html的语法来定义页面。react中通过数据驱动视图的变
Vuex是什么?
wangmj518的专栏
09-25 198
记得去年公司招聘前端工程师的时候，我要负责准备面试题去考验面试者，让我记忆深刻的有一件事，我看大多数面试者简历上都写了熟练掌握Vuex，然而当我问起的时候，大部分回答都支支吾吾，解释不清，而当我提起与Vuex书写相似的Vux的时候，偶尔会被面试者反问到：“这不是一个东西吗？”，和我一同负责面试的技术总监（python，负责后台）也会充满疑惑，也会小声问道：“不是一样的吗？”，我就只好解释完全不是一个东西，一个是状态管理模式，一个是移动端UI组件库等等，说得我口干舌燥...... ...
你为什么应该学习React?
张旭乾 - 全栈工程师/海归
03-14 836
Hello! 今天来带你走进 React 的大门！我第一次听说 React 是我在美国读研的时候，室友选了 web programming 这节课，然后遇到了关于 react 的好多问题，就是总也配置不好。我看他那个时候 React 的配置特别麻烦，要引入一堆依赖，像 bower, babel 等等… 还有文档写的也不清楚。有一次他刚开始做一个作业，问了我一个问题，大概是有一个组件显示不出来，结果...
React学习笔记（一）使用Create React App快速构建一个React项目并创建一个登陆页面
克格莫（有需要的私信）
06-17 899
首先安装nodeJs App.js中这么写: import React from 'react'; import logo from './logo.svg'; import './App.css'; function App() { //设置页面标题 document.title = '这里写标题'; //无状态组件获取input的值 let usernameid; //用户名输入框的值 let passwordid; //密码输入框的值 const login =
react 创建界面的2种常见方式以及react hooks
smaller_coder的博客
11-21 446
1、无状态state，function组件 import React, { Component } from 'react' import ChildTest from './test' function Test(props) { return ( <div className="safe-wrap"> <ChildTest camera="测试"...
React Workshop: 制作2.0版本电影海报应用
CSS3负责页面的样式和布局。 综上所述，这些文件信息揭示了在构建一个电影海报展示网站时可能涉及的多个IT知识点，从React技术栈的使用，到JavaScript ES6的特性，再到网络API交互和前端设计的最佳实践。这些知识点...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值