React第三篇 单页应用开发

1,307 阅读2分钟

React 学习笔记

完整代码戳git

第一部分,腾讯课堂react入门课程
课程地址
React第一篇 npm、yarn介绍
React第二篇 React语法
React第三篇 单页应用开发
React第四篇 路由&Hooks
React第五篇 综合应用(登录+列表)

第二部分,Redux课程
课程地址
React第六篇 Redux
React第七篇 React Redux


1.脚手架使用

  • npm install -g create-react-app
  • yarn add -g create-react-app //方式2
  • 然后 create-react-app react-demo

2.编写Hello World

  • sass支持
    • 将App.css修改为App.scss , 这样css将支持嵌套语法
    • 安装sass:yarn add node-sass --save(或yarn add node-sass -S)
  • 运行项目:根据package.json配置 执行yarn start/yarn run start
"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

App.scss

//复合样式
div {
  text-align: center;
  font-size:32px;
  h1 {
    color: red;
    font-size: 30px;
  }
}

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;
        return <div>
            <p>欢迎学习react</p>
            <h1>Hello World</h1>
            <input type="text" value ={val} onChange={this.handleChange}/>
            <button onClick={this.handleAdd}>添加</button>
            <ul>
                {list.map((item)=>{
                    return <li>{item}</li>
                })}
            </ul>
        </div>
    }
}


export default App;

3. AntD UI框架使用

Ant Design

安装

  • npm install antd --save
  • yarn add antd
  • babel-plugin-import 按需加载

代码

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 是一个object对象
        const width = {width:300};

        return <div>
            <p>欢迎学习react</p>
            <h1>Hello World</h1>
            <Input type="text" value ={val} style={width} onChange={this.handleChange}/>
            <Button type={"primary"} onClick={this.handleAdd}>添加</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={"搜索"}
                    onSearch={this.handleSearch}/>
                    <br/>
                <Select style={{width:200}} >
                    {options}
                </Select>
            </div>
        </div>
    }
}

export default AntD;

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();