Click to enter the GitHub repository (welcome to star, mention PR oh!)

The project supports PWA. Click Chrome or Safari to add it to the home screen, and you can access it in the form of ICONS on the desktop like the App. The experience is as smooth as silk

Chapter 1: Project description and initialization

One, foreword

Why did you do this project (React Music WebApp)?

Here’s why the React open source project was created:

  • 1. The back-end interface and documentation are complete. As we all know, the development of a product is by no means just a person’s work at the front end. Now Github has a very mature interface to grab netease cloud music service end, which is not only constantly updating the interface with The Times, but also very perfect documentation. Using such real data interface can greatly facilitate our front-end development and greatly reduce the cost of front-end development.

  • React Hooks are now popular in the front-end industry because of their API simplicity, logic reuse and other features. Vue3.0 will also adopt similar function-based mode, so learning React Hooks will be a big trend in the future. Practicing and applying hooks on a specific project would be much better than just working through the documentation, and there would be some bugs in the process. Learning from the bug drive would help us understand the hooks principle better.

  • 3. Redux and immutable data is also an important way to optimize React performance. I have long wanted to use Redux and immutable data structure library immutable.

Why do I do this tutorial?

  • 1. First of all, WHEN this project was sent out, I made a Promise that the deconstructed article would come out, which is the direct reason.

  • 2. I believe that this series can help a lot of front-end developers and influence a lot of people through my talent and efforts. I think this is a very fulfilling thing.

  • Output forces input. I didn’t start this project when EVERYTHING was ready. I tried it step by step and kept learning new things to get where I am now. I think it is also a process to write a copy of deconstructed articles, so that I can constantly generate new ideas and try them, which is also a kind of growth for myself.

Ii. Project Introduction

Overall project structure

This is the version we are going to develop, as you can see, the project is a little bit complicated, I believe you will have a great harvest after finishing.

Technology stack decomposition

  • The react v16.8: MVVM framework for building user interfaces
  • redux: famous JavaScript state management container
  • redux-thunk: Redux middleware that handles asynchronous logic
  • immutableThe memo wrapped function component works like a PureComponent, performing a shallow comparison of data before the component is updated. See this articleWhen PureComponent meets ImmutableJS)
  • react-lazyloadReact Lazy library loading
  • better-scroll: a well-known library to enhance the mobile sliding experience
  • styled-components: Handling styles that represent front-end engineering artifacts of CSS in JS (see my previous article for details)Styled – Components: New idea for front-end component separation)
  • axios: The data used to request the backend API

Development code Style

Before starting this project, IT is necessary for me to emphasize the development specifications of this project and my personal coding style. In advance, I do this for my own good reasons, to make the project as readable and maintainable as possible. I hope I will not be surprised to see some strange operations later.

1, class components are no longer used; fully embrace hooks, use function components.

Internal component state is handled by hooks. All business data is managed in REdux.

3. Ajax request and subsequent data processing specific code is all in actionCreator, processed by Redux-Thunk, as much as possible to simplify the component code.

4. Each container component has its own reducer, which is merged under the global store by Redux combineReducer method.

5. JS variable names (including function names) are styled as small humps, and styled container names derived from component names or styled- Components are styled as large humps, and constant names are capitalized.

6, ordinary CSS class names are all in English lowercase, words are connected with the underscore, CSS animation hook class name words are connected with -.

If there is any data in the props, the components should be decomposed in advance, and the properties and methods should be declared separately. Also, the props obtained from the parent component and the props derived from the react-redux mapping should be declared separately.

UseEffect is written uniformly at the front and immediately after the props destruct assignment code.

All functions responsible for returning JSX should be clustered at the end of the function, without interspersing event handlers and other logic.

MapDispatchToProps returns a function name in xxxDispatch format to avoid conflicts with existing action names.

How can you improve through this project?

    1. Be familiar with Business development using React Hooks, understand which scenarios generate closure traps and how to avoid them.
    1. Understand React + Redux engineering coding process.
    1. Encapsulate commonly used mobile terminal components to realize common requirements, such as encapsulating rolling components, realizing lazy loading of pictures, realizing the function of pull-up/pull-down refresh, realizing the function of anti-shake, realizing CodeSpliting, etc. (please refer to the project architecture diagram).
    1. Having practical project experience in implementing complex front-end interactions and improving your internal skills, such as developing a player kernel, is one of the big, big challenges.
    1. Master many skills in CSS, improve their CSS ability, whether layout or animation, there are quite a lot of practice and exploration, and one effect will give a variety of different schemes, we open the project preview address can experience.
    1. Package JS third-party package to achieve the whole process from development, testing to release.
    1. Thoroughly understand the principles of REdux and be able to independently develop redux middleware.

Does this make you feel a little excited? Ha ha, don’t count your chickens before they hatch. It’s not easy to master these things, and there’s a lot more to go through. I can’t guarantee that you’ll be able to digest them 100%, but one thing I can guarantee is this:

I will devote myself to this series of deconstructing articles, and share with you all the pits and problem-solving process I experienced in the development without reservation. For some unfamiliar concepts and grammar will be laid out one by one, so as to truly “touch hands”. As for the code involved in it, I will first write it in Markdown by myself, and then I will implement it from beginning to end by myself in comparison with the development interface of Vuepress blog, so as to give everyone enough technical security.

However, this series of disassembly articles is not aimed at the front-end pure white, because the basic part is too popular science too much basic content many friends will be tired, so you need to have a certain front-end knowledge of the reserve, specifically refers to CSS common layout and attributes, the basis of native JavaScript, ES6 common syntax, Basic use of React and Redux.

Recommended learning materials

If there are some things you don’t already know, I recommend you study these materials first:

Ruan Yifeng ES6 introduction

React Hooks And React Hooks

Initialize the project

For this section you can refer to the GitHub repository chapter1 branch. portal

Create-react-app scaffolding initialization

Start by using the create-react-app scaffolding tool to generate the initialization structure of the project. Type the following command on the command line:

create-react-app cloud-music
Copy the code

When finished, follow the prompts:

cd cloud-music
Copy the code

Launch project:

npm start
Copy the code

Project Directory Description

Before we can start this project, we need to make some changes to the catalogue. As follows (mainly for SRC directory):

├─ API // Network request code, Tool class functions and related configuration ├─ Application // Project Core functions ├─ Assets // Font Configuration and Global Style ├─baseUI // Basic UI ├─routes // └─store // ├─routes // ├─ store // / index.js // // // // // // // // // /Copy the code

Useless files generated by scaffolding have been removed. Note that the related import statements have also been removed. This should be the final project directory for the entire application, and future development will be based on this directory structure.

Default style and font icon ready

The style of this project is styled- Components, which is styled using CSS in JS. For those who are interested, please read my article in Denver, styled- Components: A new idea for the separation of front-end components. Of course, someone mentioned some disadvantages of this library to me after reading my project, but I still insist on using it for development, because its advantages in engineering are still very obvious, and most of the disadvantages can be avoided consciously, which will be discussed in the following chapters.

Styled components, for the style network, are quite simple to use and do not require additional specialized learning, so follow me and familiarize yourself with it.

Style.js instead of.css is the default style file in the directory above. Yes, this is the result of using styled- Components.

Let’s start by installing this library:

npm install styled-components --save
Copy the code

In the style.js file,

import { createGlobalStyle } from 'styled-components';

export const GlobalStyle = createGlobalStyle`
	html, body, div, span, applet, object, iframe,
	h1, h2, h3, h4, h5, h6, p, blockquote, pre,
	a, abbr, acronym, address, big, cite, code,
	del, dfn, em, img, ins, kbd, q, s, samp,
	small, strike, strong, sub, sup, tt, var,
	b, u, i, center,
	dl, dt, dd, ol, ul, li,
	fieldset, form, label, legend,
	table, caption, tbody, tfoot, thead, tr, th, td,
	article, aside, canvas, details, embed, 
	figure, figcaption, footer, header, hgroup, 
	menu, nav, output, ruby, section, summary,
	time, mark, audio, video {
		margin: 0;
		padding: 0;
		border: 0;
		font-size: 100%;
		font: inherit;
		vertical-align: baseline;
	}
	/* HTML5 display-role reset for older browsers */
	article, aside, details, figcaption, figure, 
	footer, header, hgroup, menu, nav, section {
		display: block;
	}
	body {
		line-height: 1;
	}
	html, body{
		background: #f2f3f4;;
	}
	ol, ul {
		list-style: none;
	}
	blockquote, q {
		quotes: none;
	}
	blockquote:before, blockquote:after,
	q:before, q:after {
		content: '';
		content: none;
	}
	table {
		border-collapse: collapse;
		border-spacing: 0;
	}
	a{
		text-decoration: none;
		color: #fff;
	}
`
Copy the code

This is the code for styled- Components to create the global style and export it.

Where do I export this code? Import to app.js.

// add this sentence to app.js
import { GlobalStyle } from  './style';
Copy the code

Let’s continue to introduce the font icon file, the font icon here is the address of ali icon library

Select the icon and download it locally (download Unicode mode for this project). This operation is not the focus of this project and is too simple to waste space on.

Create a folder named iconfont in assets and place the files with the suffix. CSS,.eot,.svg,.ttf, and.woff in this folder. Then make some changes to the CSS file and change it to JS code.

So now the iconfont. CSS needs to be changed to iconfont. Js.

import {createGlobalStyle} from 'styled-components';

export const IconStyle = createGlobalStyle` @font-face {font-family: "iconfont"; src: url('iconfont.eot? t=1565320061289'); /* IE9 */ src: url('iconfont.eot? t=1565320061289#iefix' ... Format ('embedded-opentype'), /* ie6-ie8 */ url('data:application/x-font woff2; charset=utf-8) format('woff2'), url('iconfont.woff? t=1565320061289') format('woff'), url('iconfont.ttf? T =1565320061289') format(' trueType '), /* Chrome, Firefox, Opera, Safari, Android, iOS 4.2+ */ url('iconfont. t=1565320061289#iconfont') format('svg'); /* iOS 4.1- */}. Iconfont {font-font-family: "iconfont"! important; font-size: 16px; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }... `
Copy the code

Next, let’s introduce fonts into app.js.

//App.js
import React from 'react';
import { IconStyle } from './assets/iconfont/iconfont';
import { GlobalStyle } from './style';

function App() {
  return (
    <div className="App">
      <GlobalStyle></GlobalStyle>
      <IconStyle></IconStyle>
      <i className="iconfont">&#xe62b;</i>
    </div>
  );
}

export default App;
Copy the code

When you open the page, you’ll see a small magnifying glass, the background is light grey, and the font icon and default style are in effect.

At this point, the default styles and font ICONS are incorporated into the project. You may be familiar with the use of font ICONS, but where does the Unicode encoding in the middle come from? Don’t worry, I put the demo_index. HTML file in the iconfont folder, which can be opened to index the unicode values of different ICONS.