Netease Cloud Music PC project actual combat

Project introduction

1. Project introduction

  • Used by the projectTechnology stack
    • CSSuseFlexFor the layout
    • Configure the path alias to use:carco
    • Item routing uses:react-routerTo manage the
    • usereact-router-configCentralized path mapping table management
    • usestyled-components+ commoncssWriting style
    • useaxiosSend a network request
    • Project full 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 values
    • usereact-transition-groupAdd transition animation effects
    • Optimization in the project: Functional components are all usedmemo, lazy route loading, function stabilization
  • The projectThe target
    • useReactThe whole family bucket develops netease cloud music PC website

2. Suitable for the crowd and harvest

  • Suitable for:
    • Suitable for wanting to know the general flow of a project
    • Or learningThe React bucketsbutLack of React project experience
      • (If you don’t know it, you can refer to the previous React series articles)
      • It’s better to know a littleNode)
  • Harvest:
    • How to design music player components, lyrics analysis and so on
    • The structure of the project directory is divided into large projectsstatemanagement
    • The general flow of the project, how to optimize the performance and so on
  • Note:
    • When learning this article, page logicjsNo more posts (only general implementation ideas)
    • After all thinking and doing more is practice 😎

3. Page effect and function display

Recommended/new CD on/list

Routing switch

Song reviews

list

player

Song switch (random, sequential, single loop)

Song search

  • Added: Keyboard events ↓ & function stabilization
    • ctrl+kSearch box Get focus & wake up search drop – down box
    • escUnfocus & drop down box
    • enterEnter song search details

Song search details list

  • Click in the search boxenterOk, search the listbasicFunction implementation

4. Project source code and API interface

  • Project deployment preview address 👉 : view the preview address
  • The project is Github at 👉: Musci 163. If you think the project is good, please give ⭐ a pat on the back
  • API description (choose one of the following)
    • Optional:
      • API interface documentation
      • Your ownThe netease Cloud is deployed locallyNode APIinterface, or I can use the one I have deployed to the serverAPI👇
    • Optional 2:
      • Has been deployed to the server interface: online netease Cloud Music API

5. Project specification

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

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

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

    3. The CSS is written using a combination of normal CSS and Styled – Component

      • Global use of ordinaryCSSPartial adoptionstyled-component

    4. The entire project will no longer use class components, use functional components, and fully embrace Hooks;

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

    6. Component internal state, using useState, useReducer; All business data is managed in Redux.

    7. The code inside the function component is basically written in the following order:

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

    8. Redux code specifications are as follows:

      • Each module has its own independentreducerThrough thecombineReducerMerge;
      • Asynchronous request code usedredux-thunkAnd write inactionCreators;
      • reduxApply directly toredux hooksMethod written, no longer in useconnect;

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

6.React Devtools Tag hide

  • Before developing a project for actual combat: we openNetease Cloud Music official website, will find the netease cloud official website why notreact devtoolsThe tag of the plug-in (just know it, not important)
  • React DevTools tags are 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" ? () = >{} : null; }}Copy the code




Project initialization

Vscode&chrome plugin (optional)

  • If you have already installed it, you can choose to skip it. The following are optional, and of course you can not install it

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

    • ESLint: Code style checking tool that helps us write code properly

    • Vscode-styled – Components: Syntax highlighting and style components in the writing of Styled – Components

    • Path-alias: an intelligent message is displayed for the alias path

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

  • Chrome plug-ins

    • Redux DevTools: Convenient for debuggingreduxdata
    • FeHelper: returned to the serverjsonData beautification

1. Project directory division

  • usecreate-react-appScaffolding initializes the project structure:create-react-app music163_xxx
  • The directory structure can also be divided according to their own customary structure
│ ─ SRC ├ ─ assets for public resources CSS and images ├ ─ CSS global CSS ├ ─ img ├ ─ some of common public constants ├ ─ components common components ├ ─ pages route map component ├ ─ the router front-end routing configuration ├─service Network configuration and request ├─ store ├─ utils tool-function custom hookCopy the code

2. Project Description

  • This chapter provides only a preliminary introduction to the project and identifies its objectives.
  • After the actual project of the article, in the subsequent release (more detailed, each chapter has a clear goal to completegifFigure)
  • It is not easy to do project actual combat + development documents, before and after the school is close to do about 2 months, useful to all friends, hope to give a star⭐


Thank you

  • Thank you very muchWang hong yuanThe teacher’sReact core technology actual combatLet me learn a lotReactKnowledge.
  • Thanks to the backend provider, Binaryify, the interface is stable and well documented