React :React 是一个用于构建用户界面的 JavaScript 库。
React脚手架:
npm i create-react-app -g
基本使用:创建元素
import React from 'react';
import ReactDOM from 'react-dom';
const element = React.createElement('div', { className: 'list' }, [
React.createElement('h1', null, '水果'),
]);
ReactDOM.render(element, document.getElementById('root'));
JSX使用:
import React from 'react'
import ReactDOM from 'react-dom'
const div = (
<div className="box">
<h1>JSX=</h1>
<ul>
<li>tom</li>
<li>tom</li>
<li>tom</li>
</ul>
</div>
)
ReactDOM.render(div, document.getElementById('root'))
注意事项(语法点):
- 使用{ 变量/表达式 } 渲染数据=》【注意:对象不能直接渲染,对象不能作为react元素】=》【布尔值渲染不出来,但是作为判断有效】
- 标签必须要闭合【注意:hr、br、input、image等】
- 一些标签的属性发生了变化=》class变成了className=》label的for属性 变成htmlFor=》多个单词组成的属性要变成驼峰命名
- 标签的嵌套一定要符合严格的语法要求
- 属性绑定 <标签 属性={ 变量 } 属性={ '字符串' + 变量 }>
import React from 'react'
import ReactDOM from 'react-dom'
const num = 100
const desc = <>
<p>你好</p><h1>标题</h1>
</>
const person = {
name:'zs',
age:20
}
const state = false
const link = "https://www.baidu.com"
const fn = ()=>{
return '可以'
}
const div = (
<div className="box">
{desc}
{1 + 1} == {num} == {state?"对":"错"}
<hr/>
{/* 注意 */}
{fn()} == {JSON.stringify(person)}
<hr/>
<a href={link} title={'链接地址是'+link}>去百度</a>
<table width='200' cellPadding='0' cellSpacing='0' border='1'>
<tbody>
<tr>
<td>11</td>
<td>22</td>
</tr>
</tbody>
</table>
<input type='checkbox' id='agree'/>
<label htmlFor='agree'>同意</label>
</div>
)
ReactDOM.render(div, document.getElementById('root'))
条件渲染:
import React from 'react'
import ReactDOM from 'react-dom'
const loading = false
const getContent = ()=>{
if(loading) {
return <div>正在加载中...</div>
}else {
return <div>加载完成</div>
}
}
const div = (
<div className="box">
{getContent()}
<hr/>
{loading?<div>正在加载中...</div>:<div>加载完成</div>}
<hr/>
{loading && <div>正在加载中...</div>}
{loading || <div>加载完成</div>}
</div>
)
ReactDOM.render(div, document.getElementById('root'))
列表渲染:
import React from 'react'
import ReactDOM from 'react-dom'
const arr = ['张三', '李四', '王五']
const arr2 = [<li key={0}>张三</li>, <li key={1}>李四</li>, <li key={2}>王五</li>]
const arr3 = arr.map((item, index) => {
return <li key={index}>{item}</li>
})
const div = (
<div className="box">
{arr}
<hr />
<ul>{arr2}</ul>
<hr />
<ul>{arr3}</ul>
<hr />
<ul>
{arr.map((item, index) => {
return <li key={index}>{item}</li>
})}
</ul>
</div>
)
ReactDOM.render(div, document.getElementById('root'))
样式:
import React from 'react'
import ReactDOM from 'react-dom'
import './index.css'
const isActive = true
const isBlock = true
const div = (
<div className="box">
<div className={isActive?'button active' : 'button'}>按钮</div>
<div className={`button ${isBlock?'block' :''}`}>按钮</div>
</div>
)
ReactDOM.render(div, document.getElementById('root'))
函数组件:
import React from 'react'
const Loading = () => {
const isloading = false
return (
<div>
{isloading ? <div>加载中</div> : <div>加载完成</div>}
</div>
)
}
export default Loading
类组件:
import React, { Component } from 'react'
export default class Loading extends Component {
state = {
isloading : false,
title:'数码产品',
list:['电脑','手机','相机']
}
renderList(){
return this.state.list.map((item,index)=>{return <li key={index}>{item}</li>})
}
render() {
console.log('loading被调用了');
return (
<div>
{this.state.isloading ? <div>加载中</div> : <ul>{this.renderList()}</ul>}
</div>
)
}
}
react16.8版本之前 函数组件就是无状态组件,类组件就是有状态组件
react16.8版本之后 提供了Hooks,函数组件也可以拥有自己的状态
创建组件的快捷键rcc、rafce