Нажмите, чтобы войти в репозиторий GitHub(Добро пожаловать в звездочку и упомяните пр!)

Нажмите, чтобы ввести онлайн-адрес проектаПроект поддерживает PWA, нажмите на браузер Chrome или Safari, чтобы добавить его на главный экран, вы можете получить к нему доступ в виде значка на рабочем столе, как приложение, и опыт будет таким же гладким, как шелк :)

Глава 1: Описание проекта и инициализация

Введение

Почему появился этот проект (React Music WebApp)?

Прежде всего, давайте поговорим о том, почему мы хотим сделать такой проект с открытым исходным кодом React:

1. Бэкенд интерфейс и документация готовы.Все мы знаем, что разработка продукта это не просто работа одного человека на фронтенде.На общение с бэкендом, обсуждение формы уходит много времени интерфейса данных и, наконец, сделать документ и использовать его в качестве основы. И теперь у github есть очень зрелый интерфейс для захвата облачного музыкального сервера NetEase.Мало того, что интерфейс постоянно обновляется со временем, так еще и документация очень хорошо написана.Использование такого реального интерфейса данных может значительно облегчить нашу фронтенд-разработку ., что значительно снижает стоимость нашей фронтенд-разработки.
2. React Hooks в настоящее время является "популярной нишей" во внешнем мире. Из-за простоты API и повторного использования логики разработчики постепенно применяют его. Будущая vue3.0 также примет аналогичную модель, основанную на функциях, поэтому Изучайте React Hooks Это тоже общая тенденция на будущее.Я думаю, что гораздо лучше практиковаться и применять хуки через конкретный проект, чем сушить документы, и в процессе практики будут некоторые ямы. углубить наше понимание Понимание принципа крючков.
3. Сочетание Redux с неизменяемыми данными также является важным средством оптимизации производительности React Я давно хотел использовать Redux для разработки immutable.js, библиотеки неизменяемых структур данных с открытым исходным кодом Facebook, поэтому я использую этот проект, чтобы специально попрактиковаться.

Зачем делать этот урок?

1. Во-первых, когда вышел этот проект, я уже дал Обещание, и статья по разборке обязательно выйдет, это прямая причина.
2. Я считаю, что эта серия может помочь многим фронтенд-разработчикам и может повлиять на группу людей своими талантами и усилиями.Я думаю, что это очень полезная вещь.
3. Выход заставляет ввод. Я не начал разрабатывать этот проект, когда все было готово, а старался шаг за шагом и продолжал учиться новому для достижения текущего эффекта. Хочу написать статью по разборке и обзор на нее, это тоже такой процесс, чтобы постоянно генерировать новые идеи и пробовать их, что тоже своего рода рост для себя.

2. Введение проекта

Общая структура проекта

Это версия, которую мы собираемся разработать.Как вы видите, этот проект все еще немного сложен.Я думаю, что каждый много выиграет после его выполнения.

Разбивка стека технологий

react v16.8: Фреймворк MVVM для создания пользовательских интерфейсов.
redux: знаменитый контейнер управления состоянием JavaScript.
redux-thunk: промежуточное ПО Redux, которое обрабатывает асинхронную логику.
immutable: библиотека для обработки персистентных структур данных, разработанная Facebook в течение трех лет. (Это артефакт в сочетании с memo и Redux. Компонент функции переноса memo имеет тот же эффект, что и PureComponent. Перед обновлением компонента выполняется неглубокое сравнение данных. Подробности см. в этой статье.Когда PureComponent встречает ImmutableJS)
react-lazyload: реагировать на ленивую загрузку библиотеки
better-scroll: известная библиотека для улучшения мобильного скольжения.
styled-components: Обрабатывать стили и отражать технические артефакты интерфейса css в js (подробности см. в моей предыдущей статье).styled-components: новая идея разделения внешних компонентов)
axios: данные, используемые для запроса внутреннего API

стиль кода разработки

Прежде чем начать этот проект, мне необходимо подчеркнуть спецификации разработки этого проекта и мой личный стиль кодирования.Позвольте мне заранее сообщить вам, что у меня есть свои причины для этого, чтобы сделать проект максимально читабельным и удобным для обслуживания Гао, надеюсь, ты не удивишься, увидев какие-то странные операции позже.

1. Компоненты класса больше не используются, полностью охватывают хуки и единообразно используют функциональные компоненты.

2. Внутреннее состояние компонента обрабатывается хуками, а все бизнес-данные управляются в редуксе.

3. Конкретные коды запросов ajax и последующей обработки данных все помещаются в actionCreator и обрабатываются redux-thunk, чтобы максимально упростить код компонента.

4. Каждый компонент-контейнер имеет свой собственный независимый редуктор, который затем объединяется с глобальным хранилищем с помощью метода redux combReducer.

5. В именах переменных JS (включая имена функций) используется строчный верблюжий регистр, имена компонентов или имена контейнеров стилей, экспортируемых styled-components, используют большой верблюжий регистр, а все имена констант пишутся с заглавной буквы.

6. Все общепринятые имена классов CSS пишутся строчными буквами английского алфавита, слова соединяются символами подчеркивания, а слова в именах классов хуков анимации CSS соединяются символом -.

7. Все данные в пропсах должны быть деконструированы и назначены заранее в передней части компонента, а полученные имя свойства и имя метода должны быть объявлены отдельно. -redux также должен быть объявлен отдельно.

8. UseEffect пишется впереди и сразу следует за кодом назначения деструктурирования реквизита.

9. Все функции, отвечающие за возврат JSX, должны быть унифицированы в конце функции, а не перемежаться функциями обработки событий и прочей логикой.

10. В функции, возвращаемой mapDispatchToProps, имя функции имеет формат xxxDispatch, чтобы избежать конфликта с существующим именем действия.

Какие улучшения вы можете получить с помощью этой программы?

1. Опыт использования React Hooks для развития бизнеса, понимание того, какие сценарии приводят к ловушкам закрытия и как избежать ловушек.
1. Освойте весь процесс инженерного кодирования в React + Redux.
1. Инкапсулируйте часто используемые мобильные компоненты для достижения общих требований, таких как инкапсуляция компонентов прокрутки, реализация ленивой загрузки изображений, реализация функций обновления pull-up/pull-down, реализация функций защиты от сотрясений, реализация разделения кода компонента (CodeSpliting) и т. д. (см. к архитектуре проекта. рисунок).
1. Наличие практического опыта реализации сложных интерфейсных взаимодействий и совершенствование внутренних навыков, таких как разработка ядер игроков, является одной из самых больших проблем.
1. Овладейте многими навыками в CSS и улучшите свои навыки CSS. Независимо от того, макет или анимация, есть много практики и исследования, и один эффект даст множество различных решений. Вы можете испытать это на себе, открыв адрес предварительного просмотра проекта.
1. Инкапсулируйте сторонние пакеты JS, чтобы реализовать весь процесс от разработки, тестирования до публикации.
1. Тщательно понимать принцип редукции и быть в состоянии самостоятельно разрабатывать промежуточное ПО для редукции.

Вы чувствуете себя немного тронутым, когда видите это? Ха-ха, не радуйся слишком рано. На самом деле, освоить это содержание действительно непросто.Еще многое предстоит испытать.Мои личные способности также ограничены.Я не могу гарантировать, что вы сможете усвоить эти вещи на 100%, но единственное, что я могу гарантировать, это :

Я посвящу 100% этому циклу статей по разборке, и поделюсь с вами подводными камнями и процессом решения проблем, которые я испытал в разработке.Я объясню понятия и грамматики, которые могут быть вам незнакомы.Выкладывайте, быть настоящей "ручной рукой". Что касается задействованного в нем кода, я сначала снова напишу его в уценке, а затем отнесусь к себе как к новичку и реализую его от начала до конца в интерфейсе разработки блога vuepress, давая всем достаточное чувство технической безопасности.

Однако эта серия статей по разборке не рассчитана на чистых фронтенд-новичков, так как базовая часть слишком популярна со слишком большим количеством базового контента, многим мелким партнерам она надоест, поэтому нужно иметь определенный запас фронтенда. В частности, это относится к общему расположению методов и свойств CSS, основам нативного JavaScript, общему синтаксису ES6, базовому использованию React и Redux.

3. Проект инициализации

Вы можете обратиться к ветке Chapter1 репозитория GitHub для получения кода в этом разделе.портал

Инициализация скаффолдинга create-реагировать-приложение

Сначала создайте структуру инициализации проекта с помощью инструмента создания шаблонов create-react-app и введите следующую команду в командной строке:

create-react-app cloud-music

Когда закончите, следуйте подсказкам:

cd cloud-music

Стартовый проект:

npm start

Каталог проекта Описание

Прежде чем начать этот проект, нам нужно внести некоторые изменения в каталог. Как показано ниже (в основном для каталога src):

├─api                   // 网路请求代码、工具类函数和相关配置
├─application           // 项目核心功能
├─assets                // 字体配置及全局样式
├─baseUI                // 基础UI轮子
├─components            // 可复用的UI组件
├─routes                // 路由配置文件
└─store                 // redux相关文件
  App.js                // 根组件
  index.js              // 入口文件
  serviceWorker.js      // PWA离线应用配置
  style.js              // 默认样式

Бесполезные файлы, сгенерированные скаффолдингом, были удалены, и все должны обратить внимание на удаление соответствующих операторов импорта. В настоящее время это должен быть окончательный каталог проекта всего приложения, и дальнейшая разработка будет основываться на этой структуре каталогов.

Подготовка стиля и шрифта по умолчанию

Стиль этого проекта разработан с использованием styled-компонентов, то есть с использованием css в js.Зачем я это делаю?Заинтересованные студенты могут прочитать статьи, которые я писал в Nuggets ранее.styled-components: новая идея разделения внешних компонентов. Конечно, некоторые люди упоминали мне о некоторых недостатках этой библиотеки после прочтения моего проекта, но я все равно настаиваю на использовании ее для разработки, потому что ее преимущества в инженерии все еще очень очевидны, и большинство недостатков также можно сознательно устранить. , это будет подробно обсуждаться в следующей главе.

На самом деле использование styled-components довольно простое, и не требует дополнительного специального обучения, поэтому все подписывайтесь на меня, чтобы написать его еще раз и ознакомиться с ним.

Я не знаю, нашли ли вы проблему.Файл стиля по умолчанию в указанном выше каталоге — это style.js, а не .css.Да, это результат использования styled-components.

Давайте сначала установим эту библиотеку:

npm install styled-components --save

Только что в style.js,

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

Это код для styled-components для создания глобальных стилей и их экспорта.

Куда экспортируется этот код? Импортируйте в App.js.

//App.js中添加这一句
import { GlobalStyle } from  './style';

Давайте продолжим знакомить вас с файлом значка шрифта, значок шрифта здесь — это используемая библиотека значков Ali.адрес

После выбора значка загрузите его локально (этот проект загружает режим юникода). Эта операция не является целью этого проекта, и она слишком проста, поэтому здесь не будет лишнего места.

Создайте новую папку с именем iconfont в каталоге ресурсов и поместите в нее файлы с суффиксами .css, .eot, .svg, .ttf, .woff. Затем сделайте несколько трюков с этим файлом css, вам нужно изменить его на код js.

Поэтому текущий iconfont.css необходимо изменить на iconfont.js. Здесь сделаны некоторые упущения. Конкретный код можно найти в ветке Chapter1 репозитория GitHub.

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' ...省略base64巨长字符) 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.svg?t=1565320061289#iconfont') format('svg'); /* iOS 4.1- */
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
...
`

Далее мы импортируем шрифт в 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;

Далее, когда вы открываете страницу, вы можете увидеть маленькую лупу, фон становится светло-серым, и играет роль значок шрифта и стиль по умолчанию.

До сих пор стили по умолчанию и значки шрифтов были введены в проект вместе. Вы можете иметь представление об использовании значков шрифтов, но откуда берется кодировка Unicode в середине? Не беспокойтесь, я поместил файл demo_index.html в папку iconfont, и вы можете индексировать значения юникода разных значков при его открытии.

«Реагируйте, чтобы создать красивое веб-приложение» (пробное чтение)