React builds a simple version of Douban

preface

I wrote an article about building a simple version of Douban based on VUE before. Recently, I came into contact with React, so I rewrote the project with React to experience the similarities and differences between the two in actual development. This article will briefly describe the project situation and some scattered problems encountered in the process of building the project, for record, superficial knowledge, if there are mistakes and omissions, please correct them.

Description of project

Project address: React-Douban

Project Introduction: Build a simple version of Douban based on React, realizing the function of displaying books, movies, music, local activities and other contents according to different types.

Technology stack: React + Mobx + React-Router + AXIos + Sass + ES6/7, etc. At the same time, ESLint, Stylelint, Prettier and other excellent open source tools were used to adjust the constraints of the project to ensure the code quality and uniform style.

Project Background: The interface style of this project is from Douban, and the data is obtained from the official API of Douban. Due to the request limitation, frequent requests will lead to request failure, which should be noted.

Development environment: Node V8.1.2, NPM 6.1.0, YARN 1.7.0; Browser: Chrome 67.0.3396.99, Firefox 61.0.1.

Run the project

Before running the project, ensure that the Node environment is properly installed.

• If the Git environment is not installed, you can also download the installation package from the React-Douban.

git clone https://github.com/nh0007/react-douban.git
Copy the code

• Go to the project root directory and install dependencies.

npm install 
or 
yarn install
Copy the code

• After installing dependencies, run the project;

npm start
or
yarn start
Copy the code

• After the operation is completed, the browser will automatically pop up the access page, and you can see the operation effect of the project.

Project screenshots

This project is mainly divided into four modules: reading, film, music and city activities. The following are the screenshots of each module:

Issues needing attention in development

1. Initial project configuration

As the saying goes: well begun is half done. The addition of inspection configuration at the beginning of the project is the cornerstone of the later development of the project. So, after building the project using the create-React-app scaffolding, to add custom configurations, eject the project and then add the following configuration:

• Check code quality using Airbnb inspection rules;
• Use the Prettier tool to unify code style;
• Use stylelint to check the style code;
• Husky, Lint-staged validation of code about to be delivered.

At the beginning of contact with these configuration friends may be very uncomfortable, even irritable, configuration after the development process always error, affecting the progress. But it’s still a cost to pay, especially if you’ve managed to maintain some “messy” code. For specific configurations, you can view the submission record, in which you can submit and modify the configurations. If you’re still a little confused, there’s a video on YouTube that explains the initial configuration and how to use it with the editor plug-in in less than 10 minutes. It’s pretty clear, if you’re new to it.

@action
setCurrentBookTags = tags => {
  if (tags.tagName !== this.currentBookTags.tagName) {
    this.currentBookTags = tags;
  }
};
Copy the code

Import {Observable, action, flow} from mobx'mobx'; / / asynchronous data need to bind this, no matter you are enclosing props. BookStore. SetTypeBooks (type) call, // still const {setTypeBooks } = this.props.bookStore; setTypeBooks(type); No errors can be made;setTypeBooks = flow(
  function* (type, start, count, isAfresh = false) {
    const oldData = this.typeBooks.get(type);
    if(oldData && ! isAfresh)return;
    try {
      const response = yield getCurrentTypeBooks(type, start, count);
      const data = response.data.books;
      this.typeBooks.set(type, data);
    } catch (error) {
      console.log(error);
    }
  }.bind(this)
);
Copy the code

• In Mobx4, PropTypes. Array is an observable array, so you can’t use PropTypes. In Mobx5, you can use Proxy to track changes.
• ObservableMap (mobx-React observableMap) is more suitable for type checking than PropTypes. ObservableMap (Mobx-React observableMap) can be used for type checking. PropTypes in mobx-React and prop-types in Mobx-React have the same name problem:

import { observer, inject, PropTypes as mobxPropTypes } from 'mobx-react';
import PropTypes from 'prop-types';
Copy the code

3. Realization of round seeding

In the project, there are a lot of pages showing content in rotation. There are some problems encountered in the implementation process, which are recorded here.

First take a look at the rotation effect of the project:

Although there are some excellent rote libraries, this is not a dedicated rote library, but with transition, animation effects to achieve.

React and Vue use transitions and animations differently:

• React can be assisted by the react-transition-group library.
• In Vue, v-if and V-show can be combined to control the display of hidden animations. In react-transition-group, its in attribute is mainly used.

import React, { PureComponent } from 'react';
import { TransitionGroup, CSSTransition } from 'react-transition-group';

export default class Slider extends PureComponent {
  ...
  render() {...return (
      <TransitionGroup className="slider-list">
        {itemArray.map((item, index) => (
          <CSSTransition
            key={item.id}
            in={currentPage === index}
            timeout={500}
            classNames={`slider-${slideDirection}`}
            unmountOnExit
          >
            ...
          </CSSTransition>
        ))}
      </TransitionGroup>
    )
  }
}
Copy the code

{bookList.map((bookArray, index) => (
  <ul
    key={bookArray[0].id}
    style={{display: currentPage === index ? 'block' : 'none'}} >... </ul> ))}Copy the code

{bookList.map((bookArray, index) => (
  <BookTagDisplayItem
    key={bookArray[0].id}
    isShow={currentPage === index}
  />
))}
Copy the code