Netease cloud music PC project actual combat


Project introduction

1. Project introduction

  • Used by the project“Technology stack“
    • CSSuseFlexFor the layout
    • Configure the path alias using:carco
    • Project routing uses:react-routerTo manage the
    • usereact-router-configCentralized path mapping table management
    • usestyled-components+ commoncssWriting style
    • useaxiosSending network Requests
    • Project comprehensive embraceReact Hooks
    • The project component library uses:ant design
    • useimmutableFor the projectreducerIn thestatemanage
    • useredux-immtableThe root directoryreducerIn thestatemanage
    • Projects usingredux-thunkThe middleware
    • usepropTypecheckpropsType and default value
    • usereact-transition-groupAdd transition animation effects
    • Optimization in the project: all functional components are usedmemo, route lazy loading, function anti – shake
  • The project“The target“
    • useReactDevelopment of netease Cloud music PC website

2. Suitable for people and harvest

  • Suitable for people:
    • Suitable for those who want to know the general process of a project
    • Or they learnedThe React bucketsbut“Lack of React project experience“
      • (If you don’t know anything about React, check out the React series.)
      • It’s better to knowNode)
  • Harvest:
    • How to design music player components, lyrics analysis, etc.
    • Project directory structure division, large projectstatemanagement
    • General process of the project, how to optimize performance and so on
  • Note:
    • As you learn this article, page logicjsNo more posts (only general implementation ideas)
    • After all, thinking and doing more is practice 😎

3. Display of page effects and functions

Recommendation/new album/list


Routing switch


Song reviews


list


player


Song switching (random, sequential, single loop)


Song search


  • New: Keyboard events ↓ & function shake proof
    • ctrl+kSearch box gets focus & wake up search drop – down box
    • escUnfocus & drop down box
    • enterEnter the song search details

List of song search details

  • Press in the search boxenterOk, search the list“basic“Function implementation

4. Project source code and API interface

  • Project Online preview address 👉 : indicates the online preview address
  • “Project Github source 👉” : Music 163 If you feel good about the project 👏, give a ⭐ to encourage it ~
  • “API description (choose one of the following)“
    • Optional:
      • API Interface documentation
      • Your ownThe netease cloud is deployed locallyNode APIinterfaceCan also use the ones I have deployed to the serverAPI👇
    • Optional 2:
      • The server interface has been deployed: online netease Cloud Music API

5. Project specifications

  • Project specifications: There are some development specifications and code styles in the project (you can also follow your own custom)

    1. Folders and file names are all lowercase and multiple words are connected with hyphens (-).

    2. JavaScript variable names use small humps, constants use all uppercase letters, components use large humps;

    3. The CSS uses a combination of the common CSS and styled- Component

      • Global use commonCSSPartial adoptionstyled-component

    4. Moving away from class components, unifying functional components, and fully embracing Hooks;

    5. All functional components are wrapped with Memo to avoid unnecessary rendering.

    6. Internal component status, using useState and useReducer. All business data is managed in REdux;

    7. Function components are coded in the following order:

      • Components,stateManagement;
      • reduxthehooksCode;
      • Other componentshooksCode;
      • Other logical code;
      • Return JSX code;

    8. The redux code specification is as follows:

      • Each module has its own independentreducerThrough thecombineReducerTo merge;
      • Asynchronous request code useredux-thunk“And write inactionCreators;
      • reduxApply directly toredux hooksIs not used anymoreconnect;

  • Other specifications are decided and written in the project according to the actual situation;

6.React DevTools tag hidden

  • Before the actual development project: We openNetease Cloud Music official websiteWhy can’t you see the official website of netease Cloudreact devtoolsThe markup of the plug-in (not important)
  • The React devTools flag is hidden

// disable react-dev-tools for this project

if (typeof window.__REACT_DEVTOOLS_GLOBAL_HOOK__ === "object") {

 for (let [key, value] of Object.entries(window.__REACT_DEVTOOLS_GLOBAL_HOOK__)) {

  window.__REACT_DEVTOOLS_GLOBAL_HOOK__[key] = typeof value == "function" ? (a)= >{} : null;

 }

}

Copy the code




Project initialization

Vscode&chrome plugin (optional)

  • If you have already installed it, you can skip it. The following is optional, but you can also skip it

  • For easier development projects, it is recommended to install the following vscode “plug-ins”

    • ESLint: Code style checker to help standardize code writing

    • Vscode-styled – Components: Syntax highlighting and styling components in writing styled- Components

    • Path-alias: indicates that an alias path has an intelligent prompt

    • ES7 React/story/GraphQL/React – Native snippets: code snippet

  • Chrome plug-ins

    • Redux DevTools: Easy to debugreduxdata
    • FeHelper: returned to the serverjsonData beautification

1. Project directory division

  • usecreate-react-appScaffold initialization project structure:create-react-app music163_xxx
  • The directory structure can also be divided according to its own custom structure
│ ─ SRC

├─ Assets for public resources CSS and Pictures

├ ─ CSS global CSS

├ ─ img

├─ Common

├─ Components common Components

├─ Pages Route Mapping Component

├─ Router Front-end Route Configuration

├─ Service Network Configuration and Request

├ ─store Global store setup

├ ─utils Tool functions

├ ─ grammar

Copy the code

2. Project Description

❝

  • “This chapter is only a preliminary introduction to the project and a clear objective.“
  • Later, articles about actual combat of the project will be published in the follow-up (more detailed, each chapter has a clear goal to completegifFigure)
  • “It is not easy to do project actual combat + document development. I have been close to school for about 2 months. If it is useful to all friends, I hope to give you a star⭐“

❞


Thank you

  • Thank you very muchWang hong yuanThe teacher’s“React Core technologies“Let me learn a lotReactKnowledge.
  • Thanks to the backend provider Binaryify, the interface is stable and the documentation is good