学习react（基础篇）

Posted 2020-12-10 wu2020

1.安装：npm install -g create-react-app

2.创建react项目： npx create-react-app （项目名）

3. 远行项目：npm run start/npm start

4.基本用法：

import React from ‘react‘;
import Header from ‘./component/header‘ // 组件

class Home extends React.Component {
    render() {
        return (
            <div>
                <Header name={‘index‘}></Header>
                <div style={{
                    width: ‘200px‘,
                    height: ‘80px‘,
                    backgroundColor: ‘yellow‘,
                    fontSize: ‘24px‘,
                    textAlign: ‘center‘
                }}>This is Home!</div>
            </div>
        );
    }
}
export default Home;

引入css

require(‘./mystyle.css‘);
<div className="Page3">12132</div>

设置变量和调用接口

import React, { Component } from ‘react‘;
import axios from ‘axios‘;
require(‘./mystyle.css‘);
export default class Axios extends Component {
    constructor(props){
        super(props);
        this.state={
            list1:"",
        }
    }
    componentDidMount() {
         axios.get(‘http://192.168.0.55:1314/msg/send/呵呵‘)
         .then((res)=>{
             // 注意this指向
            console.log(res)
         })
         .catch((err)=>{
             console.log(err)
         })
    }
    getDataA=()=>{
        axios.get(‘http://192.168.0.55:1314/msg/send/呵呵‘)
        .then((res)=>{
            // 注意this指向
            console.log(res)
            this.setState({
                list1:res.data
            })
        })
        .catch((err)=>{
            console.log(err)
        })
    }
    getDataB=()=>{
        alert(‘获取数据‘)
    }
    render() {
        return (
        <div >
            <button onClick={this.getDataA}>axios获取数据</button>
            <button onClick={this.getDataB}>获取数据</button>
            <div className="Page3">{this.state.list1}12132</div>
            {/* <ul>
                {
                    this.state.list1.map((value,key)=>{
                        return (<li key={key}>{value}</li>)
                    })
                }
            </ul> */}
        </div>
        )
    }
}

设置路由

import React from ‘react‘;
import { BrowserRouter as Router, Route } from ‘react-router-dom‘;
import Home from ‘./Home‘; // 引入文件
import Page1 from ‘./Page1‘;
import Page2 from ‘./Page2‘;
import Page3 from ‘./Page3‘;

class App extends React.Component {
    render() {
        return (
            <Router >
                <div>
                    <Route path="/" component={Home} />
                    <Route path="/Page1" component={Page1} />
                    <Route path="/Page2" component={Page2} />
                    <Route path="/Page3" component={Page3} />
                </div>
            </Router>
        )
    }
}
export default App;

接口封装和vue的一样