The React framework is a quick start

Introduction –

  • data

    • The react website
    • The editor VScode
    • The source address
    • umi
    • dva
    • antd

  • The environment

    • node.js
    • Taobao mirror

  • Features:

    • Virtual dom
    • object-oriented
    • MVC

Differences from raw HTML

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <title>Document</title>
</head>
<body>
    <div>hello world</div>
    <button onclick="btnClick()">Click on the</button>
   
</body>
<script>
    const btnClick = () = > {
        alert('hello')}</script>
</html>
Copy the code
react
  1. Create modules and associate routes
const App = () = > {
    return (
        <div>hello</div>)}export default App;
Copy the code

  1. Components store useState, lifecycle, and useEffect

    1. import React, { useState, useEffect } from 'react';
const [value,setValue] = useState(' ')
useEffect(() = > {
       //do something
	}, [])
Copy the code

  2. The service and the model

    1. import request from "@/utils/request"

export async function getList() {
  return request(`/api/hate-service/hate/org/list? type=1`)}Copy the code
    2. import {
  getList,
} from "./service"
const Model = {
  namespace: "hello".state: {
    list: []},effects: {*getList(obj, { call, put }) {
      const response = yield call(getList, obj)
      console.log(response,'responseresponse')}},reducers: {
    save(state, { payload }) {
      return{... state, ... payload, } }, }, }export default Model

Copy the code

  3. The directory structure

    1.

  4. Proxy Server Proxy

    1. const proxy = {
  "/api/": {
    target: "http://jxappserver.jiuxiniot.com:8080".changeOrigin: true.pathRewrite: { "^/api": ""}}},export default proxy

Copy the code

  5. The View layer associates the Model layer

    1. connect

      import { connect } from "umi"


const App = (props) = > {
    console.log(props,The '-')
    return (
        <div>hello</div>)}// export default App;

export default connect(({ hello, loading }) = > ({
    list: hello.list,
    submitting: loading.effects["hello/getList"],
  }))(App)
  
Copy the code

    2. Dispatch calls the effects

  6. Call ANTD, the UI component

    1. import {Button} from 'antd'; const App = (props) => { console.log(props,'---') const [value,setValue] = useState('') useEffect(() => { //do something }, []) return (< > < div > hello < / div > < Button > Button < / Button > < / a >)}Copy the code