React

Complete code stamp git

React first 篇 NPM, yarn introduction react second 篇 NPM, yarn Introduction react react third 篇 Single page application development react third 篇 Route &Hooks react fifth 篇 Synthet application (login + list)

React Redux Redux Redux Redux

1. Use of scaffolding

  • NPM install -g create-react-app or
  • Yarn add -g create-react-app // Mode 2
  • Then the create – react – react – demo app

2. Write Hello World

  • Sass support
    • Change app.css to app.scss so that CSS supports nested syntax
    • Install sass: yarn add node-sass –save (or yarn add node-sass -s)
  • Run the project: Run yarn start/ YARN run start according to package.json configuration
"scripts": {
    "start": "react-scripts start"."build": "react-scripts build"."test": "react-scripts test"."eject": "react-scripts eject"
  },
Copy the code

App.scss

// div {text-align: center; font-size:32px; h1 { color: red; font-size: 30px; }}Copy the code

App.js

import React from 'react';
import './App.scss';

class App extends React.Component{

    state = {
        val:' ',
        list:[]
    }

    handleChange=(event)=>{
        let val = event.target.value;
        this.setState({
            val
        })
    }


    handleAdd=()=>{
        let {val,list} = this.state;
        list.push(val);
        this.setState({
            list
        })
    }

    render() {
        const {val,list} = this.state;
        returnReact </p> <h1>Hello World</h1> <inputtype="text"Value ={val} onChange={this.handlechange}/> <button onClick={this.handleadd}> Add </button> <ul> {list.map((item)=>{return <li>{item}</li>
                })}
            </ul>
        </div>
    }
}


export default App;

Copy the code

3. Use of AntD UI framework

Ant Design

The installation

  • npm install antd –save
  • yarn add antd
  • Babel-plugin-import is loaded on demand

code

import React from 'react';
import {Input,Button,Select} from "antd";
import 'antd/dist/antd.css'

const Search = Input.Search;
const Option = Select.Option;
class AntD extends React.Component{

    state = {
        val:' ',
        list:[]
    }

    handleChange=(event)=>{
        let val = event.target.value;
        this.setState({
            val
        })
    }


    handleAdd=()=>{
        let {val,list} = this.state;
        list.push(val);
        this.setState({
            list
        })
    }

    handleSearch=(value)=>{
        let {list} = this.state;
        list.push(value);
        this.setState({
            list
        })
    }

    render() { const {val,list} = this.state; const options =[]; //width is an object const width = {width:300};returnReact </p> <h1>Hello World</h1> <Inputtype="text" value ={val} style={width} onChange={this.handleChange}/>
            <Button type= {"primary"} onClick={this.handleadd}> Add </Button> <ul> {list.map((item,index)=>{options.push(<Option key={index}>{item}</Option>)return <li key={index}>{item}</li>
                })}
            </ul>
            <div>
                <Search
                    style={width}
                    enterButton={"Search"}
                    onSearch={this.handleSearch}/>
                    <br/>
                <Select style={{width:200}} >
                    {options}
                </Select>
            </div>
        </div>
    }
}

export default AntD;

Copy the code

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import * as serviceWorker from './serviceWorker';
import AntD from "./AntD";

ReactDOM.render(
  <React.StrictMode>
    {/*<App />*/}
    <AntD />
  </React.StrictMode>,
  document.getElementById('root')); serviceWorker.unregister();Copy the code