网站开发都用什么数据库,百度爱采购关键词优化,店铺空间设计案例,vs做的网站图片显示不了B站视频链接
一、React介绍
React由Meta公司开发#xff0c;是一个用于 构建Web和原生交互界面的库
React的优势
相较于传统基于DOM开发的优势
组件化的开发方式不错的性能
相较于其它前端框架的优势
丰富的生态跨平台支持
React的市场情况
全球最流行#xff0c;大…B站视频链接
一、React介绍
React由Meta公司开发是一个用于 构建Web和原生交互界面的库
React的优势
相较于传统基于DOM开发的优势
组件化的开发方式不错的性能
相较于其它前端框架的优势
丰富的生态跨平台支持
React的市场情况
全球最流行大厂必备
二、开发环境创建
create-react-app是一个快速创建React开发环境的工具底层由Webpack构件封装了配置细节开箱即用 执行命令
npx create-react-app react-basic启动命令
npm start 或者是npm run start ,run 可以省略
npx - Node.js工具命令查找并执行后续的包命令create-react-app - 核心包固定写法用于创建React项目react-basic React项目的名称可以自定义 :::warning 创建React项目的更多方式 https://zh-hans.react.dev/learn/start-a-new-react-project :::
核心依赖和核心命令
三、文件介绍
在新手阶段删除多余的文件只保留App.js和index.js 1. index.js 是整个项目的入口从这里开始运行 保留基础代码
// react 必要的2个核心包
import React from react;
import ReactDOM from react-dom/client;// 导入项目根组件
import App from ./App;// 把APP根组件渲染到id为root的dom节点上
const root ReactDOM.createRoot(document.getElementById(root));
root.render(App /);
App.js
// 项目的跟组件
// APP.js被引入到index.js ,被index.js渲染到public/index.html(root)
function App() {return div classNameApp删除多余的东西了/div;
}export default App;
四、JSX基础
什么是JSX 概念JSX是JavaScript和XMl(HTML)的缩写表示在JS代码中编写HTML模版结构它是React中构建UI的方式 const message this is messagefunction App(){return (divh1this is title/h1{message}/div)
}优势
HTML的声明式模版写法JavaScript的可编程能力
JSX的本质 JSX并不是标准的JS语法它是 JS的语法扩展浏览器本身不能识别需要通过解析工具做解析之后才能在浏览器中使用 JSX高频场景-JS表达式 在JSX中可以通过 大括号语法{} 识别JavaScript中的表达式比如常见的变量、函数调用、方法调用等等 使用引号传递字符串使用JS变量函数调用和方法调用使用JavaScript对象 :::warning 注意if语句、switch语句、变量声明不属于表达式不能出现在{}中仅支持表达式 :::
const message this is messagefunction getAge(){return 18
}function App(){return (divh1this is title/h1{/* 字符串识别 */}{this is str}{/* 变量识别 */}{message}{/* 变量识别 */}{message}{/* 函数调用 渲染为函数的返回值 */}{getAge()}{/* 方法调用 */}{new moment(Date().getDate).format(YYYY-MM-DD)}{/* 使用js对象 */}div style{{ color: red }}/div{/* 里面的花括号是对象结构外层花括号是识别表达式的语法 */}/div)
}JSX高频场景-列表渲染 在JSX中可以使用原生js种的map方法 实现列表渲染 注意要加上key const list [{id:1001, name:Vue},{id:1002, name: React},{id:1003, name: Angular}
]function App(){return (ul{list.map(itemli key{item.id}{item}/li)}/ul)
}JSX高频场景-条件渲染 在React中可以通过逻辑与运算符、三元表达式(? 实现基础的条件渲染 是短路与只要第一个操作数是假后面的就不会被执行 如果只控制一个元素的显示和隐藏可以使用短路与2个的话可以用三元运算符
const flag true
const loading falsefunction App(){return ({flag spanthis is span/span}{loading ? spanloading.../span:spanthis is span/span}/)
}JSX高频场景-复杂条件渲染 需求列表中需要根据文章的状态适配 解决方案自定义函数 判断语句 const type 1 // 0|1|3function getArticleJSX(){if(type 0){return div无图模式模版/div}else if(type 1){return div单图模式模版/div}else(type 3){return div三图模式模版/div}
}function App(){return ({ getArticleJSX() }/)
}我自己写的
const data [{ id: 0, title: 文章0, img: [] },{ id: 1, title: 文章1, img: [../assert/1.png] },{ id: 2, title: 文章2, img: [../assert/21.png, ../assert/22.png] },
];const getImgTemplate (item) {if (item.img.length 0) {return div/div;} else if (item.img.length 1) {return (divimg src{item.img[0]} alt{item.img[0]} /img src{item.img[1]} alt{item.img[1]} //div);} else if (item.img.length 2) {return (divimg src{item.img[0]} alt{item.img[0]} /img src{item.img[1]} alt{item.img[1]} /img src{item.img[2]} alt{item.img[2]} //div);}
};
function App() {return data.map((item) div key{item.id}{getImgTemplate(item)}/div);
}export default App;
React的事件绑定
基础实现 React中的事件绑定通过语法 on 事件名称 { 事件处理程序 }整体上遵循驼峰命名法 function App(){const clickHandler (){console.log(button按钮点击了)}return (button onClick{clickHandler}click me/button)
}使用事件参数 在事件回调函数中设置形参e即可 function App(){const clickHandler (e){console.log(button按钮点击了, e)}return (button onClick{clickHandler}click me/button)
}传递自定义参数 语法事件绑定的位置改造成箭头函数的写法在执行clickHandler实际处理业务函数的时候传递实参 function App(){const clickHandler (name){console.log(button按钮点击了, name)}return (button onClick{()clickHandler(jack)}click me/button)
}:::warning 注意不能直接写函数调用这里事件绑定需要一个函数引用 :::
同时传递事件对象和自定义参数 语法在事件绑定的位置传递事件实参e和自定义参数clickHandler中声明形参注意顺序对应 function App(){const clickHandler (name,e){console.log(button按钮点击了, name,e)}return (button onClick{(e)clickHandler(jack,e)}click me/button)
}React组件基础使用
组件是什么
概念一个组件就是一个用户界面的一部分它可以有自己的逻辑和外观组件之间可以互相嵌套也可以服用多次
组件基础使用 在React中一个组件就是首字母大写的函数内部存放了组件的逻辑和视图UI, 渲染组件只需要把组件当成标签书写即可 // 1. 定义组件
function Button(){return buttonclick me/button
}// 2. 使用组件
function App(){return (div{/* 自闭和 */}Button/{/* 成对标签 */}Button/Button/div)
}组件状态管理-useState
基础使用 useState 是一个 React Hook函数它允许我们向组件添加一个状态变量, 从而控制影响组件的渲染结果 和普通JS变量不同的是状态变量一旦发生变化组件的视图UI也会跟着变化数据驱动视图 function App(){const [ count, setCount ] React.useState(0)return (divbutton onClick{()setCount(count1)}{ count }/button/div)
}状态的修改规则 在React中状态被认为是只读的我们应该始终替换它而不是修改它, 直接修改状态不能引发视图更新 修改对象状态 对于对象类型的状态变量应该始终给set方法一个全新的对象 来进行修改 组件的基础样式处理 React组件基础的样式控制有俩种方式行内样式和class类名控制 div style{{ color:red}}this is div/div.foo{color: red;
}import ./index.cssfunction App(){return (divspan classNamefoothis is span/span/div)
}B站评论案例
外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传
渲染评论列表删除评论实现渲染导航Tab和高亮实现评论列表排序功能实现
基础模版
import { useState } from react
import ./App.scss
import avatar from ./images/bozai.png/*** 评论列表的渲染和操作** 1. 根据状态渲染评论列表* 2. 删除评论*/// 评论列表数据
const defaultList [{// 评论idrpid: 3,// 用户信息user: {uid: 13258165,avatar: ,uname: 周杰伦,},// 评论内容content: 哎哟不错哦,// 评论时间ctime: 10-18 08:15,like: 88,},{rpid: 2,user: {uid: 36080105,avatar: ,uname: 许嵩,},content: 我寻你千百度 日出到迟暮,ctime: 11-13 11:29,like: 88,},{rpid: 1,user: {uid: 30009257,avatar,uname: 黑马前端,},content: 学前端就来黑马,ctime: 10-19 09:00,like: 66,},
]
// 当前登录用户信息
const user {// 用户iduid: 30009257,// 用户头像avatar,// 用户昵称uname: 黑马前端,
}/*** 导航 Tab 的渲染和操作** 1. 渲染导航 Tab 和高亮* 2. 评论列表排序* 最热 喜欢数量降序* 最新 创建时间降序*/// 导航 Tab 数组
const tabs [{ type: hot, text: 最热 },{ type: time, text: 最新 },
]const App () {return (div classNameapp{/* 导航 Tab */}div classNamereply-navigationul classNamenav-barli classNamenav-titlespan classNamenav-title-text评论/span{/* 评论数量 */}span classNametotal-reply{10}/span/lili classNamenav-sort{/* 高亮类名 active */}span classNamenav-item最新/spanspan classNamenav-item最热/span/li/ul/divdiv classNamereply-wrap{/* 发表评论 */}div classNamebox-normal{/* 当前用户头像 */}div classNamereply-box-avatardiv classNamebili-avatarimg classNamebili-avatar-img src{avatar} alt用户头像 //div/divdiv classNamereply-box-wrap{/* 评论框 */}textareaclassNamereply-box-textareaplaceholder发一条友善的评论/{/* 发布按钮 */}div classNamereply-box-senddiv classNamesend-text发布/div/div/div/div{/* 评论列表 */}div classNamereply-list{/* 评论项 */}div classNamereply-item{/* 头像 */}div classNameroot-reply-avatardiv classNamebili-avatarimgclassNamebili-avatar-imgalt//div/divdiv classNamecontent-wrap{/* 用户名 */}div classNameuser-infodiv classNameuser-namejack/div/div{/* 评论内容 */}div classNameroot-replyspan classNamereply-content这是一条评论回复/spandiv classNamereply-info{/* 评论时间 */}span classNamereply-time{2023-11-11}/span{/* 评论数量 */}span classNamereply-time点赞数:{100}/spanspan classNamedelete-btn删除/span/div/div/div/div/div/div/div)
}export default App.app {width: 80%;margin: 50px auto;
}.reply-navigation {margin-bottom: 22px;.nav-bar {display: flex;align-items: center;margin: 0;padding: 0;list-style: none;.nav-title {display: flex;align-items: center;width: 114px;font-size: 20px;.nav-title-text {color: #18191c;font-weight: 500;}.total-reply {margin: 0 36px 0 6px;color: #9499a0;font-weight: normal;font-size: 13px;}}.nav-sort {display: flex;align-items: center;color: #9499a0;font-size: 13px;.nav-item {cursor: pointer;:hover {color: #00aeec;}:last-child::after {display: none;}::after {content: ;display: inline-block;height: 10px;width: 1px;margin: -1px 12px;background-color: #9499a0;}}.nav-item.active {color: #18191c;}}}
}.reply-wrap {position: relative;
}
.box-normal {display: flex;transition: 0.2s;.reply-box-avatar {display: flex;align-items: center;justify-content: center;width: 80px;height: 50px;}.reply-box-wrap {display: flex;position: relative;flex: 1;.reply-box-textarea {width: 100%;height: 50px;padding: 5px 10px;box-sizing: border-box;color: #181931;font-family: inherit;line-height: 38px;background-color: #f1f2f3;border: 1px solid #f1f2f3;border-radius: 6px;outline: none;resize: none;transition: 0.2s;::placeholder {color: #9499a0;font-size: 12px;}:focus {height: 60px;background-color: #fff;border-color: #c9ccd0;}}}.reply-box-send {position: relative;display: flex;flex-basis: 86px;align-items: center;justify-content: center;margin-left: 10px;border-radius: 4px;cursor: pointer;transition: 0.2s; .send-text {position: absolute;z-index: 1;color: #fff;font-size: 16px;}::after {position: absolute;width: 100%;height: 100%;background-color: #00aeec;border-radius: 4px;opacity: 0.5;content: ;}:hover::after {opacity: 1;}}
}
.bili-avatar {position: relative;display: block;width: 48px;height: 48px;margin: 0;padding: 0;border-radius: 50%;
}
.bili-avatar-img {position: absolute;top: 50%;left: 50%;display: block;width: 48px;height: 48px;object-fit: cover;border: none;border-radius: 50%;image-rendering: -webkit-optimize-contrast;transform: translate(-50%, -50%);
}// 评论列表
.reply-list {margin-top: 14px;
}
.reply-item {padding: 22px 0 0 80px;.root-reply-avatar {position: absolute;left: 0;display: flex;justify-content: center;width: 80px;cursor: pointer;}.content-wrap {position: relative;flex: 1;::after {content: ;display: block;height: 1px;width: 100%;margin-top: 14px;background-color: #e3e5e7;}.user-info {display: flex;align-items: center;margin-bottom: 4px;.user-name {height: 30px;margin-right: 5px;color: #61666d;font-size: 13px;line-height: 30px;cursor: pointer;}}.root-reply {position: relative;padding: 2px 0;color: #181931;font-size: 15px;line-height: 24px;.reply-info {position: relative;display: flex;align-items: center;margin-top: 2px;color: #9499a0;font-size: 13px;.reply-time {width: 76px;margin-right: 20px;}.reply-like {display: flex;align-items: center;margin-right: 19px;.like-icon {width: 14px;height: 14px;margin-right: 5px;color: #9499a0;background-position: -153px -25px;:hover {background-position: -218px -25px;}}.like-icon.liked {background-position: -154px -89px;}}.reply-dislike {display: flex;align-items: center;margin-right: 19px;.dislike-icon {width: 16px;height: 16px;background-position: -153px -153px;:hover {background-position: -217px -153px;}}.dislike-icon.disliked {background-position: -154px -217px;}}.delete-btn {cursor: pointer;:hover {color: #00aeec;}}}}}
}.reply-none {height: 64px;margin-bottom: 80px;color: #99a2aa;font-size: 13px;line-height: 64px;text-align: center;
}完成版本 import { useState } from react
import ./App.scss
import avatar from ./images/bozai.png
import orderBy from lodash/orderBy/*** 评论列表的渲染和操作** 1. 根据状态渲染评论列表* 2. 删除评论*/// 评论列表数据
const defaultList [{// 评论idrpid: 3,// 用户信息user: {uid: 13258165,avatar: ,uname: 周杰伦,},// 评论内容content: 哎哟不错哦,// 评论时间ctime: 10-18 08:15,like: 88,},{rpid: 2,user: {uid: 36080105,avatar: ,uname: 许嵩,},content: 我寻你千百度 日出到迟暮,ctime: 11-13 11:29,like: 88,},{rpid: 1,user: {uid: 30009257,avatar,uname: 黑马前端,},content: 学前端就来黑马,ctime: 10-19 09:00,like: 66,},
]
// 当前登录用户信息
const user {// 用户iduid: 30009257,// 用户头像avatar,// 用户昵称uname: 黑马前端,
}/*** 导航 Tab 的渲染和操作** 1. 渲染导航 Tab 和高亮* 2. 评论列表排序* 最热 喜欢数量降序* 最新 创建时间降序*/// 导航 Tab 数组
const tabs [{ type: hot, text: 最热 },{ type: time, text: 最新 },
]const App () {// 导航 Tab 高亮的状态const [activeTab, setActiveTab] useState(hot)const [list, setList] useState(defaultList)// 删除评论const onDelete rpid {// 如果要删除数组中的元素需要调用 filter 方法并且一定要调用 setList 才能更新状态setList(list.filter(item item.rpid ! rpid))}// tab 高亮切换const onToggle type {setActiveTab(type)let newListif (type time) {// 按照时间降序排序// orderBy(对谁进行排序, 按照谁来排, 顺序)newList orderBy(list, ctime, desc)} else {// 按照喜欢数量降序排序newList orderBy(list, like, desc)}setList(newList)}return (div classNameapp{/* 导航 Tab */}div classNamereply-navigationul classNamenav-barli classNamenav-titlespan classNamenav-title-text评论/span{/* 评论数量 */}span classNametotal-reply{list.length}/span/lili classNamenav-sort{/* 高亮类名 active */}{tabs.map(item {return (divkey{item.type}className{item.type activeTab ? nav-item active : nav-item}onClick{() onToggle(item.type)}{item.text}/div)})}/li/ul/divdiv classNamereply-wrap{/* 发表评论 */}div classNamebox-normal{/* 当前用户头像 */}div classNamereply-box-avatardiv classNamebili-avatarimg classNamebili-avatar-img src{avatar} alt用户头像 //div/divdiv classNamereply-box-wrap{/* 评论框 */}textareaclassNamereply-box-textareaplaceholder发一条友善的评论/{/* 发布按钮 */}div classNamereply-box-senddiv classNamesend-text发布/div/div/div/div{/* 评论列表 */}div classNamereply-list{/* 评论项 */}{list.map(item {return (div key{item.rpid} classNamereply-item{/* 头像 */}div classNameroot-reply-avatardiv classNamebili-avatarimgclassNamebili-avatar-imgsrc{item.user.avatar}alt//div/divdiv classNamecontent-wrap{/* 用户名 */}div classNameuser-infodiv classNameuser-name{item.user.uname}/div/div{/* 评论内容 */}div classNameroot-replyspan classNamereply-content{item.content}/spandiv classNamereply-info{/* 评论时间 */}span classNamereply-time{item.ctime}/span{/* 评论数量 */}span classNamereply-time点赞数:{item.like}/span{user.uid item.user.uid (spanclassNamedelete-btnonClick{() onDelete(item.rpid)}删除/span)}/div/div/div/div)})}/div/div/div)
}export default App
