preface

Recently, I began to learn React, so I copied the netease open class to strengthen my understanding of React. Here I would like to share my React coding projects and some pitfalls I have stepped in these days

The technology stack used

  • Data request: Axios
  • Background construction: KOA
  • Cross-domain solution: KOA-CORS
  • CSS precompiler: stylus
  • UI framework: ANTD
  • Other components: Rewire swiper better-scroll

Project Download Procedure

  • git clone https://github.com/fsafafaf/react-wyclass.git
  • The installation
    # install dependencies
    npm install
    Start the backend
    yarn server
    # start front-end
    yarn start
Copy the code

rendering

The login



Subscribe to the function



The search function

The overview


Function implementation

  • Tabbar switch
  • Carousel graph and slide function
  • Search function: according to user input search all courses meet the requirements of the course and display
  • Login function: Determines whether users can subscribe according to their login status
  • Subscription function: displays the subscription content according to the account subscribed by the user
  • Play function: Determine video content by sending parameters to the router

The pit of tread

A: the react – the router – the dom

① JS route switchover

In this project, I used React-Redux to manage the state of the data, but it was not connected to the database, so when the interface was refreshed, all the states in the store were cleared to zero. As a result, I couldn’t save the data at the beginning of the location Redirect. After a long time of confusion, I searched for the Redirect function of react-router-dom and found that the Redirect code could be implemented using the react-router-dom Redirect function

import { Redirect } from 'react-router-dom'

handleOnclick = () => {
    this.setState({ redirect: true})}render () {
    if(this.state.redirect){
            return <Redirect push to="/home"/ >; }return (<button onClcik={this.handleOnClick} type="button">Button</button>;)
}
Copy the code

② Data incoming to the child route

When coding the playing page, I used Redux to manage the data incoming to the playing page at first, but after the page was refreshed, the ID sent by Redux disappeared and the page became white. emmmm… I thought about it for a while and suddenly realized that the route of the page had not changed. It was still the route ending in ID! So why don’t I use routing to match the data that the playback interface should pass in! It’s worth mentioning that I used this.props. Match to get a route to the current page and then add the ID of the video as a route to the child page

The implementation code

import { Route } from 'react-router-dom'
class home extends Component {
    selectVideo(video, url) {
        return () => {
            this.props.history.push({
                pathname: url
            })
        }
    }
    return (
    
        <a onClick={this.selectVideo(item,`${match.url + '/' + item.id}`)}>
            <img src={item.img} />
            <div className="home-text">{item.text}</div>
        </a>
        
        <Route path = {`${match.url + '/:id'}`} component = {Play}/>
    )
}
Copy the code

Then simply filter out the ids in the child page and match the ids to get the data to play

The implementation code

class Play extends Component {
    constructor(props) {
        super(props);
        const arr = this.props.history.location.pathname.split('/')
        const id = parseInt(arr[arr.length-1])
        this.state = {
            id: id
        }
    }
}
Copy the code

The React component life cycle

The React component’s life cycle has three states

  • Mounting: The real DOM is inserted
  • Updating: Being rerendered
  • Unmounting: The real DOM has been removed

The componentDidMounting method is usually used to request data, but this method is not omnipotent and sometimes it is not reliable. To implement the subscription page, I initially used the componentDidMounting method to run the check account function. As a result, the subscription page would re-render only if I subscribed to my account on another page, while the subscription page would not re-render if I subscribed to my account directly on the subscription page. To make things simple, componentDidMounting only works when the component is reloaded, and we need this. Props to re-render the subscription every time it changes. We need to use componentWillReceiveProps method, it will be in the component receives a new prop (updated) is called, and this method will not be called when initializing render.

The implementation code

    componentWillReceiveProps() {
        getData().then(res => {
            const names = this.props.videos
            const arr = []
            if (names.length === 0) {
                this.setState({show: false})}else {
                this.setState({show: true})}for (var key in names) {
                for (var index in res) {
                    if (res[index].up === names[key])
                        arr.push(res[index])
                }
            }
            this.setState({
                videos: arr,
            })
        })
    }
Copy the code

Three: search function realization

Because the author used Antd framework to build this project for the first time, I wanted to use every component I saw. So… When I saw the AutoComplete component while doing the search function… I would… I’ll use it. Looking back now, I really want to go back and slap myself. I didn’t use it. I wasted an hour. If you want to see how AutoComplete implements search, EMMM… Well, you also wasted a minute, the author did not implement 😂. Talk about the author is how to realize the search function below. The onSearch property of antD’s Search component will automatically return us a value, so we don’t need to manually retrieve the value entered by the user in the input field, so we pass the value to our own defined onSearch() function, and then filter the class name collection allClass. IndexOf () >= 0; if value does not exist, the result of indexOf() is -1.

The implementation code

onSearch(value) {
        const result = this.state.allclass.filter(item => {
            if (item.Course.indexOf(value) >= 0)
                return item
        })
        console.log(result)
        this.setState({
            result: result
        })
    }
Copy the code

The filtered data can be displayed by traversing it with a map

render () {
    const result = this.state.result.map(item => {
            return  (  
                <div key={item.id} >
                    <NavLink to={`/home/${item.id}`}>
                        <div className="search-bar">
                            <div className="search-text">{item.Course}</div>
                            <Icon type="right" style={{ color: '#9b9b9b' }} />
                        </div>
                    </NavLink>
                </div>
            )
        })
    return (
    <div className="class-search">
        <div className="search">
            <Search
                placeholder="Nine"
                onSearch={value => this.onSearch(value)}
                style={{ width: 300 }}
                autoFocus
            />
            <div className="cancel-button"OnClick ={this.searchout ()}> Cancel </div> </div> <div className="content">
            {result}
        </div>
    </div>
    )
}
Copy the code

conclusion

The React project was coding while I was learning. There are still some minor bugs that haven’t been solved. For example, when I log out, my interface does not render automatically, and I have to switch routes again. I hope this article will be helpful to you. Finally, please attach my project address. If you think it is good, you can give me a STAR!