React开发08_项目练习

React开发08_项目练习

1-参考地址

• React中文官方教程

2-动手实操

编写一个最简单的React项目，练习使用函数的传递，方便后续的学习

1-快速常见React项目

# 1-创建项目 pnpm create vite hello_react_v1 pnpm create vite hello_react_v1 --template react-ts # 2-项目运行 pnpm install pnpm dev # 3-添加项目依赖(选填) pnpm add clsx pnpm add tailwind-merge pnpm add autoprefixer pnpm add tailwindcss pnpm add @tailwindcss/postcss

2-页面编写

1-编写页面

functionMyButton(){return(<button>我是一个按钮11111</button>);}exportdefaultfunctionMyApp(){return(<div><h1>欢迎来到我的应用</h1><MyButton/></div>);}

2-添加数据

import{useState}from'react';interfaceUser{username:string;isLoggedIn:boolean;}functionMyButton(){// 对象操作-理解为set方法const[user,setUser]=useState<User>({username:'',isLoggedIn:false});consthandleLogIn=()=>{setUser({username:'张三',isLoggedIn:true})};consthandleLogout=()=>{setUser({username:'',isLoggedIn:false})};return(<div><h1>{user.username||'未登录'}</h1>{user.isLoggedIn?(<button onClick={handleLogout}>登出</button>):(<button onClick={handleLogIn}>登入</button>)}</div>);}exportdefaultfunctionMyApp(){return(<div><h1>欢迎来到我的应用</h1><MyButton/></div>);}

3-使用form表单

import{typeChangeEvent,typeFormEvent,useState}from'react';// 定义表单数据的类型接口interfaceLoginFormData{username:string;password:string;isLoggedIn:boolean;}functionMyFormData(){// 这里创建了两个状态：表单数据和登录状态const[formData,setFormData]=useState<LoginFormData>({username:'',password:'',isLoggedIn:false});consthandleSubmit=(e:FormEvent<HTMLFormElement>)=>{e.preventDefault();// 阻止表单默认提交（页面刷新）// 模拟登录验证（实际项目中这里会调用 API）setFormData(prev=>({...prev,isLoggedIn:true}));};// 处理输入框变化，更新状态（受控组件模式）consthandleInputChange=(e:ChangeEvent<HTMLInputElement>)=>{const{name,value}=e.target;// 更新表单数据状态setFormData(prev=>({...prev,[name]:value}));};consthandleLogout=()=>{setFormData({username:'',password:'',isLoggedIn:false})};return(<div><h1>{formData.isLoggedIn||'未登录'}</h1>{formData.isLoggedIn?(<button onClick={handleLogout}>登出</button>):(<form onSubmit={handleSubmit}><input type="text"value={formData.username}name="username"onChange={handleInputChange}placeholder="请输入用户名"/><br/><input type="password"value={formData.password}name="password"onChange={handleInputChange}placeholder="请输入密码"/><br/><button type="submit">登录</button></form>)}</div>);}exportdefaultfunctionMyApp(){return(<div><h1>欢迎来到我的应用</h1><MyFormData/></div>);}

4-完善form表单

import{typeChangeEvent,typeFormEvent,useState}from'react';// 定义表单数据的类型接口interfaceLoginFormData{username:string;password:string;isLoggedIn:boolean;}functionMyFormData(){// 这里创建了两个状态：表单数据和登录状态const[formData,setFormData]=useState<LoginFormData>({username:'',password:'',isLoggedIn:false});consthandleSubmit=(e:FormEvent<HTMLFormElement>)=>{e.preventDefault();// 阻止表单默认提交（页面刷新）// 简单的表单验证if(!formData.username.trim()||!formData.password.trim()){alert('请输入用户名和密码');return;}// 模拟登录验证（实际项目中这里会调用 API）if(formData.username==='admin'&&formData.password==='123456'){setFormData(prev=>({...prev,isLoggedIn:true}));alert('登录成功！');}else{alert('用户名或密码错误');// 可选：清空密码setFormData(prev=>({...prev,password:''}));}};// 处理输入框变化，更新状态（受控组件模式）consthandleInputChange=(e:ChangeEvent<HTMLInputElement>)=>{const{name,value}=e.target;// 更新表单数据状态setFormData(prev=>({...prev,[name]:value}));};consthandleLogout=()=>{setFormData({username:'',password:'',isLoggedIn:false})};return(<div><h1>{formData.isLoggedIn||'未登录'}</h1>{formData.isLoggedIn?(<button onClick={handleLogout}>登出</button>):(<form onSubmit={handleSubmit}><input type="text"value={formData.username}name="username"onChange={handleInputChange}placeholder="请输入用户名"/><br/><input type="password"value={formData.password}name="password"onChange={handleInputChange}placeholder="请输入密码"/><br/><button type="submit">登录</button></form>)}</div>);}exportdefaultfunctionMyApp(){return(<div><h1>欢迎来到我的应用</h1><MyFormData/></div>);}