React 基本使用

目录

React 安装

React基本使用

React脚手架

脚手架使用React

JSX基本使用

JSX列表渲染

JSX条件渲染

JSX模板精简

JSX样式控制

JSX综合案例

---

 

React 安装

1. npm i react react-dom
2. npm init -y（生成基础目录文件）

<!-- 引入js文件 --><script src="./node_modules/react/umd/react.development.js"></script><script src="./node_modules/react-dom/umd/react-dom.development.js"></script>

React基本使用

1. 创建react元素

// 创建react元素
const title = React.createElement(元素名称, 元素属性（可以是对象）, 元素子节点);
// 高级使用
const title = React.createElement("h1",{ title: "标题", id: 01 },"束带结发",React.createElement("span", null, "span节点")
);

1. 渲染元素

ReactDOM.render(要渲染的react元素, 挂载点);

React脚手架

1. 初始化项目

npx create-react-app my-app

1. 启动项目

npm start|| yarn start

脚手架使用React

1. 导入react和react-dom包

// 1、导入react
import React from "react";
import  ReactDOM  from "react";

JSX基本使用

1. 使用JSX创建react元素

// 使用JSX创建react元素
const title = <h1>使用JSX创建react元素</h1>

1. 渲染react元素

/ 渲染react元素
ReactDOM.render(title,document.getElementById('root'))

JSX列表渲染

1. 技术方案：return，map重复渲染的模板；
2. 注意事项：遍历列表时需要一个类型为number/string不可重复的key，提交diff性能
3. key仅在内部使用，不会出现再真实的dom中

const songs = [{ id: 1, name: '痴心绝对' },{ id: 2, name: '像我这样的人' },{ id: 3, name: '南山南' }
]
function App() {return (<div className="App"><ul>{songs.map(song=><li key={song.id}>{song.name}</li>)}</ul></div>);
}

JSX条件渲染

1. 技术方案:三元表达式-满足条件-渲染一个span
2. &&

// 技术方案:三元表达式-满足条件-渲染一个span
const flag = true
// &&
function App() {return (<div className="App">{flag ? <div><span>span</span></div>:null}{true && <span>spantow</span>}</div>);
}

JSX模板精简

1. 原则：模板中的逻辑尽量保持精简
2. 复杂的多分支逻辑，收敛为一个函数，通过一个专门的函数来写分支逻辑，模板中只负责调用

// 一个状态type 1 2 3
// 1-> h1
// 1-> h2
// 1-> h3
// 原则：模板中的逻辑尽量保持精简
// 复杂的多分支逻辑，收敛为一个函数，通过一个专门的函数来写分支逻辑，模板中只负责调用
const getHtag = (type)=>{if(type === 1){return <h1>h1</h1>}if(type === 2){return <h1>h2</h1>}if(type === 3){return <h1>h3</h1>}}
function App() {return (<div className="App">{getHtag(1)}{getHtag(2)}{getHtag(3)}</div>);
}

JSX样式控制

1. 行内样式：在元素身上绑定一个style属性
2. 类名样式：在元素身上绑定className属性
3. 动态类名控制

// 样式控制
// 行内样式：在元素身上绑定一个style属性
// 类名样式：在元素身上绑定className属性
import './app.css'
const style = {color:'red',fontSize:'30px'
}
// 动态类名控制
const activeFlag = true
function App() {return (<div className="App"><span style={{color:'red',fontSize:'30px'}}>span</span><span style={style}>span</span><span className="active">span</span><span className={activeFlag ? 'active': ''}>动态span</span></div>);
}

JSX综合案例

1. 技术方案：map遍历列表
2. 动态类名的控制

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 className="App"><div className="comment-container">{/* 评论数 */}<div className="comment-head"><span>5 评论</span></div>{/* 排序 */}<div className="tabs-order"><ul className="sort-container">{state.tabs.map(item => <li key={item.id} className={item.type === state.active ? 'on' : ""}>按{item.name}排序</li>)}</ul></div>{/* 添加评论 */}<div className="comment-send"><div className="user-face"><img className="user-head" src={avatar} alt="" /></div><div className="textarea-container"><textareacols="80"rows="5"placeholder="发条友善的评论"className="ipt-txt"/><button className="comment-submit">发表评论</button></div><div className="comment-emoji"><i className="face"></i><span className="text">表情</span></div></div>{/* 评论列表 */}<div className="comment-list">{state.list.map(item=>(<div className="list-item" key={item.id}><div className="user-face"><img className="user-head" src={avatar} alt="" /></div><div className="comment"><div className="user">{item.author}</div><p className="text">{item.comment}</p><div className="info"><span className="time">{formatTime(item.time)}</span>{/* 动态类名控制 */}<span className={item.attitude === 1 ? 'like liked' : 'like'}><i className="icon" /></span><span className={item.attitude === 1 ? 'hate hated' : 'hate'}><i className="icon" /></span><span className="reply btn-hover">删除</span></div></div></div>))}</div></div></div>)
}export default App