🔥Разработка проекта "NetEase Cloud Music PC" на базе корзины семейства React (1)

внешний интерфейс React.js
🔥Разработка проекта "NetEase Cloud Music PC" на базе корзины семейства React (1)

Битва облачного музыкального проекта Netease для ПК

Описание Проекта

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

  • используется проектомстек технологий
    • CSSиспользоватьFlexсделать макет
    • Для настройки псевдонимов пути используйте:carco
    • Маршрутизация проекта использует:react-routerсправляться
    • использоватьreact-router-configЦентрализованное управление картой маршрутов
    • использоватьstyled-components+ обычныйcssСтиль письма
    • использоватьaxiosотправить сетевой запрос
    • Принять проектReact Hooks
    • Библиотека компонентов проекта использует:ant design
    • использоватьimmutableк проектуreducerсерединаstateсправляться
    • использоватьredux-immtableв корневой каталогreducerсерединаstateсправляться
    • Использование проектаredux-thunkпромежуточное ПО
    • использоватьpropTypeчек об оплатеpropsТип и значение по умолчанию
    • использоватьreact-transition-groupДобавить эффект анимации перехода
    • Оптимизация в проекте: используются все функциональные компонентыmemo, маршрутизация отложенной загрузки, функция защиты от сотрясений
  • ПроэктЦель
    • использоватьReactFamily Bucket разрабатывает веб-сайт NetEase Cloud Music для ПК

2. Подходит для толпы и сбора урожая

  • Подходит для толпы:
    • Подходит для желающих понять общий процесс проекта
    • или обучениеReact 全家桶ноОтсутствие опыта работы с React проектами
  • награда:
    • Как спроектировать компоненты музыкального плеера, разбор текста и т.д.
    • Структура каталога проектов разделена, для больших проектовstateуправлять
    • Общий процесс проекта, как оптимизировать производительность и т.д.
  • Уведомление:
    • При изучении этой статьи логика страницыjsБольше никаких постов (только общие идеи реализации)
    • Ведь думать и делать больше — это практика 😎

3. Эффект страницы и отображение функций

Рекомендуемый/Новый выпуск диска/Список

коммутатор маршрутизации

Комментарии к песням

Таблица лидеров

игрок

Переключение песен (случайное, последовательное, одиночный цикл)

поиск песни

  • Добавлено: событие клавиатуры↓ и функция защиты от сотрясений.
    • ctrl+kПоле поиска получает фокус и активирует раскрывающийся список поиска
    • escОтменить фокус и раскрывающийся список
    • enterВведите данные для поиска песни

Список сведений о поиске песен

  • Нажмите в поле поиска回车Вот и все, ищите в спискебазовыйРеализация функции

4. Исходный код проекта и интерфейс API

5. Спецификации проекта

  • Спецификации проекта: В проекте есть некоторые спецификации разработки и стили кода (вы также можете следовать своим привычкам)

    1. Имена папок и файлов пишутся строчными буквами, а нескольким словам предшествует соединитель (-)соединять;

    2. JavaScriptИмена переменных используют маленький верблюжий регистр, константы используют заглавные буквы, а компоненты используют большой верблюжий регистр;

    3. CSS использует общиеCSSа такжеstyled-componentв сочетании, чтобы написать

      • общее использованиеCSS, местное использованиеstyled-component

    4. Весь проект больше не используетсяclassКомпоненты, унифицированное использование функциональных компонентов и полный охватHooks;

    5. Все функциональные компоненты, во избежание лишнего рендеринга, используют всеmemoобернуть;

    6. Состояние внутри компонента, используяuseState,useReducer; Все бизнес-данные размещаются вreduxуправление;

    7. Код внутри функционального компонента в основном написан в следующем порядке:

      • Внутри компонентаstateуправлять;
      • reduxизhooksкод;
      • другие компонентыhooksкод;
      • другой логический код;
      • вернуть код JSX;

    8. reduxСпецификация кода выглядит следующим образом:

      • Каждый модуль имеет свой независимыйreducer,пройти черезcombineReducerобъединить;
      • Использование кода асинхронного запросаredux-thunk, и написано вactionCreatorsсередина;
      • reduxнепосредственно принятыйredux hooksспособ записи, больше не используетсяconnect;

  • Другие спецификации определяются и записываются в проекте в соответствии с реальной ситуацией;

6. Разметка React devtools скрыта (просто понять)

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



Инициализация проекта

Предисловие — плагин vscode и chrome (необязательно)

  • Если вы уже установили его, вы можете пропустить его.Следующее является необязательным.Конечно, можно не устанавливать его.

  • Для более удобной разработки проектов рекомендуется установить следующиеvscodeплагин

    • ESLint: инструмент проверки стиля кода, помогающий нам стандартизировать написание кода.

    • vscode-styled-components: пишуstyled-componentsПодсветка синтаксиса и стилизация компонентов в

    • path-alias: Псевдоним имеет соответствующий intellisense

    • ES7 React/Redux/GraphQL/React-Native snippets: сегмент кода

  • chromeплагин

    • Redux DevTools: легко отлаживатьreduxданные
    • FeHelper: вернулся на серверjsonданные украшают

1. Отдел каталогов проектов

  • использоватьcreate-react-appСтруктура проекта инициализации строительных лесов:create-react-app music163_xxx
  • Структуру каталогов также можно разделить в соответствии со структурой, к которой вы привыкли.
│─src
  ├─assets 存放公共资源css和图片
    ├─css  全局css
    ├─img  
  ├─common  公共的一些常量
  ├─components 公共组件
  ├─pages   路由映射组件
  ├─router  前端路由配置
  ├─service 网络配置和请求
  └─store   全局的store配置
  └─utils   工具函数
  └─hooks   自定义hook

2. Описание проекта

  • Эта глава является лишь предварительным введением в проект и четкой целью.
  • После этого в продолжении будут опубликованы статьи о реальных боевых действиях проекта (более подробно, каждая глава имеет четкую цель для достиженияgifкартина)
  • Непросто делать проект актуальный боевой+документы разработки.Работаю в школе месяца 2 до и после.Если пригодится друзьям,надеюсь поставить звезду⭐

благодарный

  • большое спасибоВан ХунъюаньучительскийБитва за основную технологию Reactпозволь мне многому научитьсяReactзнание.
  • Большое спасибо бэкенд-провайдеруBinaryify, интерфейс очень стабильный, и документация идеальна
Категории