React基础(一)

一、安装

1.创建项目： npx create-react-app my-app
2.打开项目： cd my-app
3.启动项目： npm start
4.暴露配置(config)： npm run eject

二、项目结构

三、基本使用

index.js

import React from 'react'; // 负责逻辑控制。帮助把数据转化生成虚拟DOM
import ReactDOM from 'react-dom'; // 渲染真实dom,虚拟dom转真实dom
import './index.css';
import styles from "./index.moudle.css";
// import App from './App';
// import reportWebVitals from './reportWebVitals';
import logo from './logo.svg';

// 基本使用，｛｝用来包裹表达式
const jsx = <div> start react </div>
// 函数使用
const user = {
    name: 'lisa',
    age: 18
}
function userMsg(user) {
    return user.name + ':' + user.age
}
const jsxObj = <div>jsx对象使用</div>
const isShow = false
const aryList = ['lisa', 'pitter', 'bill']
const jsx = (<div className={styles.app}>
        <div> start react </div> {/*基本使用*/}
        <div>{userMsg(user)}</div> {/*函数使用*/}
        {jsxObj} {/*函数使用*/}
        {isShow ? <div>条件为true</div> : <div>条件为false</div>} {/*条件语句*/}
        {isShow && <div>条件为true显示</div>}
        {/*列表渲染*/}
        {/*diff的时候，首先比较type,然后是key值，所以同级同类型的元素，key值必须唯一*/}
        <ul>
            {aryList.map(item => (<div key={item}>{item}</div>))}
        </ul>
        {/*属性*/}
        <img src={logo} className="logo"/>
        {/*样式模块化*/}
        <img src={logo} className={styles.logo}/>
    </div>)
// React使⽤JSX来描述UI
// babel-loader把JSX 编译成相应的 JS 对象，React.createElement再把这个JS对象构造成React需要的虚拟dom。
ReactDOM.render(jsx, document.getElementById('root'))

四、组件

1.类组件

import React, { Component } from "react";

export default class ClassComponent extends Component {
    constructor(props) {
        super(props);
        // state 存储状态
        this.state = { 
            date: new Date()
        }
    }
    // 组件挂载完成之后执行
    componentDidMount() {
        this.timer = setInterval(() => {
            // 修改状态，不能直接更改
            this.setState({
                date: new Date
            })
        }, 1000)
    }
    // 组件卸载之前执行
    componentWillUnmount() {
        clearInterval(this.timer)
    }
    render() {
        const {date} = this.state
        return (<div>
            <h4>classcomponent</h4>
            <p>{date.toLocaleTimeString()}</p>
        </div>)

    }
}

2.函数组件

import React, { useState, useEffect } from "react";
function FunctionComponent(props) {
    const  [date, setDate ] = useState(new Date())
    useEffect(() => {  // 相当于componentDidMount, componentDidUpdate, componnetWillUnmount
        const timer = setInterval(() => {
            setDate(new Date())
        }, 1000)
        return () => clearInterval(timer)
    }, []);
    return (<div>
        <h4>function componnet</h4>
        <p>{ date.toLocaleTimeString()}</p>
    </div>)
}
export default FunctionComponent

五、组件复用

TopBar.js

import React, { Component } from "react";

export default class TopBar extends  Component {
    constructor(props) {
        super(props)
    }
    render() {
        return (<div>
            <h2>topBar</h2>
        </div>)
    }
}

BottomBar.js

import React, { Component } from "react";

export default class BottomBar extends  Component {
    constructor(props) {
        super(props)
    }
    render() {
        return (<div>
            <h2>bottomBar</h2>
        </div>)
    }
}

Layout.js

import React, { Component } from 'react';
import BottomBar from './BottomBar'
import TopBar from './TopBar'
export default class Layout extends Component {
    constructor(props) {
        super(props)
    }
    render() {
        const {bottomShow, topShow, children} = this.props
        return (<div>
            {topShow && <TopBar/>}
                {/* <div>{children}</div> */}
                <div>
                    { children.content }
                </div>
            {bottomShow && <BottomBar/>}
        </div>)
    }
}

Home.js

import React, { Component } from "react";
import Layout from './Layout'
export default class Home extends Component {
    constructor(props) {
        super(props)
    }
    render() {
        return (<Layout bottomShow={true} topShow={true}> 
            {/* <div>home page</div> */}
            {
                {
                    content: (<div>
                        <h4>home content</h4>
                    </div>)
                }
            }
        </Layout>)
    }
}

五、vscode插件