Skip to content

0x6368656174/react-winamp

Repository files navigation

This is a demo project for react.js. It implements the basic interface of the classic WINAMP. The project uses only react.js and redux without any third-party dependencies. All components are written as a function. Work with the Audio Web API is implemented (Player.tsx), custom animation (SongName.tsx) and working with canvas (GraphicVisualize.tsx).

The project has GitHub Actions configured, which automatically expands it into GitHub Pages: React WINAMP.

This project was bootstrapped with Create React App.

Available Scripts

In the project directory, you can run:

yarn start

Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits.
You will also see any lint errors in the console.

yarn test

Launches the test runner in the interactive watch mode.

yarn build

Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.


Это демо проект на react.js. В нем реализован базовый интерфейс классического WINAMP. В проекте использован только react.js и redux без каких либо сторонних зависимостей. Все компоненты написаны в виде функции. Реализована работа с Audio Web API (Player.tsx), кастомная анимация (SongName.tsx) и работа с canvas (GraphicVisualize.tsx).

В проекте настроен GitHub Actions, который автоматически разворачивает его в GitHub Pages: React WINAMP.

Этот проект развернут при помощи Create React App.

Доступные Скрипты

В директории с проектом вы можете запустить:

yarn start

Запустит приложение в режиме разработки.
Откройте http://localhost:3000 для просмотра его в браузере.

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

yarn test

Запустит выполнение тестов в инетактивном режиме наблюдения.

yarn build

Соберет приложение в режиме продакшена в папке build.
Это корректно сделает бандл React'а в режиме продакшена и оптимизирует сборку для лучшей производительности.