陕西住房城乡建设厅网站,灯饰 东莞网站建设,展厅设计公司选四度科技,福州营销推广公司目录
React 安装
React基本使用
React脚手架
脚手架使用React
JSX基本使用
JSX列表渲染
JSX条件渲染
JSX模板精简
JSX样式控制
JSX综合案例 React 安装
npm i react react-domnpm init -y#xff08;生成基础目录文件#xff09;
!-- 引入js文件 --sc…目录
React 安装
React基本使用
React脚手架
脚手架使用React
JSX基本使用
JSX列表渲染
JSX条件渲染
JSX模板精简
JSX样式控制
JSX综合案例 React 安装
npm i react react-domnpm init -y生成基础目录文件
!-- 引入js文件 --script src./node_modules/react/umd/react.development.js/scriptscript src./node_modules/react-dom/umd/react-dom.development.js/script
React基本使用
创建react元素
// 创建react元素
const title React.createElement(元素名称, 元素属性可以是对象, 元素子节点);
// 高级使用
const title React.createElement(h1,{ title: 标题, id: 01 },束带结发,React.createElement(span, null, span节点)
);
渲染元素
ReactDOM.render(要渲染的react元素, 挂载点);
React脚手架
初始化项目
npx create-react-app my-app
启动项目
npm start|| yarn start
脚手架使用React
导入react和react-dom包
// 1、导入react
import React from react;
import ReactDOM from react;
JSX基本使用
使用JSX创建react元素
// 使用JSX创建react元素
const title h1使用JSX创建react元素/h1
渲染react元素
/ 渲染react元素
ReactDOM.render(title,document.getElementById(root))
JSX列表渲染
技术方案returnmap重复渲染的模板注意事项遍历列表时需要一个类型为number/string不可重复的key提交diff性能key仅在内部使用不会出现再真实的dom中
const songs [{ id: 1, name: 痴心绝对 },{ id: 2, name: 像我这样的人 },{ id: 3, name: 南山南 }
]
function App() {return (div classNameAppul{songs.map(songli key{song.id}{song.name}/li)}/ul/div);
}
JSX条件渲染
技术方案:三元表达式-满足条件-渲染一个span
// 技术方案:三元表达式-满足条件-渲染一个span
const flag true
//
function App() {return (div classNameApp{flag ? divspanspan/span/div:null}{true spanspantow/span}/div);
}
JSX模板精简
原则模板中的逻辑尽量保持精简复杂的多分支逻辑收敛为一个函数通过一个专门的函数来写分支逻辑模板中只负责调用
// 一个状态type 1 2 3
// 1- h1
// 1- h2
// 1- h3
// 原则模板中的逻辑尽量保持精简
// 复杂的多分支逻辑收敛为一个函数通过一个专门的函数来写分支逻辑模板中只负责调用
const getHtag (type){if(type 1){return h1h1/h1}if(type 2){return h1h2/h1}if(type 3){return h1h3/h1}}
function App() {return (div classNameApp{getHtag(1)}{getHtag(2)}{getHtag(3)}/div);
}
JSX样式控制
行内样式在元素身上绑定一个style属性类名样式在元素身上绑定className属性动态类名控制
// 样式控制
// 行内样式在元素身上绑定一个style属性
// 类名样式在元素身上绑定className属性
import ./app.css
const style {color:red,fontSize:30px
}
// 动态类名控制
const activeFlag true
function App() {return (div classNameAppspan style{{color:red,fontSize:30px}}span/spanspan style{style}span/spanspan classNameactivespan/spanspan className{activeFlag ? active: }动态span/span/div);
}
JSX综合案例
技术方案map遍历列表动态类名的控制
import ./index.css
import avatar from ./images/avatar.png
// 依赖的数据
const state {// hot: 热度排序 time: 时间排序tabs: [{id: 1,name: 热度,type: hot},{id: 2,name: 时间,type: time}],active: hot,list: [{id: 1,author: 刘德华,comment: 给我一杯忘情水,time: new Date(2021-10-10 09:09:00),// 1: 点赞 0无态度 -1:踩attitude: 1},{id: 2,author: 周杰伦,comment: 哎哟不错哦,time: new Date(2021-10-11 09:09:00),// 1: 点赞 0无态度 -1:踩attitude: 0},{id: 3,author: 五月天,comment: 不打扰是我的温柔,time: new Date(2021-10-11 10:09:00),// 1: 点赞 0无态度 -1:踩attitude: -1}]
}
function formatTime(time){// 时间格式化 2022-02-28return ${time.getFullYear()}-${time.getMonth()1}-${time.getDate()}
}
function App () {return (div classNameAppdiv classNamecomment-container{/* 评论数 */}div classNamecomment-headspan5 评论/span/div{/* 排序 */}div classNametabs-orderul classNamesort-container{state.tabs.map(item li key{item.id} className{item.type state.active ? on : }按{item.name}排序/li)}/ul/div{/* 添加评论 */}div classNamecomment-senddiv classNameuser-faceimg classNameuser-head src{avatar} alt //divdiv classNametextarea-containertextareacols80rows5placeholder发条友善的评论classNameipt-txt/button classNamecomment-submit发表评论/button/divdiv classNamecomment-emojii classNameface/ispan classNametext表情/span/div/div{/* 评论列表 */}div classNamecomment-list{state.list.map(item(div classNamelist-item key{item.id}div classNameuser-faceimg classNameuser-head src{avatar} alt //divdiv classNamecommentdiv classNameuser{item.author}/divp classNametext{item.comment}/pdiv classNameinfospan classNametime{formatTime(item.time)}/span{/* 动态类名控制 */}span className{item.attitude 1 ? like liked : like}i classNameicon //spanspan className{item.attitude 1 ? hate hated : hate}i classNameicon //spanspan classNamereply btn-hover删除/span/div/div/div))}/div/div/div)
}export default App
