搭建react项目

一、环境准备

1、安装node

官网下载安装:https://nodejs.org/en
注: npm5.2以后,安装node会自动安装npm和npx

2、安装webpack

npm install -g webpack

3、安装create-react-app

npm install -g create-react-app

二、创建react项目

1、初始化项目

npx create-react-app [项目名称]   // 例如:npx create-react-app react-demo
  • 安装成功

在这里插入图片描述

  • 初始项目结构

在这里插入图片描述

2、启动项目

npm start

启动成功后,访问 http://localhost:3000 初始界面如下:

在这里插入图片描述

三、基础配置

1、src目录调整

在src目录下创建如下文件夹,方便资源区分及管理

  • assets:静态资源
  • router:路由
  • components:公共组件
  • utils:工具
  • views:页面

2、路由配置

  • 安装react-router-dom
npm i react-router-dom
  • 新建页面

在views文件夹下新建页面:
登录页:views/login/index.js

import React from 'react'class Login extends React.Component {// 数据state = {username: '',password: '',}// 表单-受控组件handleChange = e => {this.setState({[e.target.name]: e.target.value,})}// 渲染domrender() {return (<div className="login-wrap"><div className="login-content"><h1>用户登录</h1><inputtype="text"placeholder="请输入用户名"name="username"value={this.state.username}onChange={this.handleChange}></input><inputtype="text"placeholder="请输入密码"name="password"value={this.state.password}onChange={this.handleChange}></input><button>登 录</button></div></div>)}
}// 导出包裹后的类组件
export default Login

首页:views/home/index.js

import React from 'react'class Home extends React.Component {render() {return (<div>我是首页</div>)}
}export default Home 
  • 集成路由

router/index.js中集中引入页面,写路由数组

import Login from '../views/login/index'
import Home from '../views/home/index'export const routers = [{path: '/',name: '登录',component: Login,},{path: '/home',name: 'home',component: Home,},
]
  • 配置路由

src/App.js根组件写路由配置信息

/*** 根组件* 路由配置信息*/import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom'  // 导入路由核心
import { routers } from '../src/router/index'  // 导入路由// 使用Router组件包裹整个应用
// 使用Link组件作为导航菜单,路由入口
// 使用Route组件配置路由规则和要展示的组件,路由出口,exact属性表示精确匹配
const App = () => (<Router><div>{/* 导航菜单,路由入口 */}<div>{routers.map((item, index) => {return (<Link key={index} to={item.path} style={{ marginRight: '16px' }}>{item.name}</Link>)})}</div>{/* 路由出口 */}<Routes>{routers.map((item, index) => {return (<Routeexactkey={index}path={item.path}element={<item.component />}></Route>)})}</Routes></div></Router>
)export default App
  • 在入口文件使用

src/index.js入口文件引入根组件App

/*** 项目入口文件*/// 1、导入React
import React from 'react'
import ReactDOM from 'react-dom/client'
import reportWebVitals from './reportWebVitals'import App from './App'   // 引入根组件// 2、创建React元素
const root = ReactDOM.createRoot(document.getElementById('root'))// 3、渲染React元素
root.render(<React.StrictMode><App /></React.StrictMode>
)// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals()

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/164168.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

DFS(分布式文件系统)与 DFSR(分布式文件系统复制)的区别

DFS&#xff08;分布式文件系统&#xff09;和 DFSR&#xff08;分布式文件系统复制&#xff09;是两种不同的技术&#xff0c;尽管它们在名称上有一些相似之处&#xff0c;但它们的用途和功能有所不同。 DFS&#xff08;分布式文件系统&#xff09; DFS 是一种用于创建和管理…

GEE:为机器学习算法(随机森林、支持矢量机等)加入膨胀/腐蚀特征

作者:CSDN @ _养乐多_ 腐蚀和膨胀是数学形态学图像处理中的两个基本操作,用于修改和分析二值图像(包含只有两个像素值的图像,通常是黑和白)。 腐蚀和膨胀操作可以作为机器学习中的特征变量,用来分类,比如在博客《GEE:随机森林分类教程(样本制作、特征添加、训练、精…

Flink学习---15、FlinkCDC(CDC介绍、案例实操)

星光下的赶路人star的个人主页 未来总是藏在迷雾中让人胆怯&#xff0c;但当你踏入其中&#xff0c;便会云开雾散 文章目录 1、CDC简介1.1 什么是CDC1.2 CDC的种类1.3 Flink-CDC 2、FlinkCDC案例实操2.1 开启MySQL Binlog并重启MySQL2.2 FlinkSQL方式的应用2.2.1 导入依赖2.2.2…

解密zkLogin:探索前沿的Sui身份验证解决方案

由于钱包复杂性导致的新用户入门障碍是区块链中一个长期存在的问题&#xff0c;而zkLogin是其简单的解决方案。通过使用前沿的密码学和技术&#xff0c;zkLogin既优雅又复杂。本文深入探讨了zkLogin的工作原理&#xff0c;涵盖了用户和开发者的安全性方面&#xff0c;并解释了S…

如何打造独立站?这4个要点必须做到!

“什么是独立站”独立站指的是个人或小团队独立创建和管理的网站&#xff0c;与依赖于第三方平台的博客、社交媒体或在线商店不同。独立站的所有权和控制权完全归个人或小团队所有&#xff0c;因此具有更大的自主性和独立性&#xff0c;不受第三方平台的限制。 独立站是由个人…

抽象数据库

在刚刚的文章中&#xff0c;完成了无范式到三级范式的过程 : 遵循原子性。即&#xff0c;表中字段的数据&#xff0c;不可以再拆分。 在满足第一范式的情况下&#xff0c;遵循唯一性&#xff0c;消除部分依赖。即&#xff0c;表中任意一个主键或任意一组联合主键&#xff0c…

企业数字化转型时,会遇到的5大挑战

企业数字化转型时&#xff0c;会遇到的5大挑战添加链接描述 数字化转型已然是当今商业战略的一大基石&#xff0c;根据Gartner的《2023年度董事会调查》显示&#xff0c;有89%的企业将数字业务视为其增长的核心。但该研究的另一项统计数据也显示&#xff1a;在这些企业中&…

python -pandas -处理excel合并单元格问题

对于合并的单元格&#xff0c;不进行处理情况下&#xff0c;会默认输出nan问题 解决方法&#xff1a; class A(object):def __init__(self, xlsx_file_path, sheet_index):self.xlsx_file FileDataProcesser.read_excel(xlsx_file_path, sheet_index)self.sheet_data self.…

堆-----数据结构

引言 什么是堆&#xff1f;堆是一种特殊的数据结构&#xff08;用数组表示的树&#xff09;。 为什么要使用到堆&#xff1f;比如一场比赛&#xff0c;如果使用擂台赛的方式来决出冠军&#xff08;实力第一&#xff09;&#xff0c;就很难知道实力第二的队伍是什么了。 但是…

Java数字处理类-- Math类--数学运算

在Java中提供了一个执行数学基本运算的Math类,该类包括了常用的数学运算方法和常量&#xff0c;包括【三角函数方法】&#xff0c;【指数函数方法】&#xff0c;【取整函数方法】、【取最大值函数方法】、【取最小值函数方法】、【取平均值函数方法】、【对数函数方法】&#x…

PyTorch 模型性能分析和优化 - 第 6 部分

玩具模型 为了方便我们的讨论&#xff0c;我们使用流行的 timm python 模块&#xff08;版本 0.9.7&#xff09;定义了一个简单的基于 Vision Transformer (ViT) 的分类模型。我们将模型的 patch_drop_rate 标志设置为 0.5&#xff0c;这会导致模型在每个训练步骤中随机丢弃一半…

软件测试肖sir__python之ui自动化定位方法(2)

Selenium中元素定位方法 一、定位方法 要实现UI自动化&#xff0c;就必须学会定位web页面元素&#xff0c;Selenium核心 webdriver模块提供了9种定位元素方法&#xff1a; 定位方式 提供方法 id定位 find_element_by_id() name定位 find_element_by_name() class定位 find_elem…

开源游戏引擎和模拟器的项目合集 | 开源专题 No.38

yuzu-emu/yuzu Stars: 26.2k License: GPL-3.0 yuzu是一款全球最受欢迎的开源Nintendo Switch模拟器&#xff0c;由Citra创建者编写。它采用C语言编写&#xff0c;并具有可移植性&#xff0c;在Windows和Linux上进行积极维护。该模拟器能够全速运行大多数商业游戏&#xff0c…

TSINGSEE烟火识别算法的技术原理是什么?如何应用在视频监控中?

AI烟火识别算法是基于深度学习技术的一种视觉识别算法&#xff0c;主要用于在视频监控场景中自动检测和识别烟雾、火焰的行为。该技术基于深度学习神经网络技术&#xff0c;可以动态识别烟雾和火焰从有到无、从小到大、从大到小、从小烟到浓烟的状态转换过程。 1、技术原理 1…

图论与网络优化

2.概念与计算 2.1 图的定义 2.1.1 定义 图(graph) G G G 是一个有序的三元组&#xff0c;记作 G < V ( G ) , E ( G ) , ψ ( G ) > G<V(G),E(G),\psi (G)> G<V(G),E(G),ψ(G)>。 V ( G ) V(G) V(G) 是顶点集。 E ( G ) E(G) E(G) 是边集。 ψ ( G ) \…

HTTP基础

HTTP请求报文格式 HTTP 的请求报文分为三个部分 请求行&#xff08;Request Line&#xff09;、请求头&#xff08;Request Header&#xff09;和请求体&#xff08;Request Body&#xff09;。请求体是HTTP请求的核心&#xff0c;其中包含了需要上传服务器的数据。常见的请求…

Open3D(C++) 最小二乘拟合二维直线(拉格朗日乘子法)

目录 一、算法原理二、代码实现三、结果展示本文由CSDN点云侠原创,爬虫网站自重 一、算法原理 平面直线的表达式为: y = k x + b (1) y=kx+

oracle-AWR报告生成方法

AWR报告生成方法 1. 以oracle用户登陆服务器 2. 进入到要保存awr报告的目录 3. 以sysdba身份连接数据库 sqlplus / as sysdba4. 执行生成AWR报告命令 ?/rdbms/admin/awrrpt.sql5. 选择AWR报告的文件格式 6. 选择生成多少天的AWR报告 7. 选择报告的快照起始和结束ID 8. 输入生…

npm ERR! exited with error code: 128

1.遇到的问题 报错信息&#xff1a;npm ERR! E:\tools\Gitt\Git\cmd\git.EXE ls-remote -h -t https://github.com/nhn/raphael.git npm ERR! npm ERR! fatal: unable to access https://github.com/nhn/raphael.git/: OpenSSL SSL_read: Connection was reset, errno 10054 …

JVM相关面试题

文章目录 什么是 JVM?Java语言的执行原理&#xff1f;Java的字节码文件结构&#xff1f;什么是u2,u4? JVM 加载过程都是什么步骤&#xff1f;什么是类加载器&#xff1f;什么是双亲委派模型如何打破双亲委派机制&#xff1f;什么是 tomcat 类加载机制&#xff1f;什么是JVM内…