React

react安装

js引入方式

<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>

<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>

js
let h1=React.createElement('h1',{id:'h1',price:10},'hello react');
let root=document.querySelector("#root");
ReactDOM.render(h1,root)

脚手架构建

npx create-react-app 项目

cd 项目名

//运行
npm start

元素渲染

下面示例都在elementrender.js中编辑 index.js需要导入一次即可

变量渲染

elementrender.js

import React from 'react';
import ReactDOM from 'react-dom/client';
let h1=<h1>这是一种</h1>
const root=ReactDOM.createRoot(document.getElementById('root'));
root.render(
    h1
);

index.js中导入

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import './elementrender'

方法渲染

//方法的接收的变量名首字母必须是大写

import React from 'react';
import ReactDOM from 'react-dom/client';
const Then=function () {
    return (
        <div>
            <h1>方法渲染</h1>
        </div>
    );
}
const root=ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <Then/>
);

定义变量显示

显示变量或者调用方法时使用 {} 需要导入到index.js

varibleshow.js

import React from 'react';
import ReactDOM from 'react-dom/client';

let name = '李四'
let age=19;

let cf=(
    <div>
        <h1>{name}</h1>
        <h1>age</h1>
    </div>
);
const root=ReactDOM.createRoot(document.getElementById('root'));
root.render(
    cf
)

使用样式

示例使用usecss.js 需要导入到index.js

导入样式使用

css文件中定义样式

.hj{
  font-size:50px;
  color:green;
}

使用样式

import React from "react";
import ReactDOM from "react-dom/client";
//导入样式
import './index.css';
//className指定样式名
let nk=(
    <div className='hj'>
        <h1>你好</h1>
    </div>
)
const root=ReactDOM.createRoot(document.getElementById('root'));
root.render(
    nk
)

行样式

import React from "react";
import ReactDOM from "react-dom/client";
//定义样式 不能使用- -的后一个字母都为大写
let rowcss={
    color:'pink',
    fontSize:'40px'
}
let mk=(
    <div>
        <h1 style={rowcss}>你好啊</h1>
    </div>
)
const root=ReactDOM.createRoot(document.getElementById('root'));
root.render(
    mk
)

条件判断

下面示例均在conditionjudge.js中测试需要导入到index.js

import React from 'react'
import ReactDOM from "react-dom/client";
//判断 通过不同的判断返回对应的html代码
let jude=(name)=>{
    if(name.length>0){
        return <h1>登入成功！{name}</h1>
    }else{
        return <h1>登入失败！</h1>
    }
}
let kl=(
    <div>
        <h1>条件判断</h1>
        {jude('')}
        {jude('李四')}
    </div>
)
const root=ReactDOM.createRoot(document.getElementById('root'));
root.render(
    kl
)

遍历数组

示例均使用traversearray.js 需要在index.js中导入

遍历需要加key

普通数据

import React from "react";
import ReactDOM from "react-dom/client";

let cf=[10,34,45,657,8];
//返回的是一个个的li
let mk=cf.map((v)=><li key={v}>{v}</li>);
let o=(
    <div>
        <ul>
            {mk}
        </ul>
    </div>
)
const root=ReactDOM.createRoot(document.getElementById('root'));
root.render(
    o
);

对象数组

注意：表格必须要thead 和 tbody

import React from "react";
import ReactDOM from "react-dom/client";
//对象数组
let obj=[
    {id:10,name:'李四',address:'湖南'},
    {id:11,name:'李四2',address:'湖南2'},
    {id:12,name:'李四3',address:'湖南3'}
]
//表格设置内置样式 
let b1='1px';//表格边框
let cespa=0;//表格边距0

//循环对象数组
let nk=obj.map((v)=><tr key={v.id}><td>{v.id}</td><td>{v.name}</td><td>{v.address}</td></tr>);

//显示
let tab=(
    <div>
        <table border={b1} cellSpacing={cespa}>
            <thead>
            <tr>
                <td>ID</td><td>姓名</td><td>地址</td>
            </tr>
            </thead>
            <tbody>
                {nk}
            </tbody>
        </table>
    </div>
)
const root=ReactDOM.createRoot(document.getElementById('root'));
root.render(
    tab
);

JSX

jsx就是可以在js中写html

组件

函数组件

elmoulde.js 需要在index.js中引入

import React from 'react'
import ReactDOM from "react-dom/client";
//函数组件 第一个名字必须大写
function Box(){
//点击事件
    function dj(){
        console.log(1)
    }
    return(
        <div>
            <h1>函数组件</h1>
            <button onClick={dj}>点击</button>
        </div>
    )
}
const root =ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <Box/>
)

类组件

import React from 'react'
import ReactDOM from "react-dom/client";

class Box2 extends React.Component {
    //点击事件
    show(){
        console.log(1);
    }
    render() {
        return(
            <div>
                <h1>类组件</h1>
                <button onClick={this.show}>点击</button>
            </div>
        )
    }
}
const root =ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <Box2/>
)

独立组件

创建独立文件 onemoule.js

import React from "react";
class Box3 extends React.Component {
    dj(){
        console.log(1);
    }
    render() {
        return(
            <div>
                <h1>独立组件</h1>
                <button onClick={this.dj}>点击</button>
            </div>
        );
    }
}
export default Box3

使用组件 index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
//导入独立组件JS
import Box3 from "./onemoule";

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <Box3/>
);

state状态

基本定义和使用

使用的是类组件需要在index.js导入使用

import React from "react";
import ReactDOM from "react-dom/client";
class State01 extends React.Component{
    constructor() {
        super();
        this.state={
            count:0
        }
    }
    /** 也可以这样
    state={
      
    }**/
    dj=()=>{
        console.log(1);
        this.setState({
            count:this.state.count+1
        })
    }
    render() {
        return(
            <div>
                <h1>计数器</h1>
                <h1>count:{this.state.count}</h1>
                <button onClick={this.dj}>点击</button>
            </div>
        )
    }
}
export default State01

表单使用

如输入框下拉框…

原生

import React from "react";
import ReactDOM from "react-dom/client";
/**
 * 表单和状态的绑定
 *
 * 受控组件 input
 * 非受控组件
 */
class Yanshifrom extends React.Component{
    state={
        name:'李四',
        area:'湖南省',
        city:'白云区',
        chtr:true
    }
    //input事件
    incl=(e)=>{
        console.log(e);
        this.setState({
            name:e.target.value
        });
        console.log(this.state.name);
    }
    //文本域改变事件
    chatear=(e)=>{
        console.log(e)
        this.setState({
            area:e.target.value
        });
        console.log(this.state.area);
    }
    //下拉
    sech=(e)=>{
        console.log(e);
        this.setState({
            city:e.target.value
        })
        console.log(this.state.city);
    }
    //复选
    chchbox=(e)=>{
        //console.log(e.target.checked);
        this.setState({
            chtr:e.target.checked
        });
        console.log(this.state.chtr);
    }
    render() {
        return(
            <div>
                <h1>表单测试</h1>
                <p>
                    {/*必须加onchange事件*/}
                    文本框：<input type='text' value={this.state.name} onChange={this.incl}/>
                </p>
                <p>
                    多行文本域：<textarea rows='10' cols='80' value={this.state.area} onChange={this.chatear}>
                    </textarea>
                </p>
                <p>
                    <select value={this.state.city} onChange={this.sech}>
                        <option>花都区</option>
                        <option>番禺区</option>
                        <option>白云区</option>
                    </select>
                </p>
                <p>
                    <input type="checkbox" checked={this.state.chtr} onChange={this.chchbox}/>游戏
                </p>
            </div>
        )
    }
};
export default Yanshifrom

优化

import React from "react";
import ReactDOM from "react-dom/client";
/**
 * 表单和状态的绑定
 * 优化
 */
class YanshifromYh extends React.Component{
    state={
        name:'李四',
        area:'湖南省',
        city:'白云区',
        chtr:true
    }
    //优化成一个方法 test4from的优化
    formhand=(obj,e)=>{
        let t=e.target;
        //判断是不是复选框
        let value=t.type === 'checkbox' ? t.checked : t.value;
        this.setState({
            //[这里面是变量]
            [obj]:value
        })
    }
    render() {
        return(
            <div>
                <h1>表单测试</h1>
                <p>
                    {/*必须加onchange事件*/}
                    文本框：<input type='text' value={this.state.name} onChange={this.formhand.bind(this,'name')}/>
                </p>
                <p>
                    多行文本域：<textarea rows='10' cols='80' value={this.state.area} onChange={this.formhand.bind(this,'area')}>
                    </textarea>
                </p>
                <p>
                    <select value={this.state.city} onChange={this.formhand.bind(this,'city')}>
                        <option>花都区</option>
                        <option>番禺区</option>
                        <option>白云区</option>
                    </select>
                </p>
                <p>
                    <input type="checkbox" checked={this.state.chtr} onChange={this.formhand.bind(this,'chtr')}/>游戏
                </p>
            </div>
        )
    }
};
export default YanshifromYh

事件

事件传值

<input type="checkbox" checked={this.state.chtr} onChange={this.formhand.bind(this,'chtr')}/>游戏

formhand=(obj,e)=>{
  //obj是传的值 e是标签本身
}

发表评论示例

丐版

import React from "react";
import ReactDOM from "react-dom/client";
class Component extends React.Component{
    state ={
        name:'',
        text:'',
        are:[]
    }
    change=(obj,e)=>{
        this.setState({
            [obj]:e.target.value
        })
    }
    mk(){
        if(this.state.are.length===0){
            return <h1>暂无评论！</h1>
        }else{
            let ok=this.state.are.map((v,index)=><div key={index}>
                <h1>{v.name}</h1>
                <div>
                    {v.text}
                </div>
            </div>);
            return  ok;
        }
    }
    fb=()=>{
        let ar=this.state.are;
        ar.unshift({
            name: this.state.name,
            text: this.state.text
        })
        this.setState({
            are:ar,
            name:'',
            text:''
        })
    }
    render() {
        return(
            <div>
                <h1>评论</h1>
                <input type="text" value={this.state.name} onChange={this.change.bind(this,'name')}/>
                <p>
                    <textarea value={this.state.text} onChange={this.change.bind(this,'text')}>
                    </textarea>
                </p>
                <p><button onClick={this.fb}>发表</button></p>
                <div>
                    {this.mk()}
                </div>
            </div>
        )
    }
}
export default Component

组件传值

父传子

方式一

index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import ComponentParams from "./ComponentParamsfcz";

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
   <ComponentParams name='李四' age={18} arr={[1,22,34,35,4556,6888]} fn={()=>alert('my this function')} tag={<h1>my this tages</h1>}/>
);

组件接收

import React from "react";
//组件传递属性 父传子
class ComParms extends React.Component{
    //接收组件传的值 是一个对象  没有传值的话是一个空对象
    constructor(props) {
        super(props);
        console.log(this.props);
        console.log(this.props.name);
    }
    render() {
        //结构传来的数据
        let {name,age,arr,fn,tag} = this.props;
        //遍历数组
        let ok =arr.map((v)=><li key={v}>{v}</li>);
        return(
            <div>
                <h1>组件传参数</h1>
                <h1>字符串 {name}</h1>
                <h1>数字 {age+2}</h1>
                <h1>数组<ul>{ok}</ul></h1>
                <button onClick={fn}>函数</button>
                {tag}
            </div>
        )
    }
}
export default ComParms

方式二

import React from "react";
/**
 * 父传子
 */
//父组件
class Parent extends React.Component{
    state={
        name:'李四 '
    }
    render() {
        let {name}=this.state;
        return(
            <div>
                <h1>我是父组件 </h1>
                <hr/>
                //使用子组件
                <Childer name={name}/>
            </div>
        )
    }
}
//子组件
class Childer extends React.Component{
    render() {
        //name是父传来的属性name
        return(
            <div>
                <h1>我是子组件</h1>
                <h1>父亲的值 {this.props.name}</h1>
            </div>
        )
    }
}
export default Parent;

子传父

import React from "react";
/**
 * 子传父
 */
//父组件
class ZsendfComponentF extends React.Component {
    state={
        gift:'无'
    }
    callbacks=(obj)=>{
        //获取子传的值 obj
        //给父亲设置属性
        this.setState({
            gift: obj
        })
    }
    render() {
        let {gift}=this.state;
        return(
            <div>
                <h1>我是父组件 我的礼物: {gift}</h1>
                //使用子组件
                <ZsendfComponentZ fg={this.callbacks}/>
            </div>
        )
    }
}
//子组件
class ZsendfComponentZ extends React.Component{
    state={
        gift:'iphone13 手机'
    }
    //点击事件
    senl=()=>{
        console.log('开始送...');
        //获取父类传来的方法
        let {fg}=this.props;
        //调用父类的方法 且 带参数传值
        fg(this.state.gift);
    }
    render() {
        return(
            <div>
                <h1>我是子组件</h1>
                <button onClick={this.senl}>送礼</button>
            </div>
        )
    }
}
export default ZsendfComponentF

兄弟传值

思路：先让一个兄弟传值给父亲然后父亲传给另外一个兄弟

import React from "react";
/**
 * 父
 * 儿子 ==>女儿
 * 女儿 ==>儿子
 */
class SendParZ extends React.Component {
    state ={
        gift:'',
        geg:''
    }
    //儿子送妹妹
    sonli=(obj)=>{
        this.setState({
            gift:obj
        })
    }
    //妹妹送哥哥
    sge=(obj)=>{
        this.setState({
            geg:obj
        })
    }
    render() {
        return(
            <div>
                <h1>父组件</h1>
                <hr/>
                {/*//儿子*/}
                <Chil1 fn={this.sonli} mlw={this.state.geg}/>
                <hr/>
                {/*//女儿*/}
                <Chile2 gw={this.state.gift} fn2={this.sge}/>
            </div>
        )
    }
}
//儿子
class Chil1 extends React.Component{
    //儿子准备的礼物
    state={
        gift: '布娃娃'
    }
    sli=()=>{
        let {fn} = this.props
        fn(this.state.gift);
    }
    render() {
        return(
            <div>
                <h1>儿子组件</h1>
                <button onClick={this.sli}>送礼给妹妹</button>
                <h1>收到妹妹的礼物：{this.props.mlw}</h1>
            </div>
        )
    }
}
//女儿
class Chile2 extends React.Component {
    //女儿准备的礼物
    state={
        gglw:'小提琴'
    }
    sg=()=>{
        let {fn2}=this.props;
        fn2(this.state.gglw);
    }
    render() {
        return(
            <div>
                <h1>女儿组件</h1>
                <h1>收到哥哥的礼物：{this.props.gw}</h1>
                <button onClick={this.sg}>送鸽鸽礼物</button>
            </div>
        )
    }
}
export default SendParZ

生命周期

构造方法==>组件渲染==>组件挂载==>组件更新==>组件卸载

import React from "react";
/**
 * 生命周期
 */
class Smzq extends React.Component{
    constructor() {
        console.log('1、构造方法')
        super();
        this.state={
            number:1,
            n:0
        }
    }
    dj=()=>{
        this.setState({
            n:this.state.n+1
        })
    }
    render() {
        console.log('2、组件渲染')
        return(
            <div>
                <h1>生命周期</h1>
                {this.state.n>3 ? (<h1>英雄死亡！</h1>) : (<Childer1 num={this.state.n}/>)}
                <button onClick={this.dj}>攻击</button>
            </div>
        )
    }
    //生命周期 在这发送ajax 组件挂载
    componentDidMount() {
        console.log('3、组件挂载')
        setTimeout(()=>{
            this.setState({
                number:10
            })
        },2000)
    }
    //props state更新
    componentDidUpdate() {
        console.log('4、组件更新！')
    }
    componentWillUnmount() {
        console.log('5、卸载时')
    }
}
class Childer1 extends React.Component {
    componentWillUnmount() {
        console.log('5、卸载时')
    }
    render() {
        return <h1>英雄攻击次数:{this.props.num}</h1>
    }
}
export  default  Smzq;

发送ajax请求

import React from "react";
import axios from "axios";
class AjaxComputent extends React.Component{
    state={
        info:[]
    }
    //这里可以写成下面的部分
    ok(){
        if (this.state.info.length===0){
            return <h1>没有数据！</h1>
        }else{
            let mk=this.state.info.map((v)=><h1 key={v}>{v}</h1>);
            return mk;
        }
    }
    //发送请求
    getJoke=() => {
        setInterval(async () => {
            let res = await axios.get('https://autumnfish.cn/api/joke/list?num=3');
            this.setState({
                info: res.data.jokes
            })
        },5000)
    }
    render() {
        return(
            <div>
                <h1>Axios 请求</h1>
                <button onClick={this.getJoke}>获取笑话</button>
                {this.ok()}
                {/*{this.state.info.map((v)=>
                <h1>{v}</h1>
                )} 这样写也可以*/}
            </div>
        )
    }
}



export default AjaxComputent;

路由

下载包

npm i react-router-dom

示例一

import React from "react";
import ReactDOM from "react-dom/client";
import {BrowserRouter as Router,Route,Link,Routes} from 'react-router-dom'
const Main=()=><h1>我是首页</h1>
const Login=()=>(
    <div>
        <h1>这是登入页</h1>
        <input type="text" />
        <button>登入</button>
    </div>
);
const App=()=>(
    <Router>
        <h1>路由测试</h1>
        <ul>
            <li><Link to='/'>首页</Link></li>
            <li><Link to='/login'>登入</Link></li>
        </ul>
        <Routes>
            {/*默认路由 path="/"  */}
            <Route path='/' element={<Main></Main>}></Route>
            <Route path='/' element={<Main></Main>}></Route>
            <Route path={'/login'} element={<Login></Login>}></Route>
        </Routes>
    </Router>
)

export default App;

子路由
自己写

import React from "react";
import {BrowserRouter as Router,Route,Link,Routes,Outlet} from 'react-router-dom'
const Login=()=>(
    <div>
        <h1>这是登入页</h1>
    </div>
)
const Shop=()=>(
    <div>
        <h1>这是商品管理</h1>
        <Link to='/shop/chil'>/chil'>子路由</Link>
        <Outlet></Outlet>
    </div>
)
const ShopInfo=()=>(
    <h1>子路由显示</h1>
)
const Game=()=>(
    <div>
        <h1>这是游戏页</h1>
    </div>
)

const App=()=>(
    <Router>
        <div>
            <ul>
                <li><Link to="/index">首页</Link></li>
                <li><Link to="/shop">商品</Link></li>
                <li><Link to="/game">游戏</Link></li>
            </ul>
        </div>
        <Routes>
            <Route path="/">
                <Route path='/index' element={<Login></Login>}></Route>
                <Route path='/shop' element={<Shop></Shop>}>
                    <Route path='chil' element={<ShopInfo></ShopInfo>}></Route>
                </Route>
                <Route path='/game' element={<Game></Game>}></Route>
            </Route>
        </Routes>
    </Router>
)
export default App

react安装

js引入方式

脚手架构建

元素渲染

变量渲染

方法渲染

定义变量显示

使用样式

导入样式使用

行样式

条件判断

遍历数组

普通数据

对象数组

JSX

组件

函数组件

类组件

独立组件

state状态

基本定义和使用

表单使用

原生

优化

事件

发表评论示例

组件传值

父传子

方式一

方式二

子传父

兄弟传值

生命周期

发送ajax请求

路由

示例一

羡羡