编程知识 cdmana.com

Development of Netease cloud music PC project based on react family bucket (1)

NetEase cloud music PC Project practice

Project brief introduction

1. Project introduction

  • The project uses Technology stack

    • CSS Use Flex Make a layout
    • Configure the path alias to use : carco
    • Project routing uses : react-router To manage
    • Use react-router-config Centralized path mapping table management
    • Use styled-components+ ordinary css Writing styles
    • Use axios Send network request
    • The project embraces React Hooks
    • Project component library uses : ant design
    • Use immutable For the project reducer in state Conduct management
    • Use redux-immtable For the root directory reducer in state Conduct management
    • Project use redux-thunk middleware
    • Use propType check props Type and default value
    • Use react-transition-group Add transition animation effect
    • Optimization in the project : Functional components all adopt memo、 Road load by lazy 、 Function anti shake
  • Project The goal is

    • Use React Whole family barrel develops Netease cloud music PC Website

2. Suitable for people and harvest

  • Suits the crowd :

    • It is suitable for people who want to know the general process of a project
    • Or learning React Family bucket however lack React Project experience

  • Harvest :

    • How to design music player components , Lyrics analysis, etc
    • The structure of the project directory , Big projects state management
    • The general process of the project , How to optimize the performance and so on
  • Be careful :

    • When studying this article , Page logic js No more posts ( There is only a rough idea of implementation )
    • After all, thinking and doing more is practice

3. Page effect and function display

recommend / New dishes are on the shelves / The list

Route switching

Song reviews

Ranking List

player

Song switching ( Random 、 The order 、 Single tune circulation )

Song search

  • newly added : Keyboard events ↓ & Function anti shake

    • ctrl+k Search box to get focus & Wake up search dropdown box
    • esc Remove focus & A drop-down box
    • enter Enter the song search details

Song search details list
  • In the search box, press enter that will do , Search list basic Function realization

4. Project source code and API Interface

5. Project specifications

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

    1. Folder 、 The file name should be in lower case 、 Multiple words to connect (-) Connect ;
    2. JavaScript The variable name is marked by a small hump , Constants are all in uppercase , The components adopt the big hump ;
    3. CSS Using common CSS and styled-component Combine to write

      • The whole situation adopts common CSS、 Local use of styled-component
    4. The whole project is no longer used class Components , Unified use of functional components , And embrace all around Hooks;
    5. All functional components , To avoid unnecessary rendering , All use memo Package ;
    6. The state inside the component , Use useStateuseReducer; All business data is placed in redux In the management ;
    7. The internal code of function components is basically written in the following order :

      • Inside the component state management ;
      • redux Of hooks Code ;
      • Other components hooks Code ;
      • Other logic code ;
      • return JSX Code ;
    8. redux The code specification is as follows :

      • Each module has its own independent reducer, adopt combineReducer A merger ;
      • Asynchronous request code uses redux-thunk, And it's written in actionCreators in ;
      • redux Direct adoption redux hooks How to write , No longer use connect;
  • Other specifications are determined and written according to the actual situation in the project ;

6.React devtools Mark hidden ( Understanding can )

// 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;
    }
}

Project initialization

Preface -vscode&chrome plug-in unit ( Optional )

  • If already installed, you can choose to skip , The following are optional , Of course, it's ok if you don't install it
  • For more convenient development projects , It is recommended to install the following vscode plug-in unit

    • ESLint: Code Style Checker , Help us standardize code writing
    • vscode-styled-components: Writing styled-components Syntax highlighting and style components in
    • path-alias: The alias path has a corresponding smart prompt
    • ES7 React/Redux/GraphQL/React-Native snippets: code snippet
  • chrome plug-in unit

1. Project directory Division

  • Use create-react-app Scaffold initialization project structure : create-react-app music163_xxx
  • The directory structure can also be divided according to the structure you are used to
│─src
  ├─assets  Storage of public resources css And pictures 
    ├─css   overall situation css
    ├─img  
  ├─common   Some common constants 
  ├─components  Common components 
  ├─pages    Routing mapping component 
  ├─router   Front end routing configuration 
  ├─service  Network configuration and requests 
  └─store    Overall store To configure 
  └─utils    Tool function 
  └─hooks    Customize hook

2. Project description

  • This chapter is only a preliminary introduction to the project and clear objectives .
  • After that, the article about the actual combat of the project , Release later ( More detail , Each chapter has a clear goal to accomplish gif chart )
  • Do project practice + Developing documentation is not easy , Before and after the school close to do 2 About a month or so , If it's useful to you , I hope to give star

thank

  • Thank you very much Wang Hongyuan The teacher's React Core technology practice Let me learn a lot React Knowledge .
  • Thank you very much Binaryify, The interface is stable , The documentation is perfect

版权声明
本文为[The wind does not know the way]所创,转载请带上原文链接,感谢

Scroll to Top