Резюме
В этом посте я представляю 11 React Projects, которые я недавно создал, с целью помочь тем, кто реагирует, встать и работать. Это не учебник. Вместо этого это ссылка на проект, с помощью которого можно учиться по примеру.
Проекты можно найти в списке:
- Стартер
- Clicker – живая демонстрация здесь
- Основные часы – живая демонстрация здесь
- Основной таймер – живая демонстрация здесь
- Продвинутый таймер – живая демонстрация здесь
- Карты фильма – живая демонстрация здесь
- Местернминд – живая демонстрация здесь
- Стандартный калькулятор – живая демонстрация здесь
- Биткойн -монитор – живая демонстрация здесь
- Стандартный монитор погоды – живая демонстрация здесь
- Примечание реагирует
11 -й проект представляет собой более продвинутый проект React и, следовательно, отличается от простоты других 10, представленных в этом посте. Это часть другого Серия На что я работаю.
Обновлять
- [3 января 2018] – На основании обратной связи, ссылки, добавленные в живые демонстрации проектов.
Проекты
Я создал 11 React Projects с различной степенью сложности. Каждый проект, хотя и другой, всегда будет иллюстрировать следующие общие черты:
- Типичная структура макета проекта React
- Настройка и конфигурация вавикала
- Настройка и конфигурация WebPack
- Настройка и конфигурация Eslint
- Настройка и конфигурация SCSS
Каждый проект имеет подробный документ Readme, который предоставляет больше информации о проекте и о том, как встать и запустить.
Суммированный список проектов указан следующим образом:
1. Стартер
Основной шаблон, который состоит из основных элементов, которые необходимы для начала создания применения React. Этот проект может использоваться в качестве базового стартера для создания новых проектов React.
Найдите больше информации Здесь Анкет
2. Кликер
Основное приложение React, которое позволяет увеличить, уменьшать или сбросить счетчик.
Найдите больше информации Здесь Анкет Найти живую демонстрацию Здесь Анкет
3. Основные часы
Основные цифровые часы, которые отображают текущую дату и время, а также переключатель переключателя на дату переключения.
Найдите больше информации Здесь Анкет
Найти живую демонстрацию Здесь Анкет
4. Основной таймер
Основной таймер, который запустит обратный отсчет, основанный на вводе времени за секунды. Таймер обеспечивает функциональность запуска, остановки и сброса. Когда таймер достигает значения, цвет таймера меняется на красный.
Найдите больше информации Здесь Анкет Найти живую демонстрацию Здесь Анкет
5. Продвинутый таймер
Таймер обратного отсчета, который предлагает продвинутый опыт пользовательского интерфейса. Таймер использует клавиатуру, чтобы войти в часы, минуты и секунды в дисплей. Таймер обратного отсчета изменяется на полноэкранную силу, когда таймер запускается. Панель управления позволяет запускать, останавливаться, возобновить и сбросить таймер.
Найдите больше информации Здесь Анкет
Найти живую демонстрацию Здесь Анкет
6. Карты фильмов
Основное приложение, которое отображает список фильмов в виде списка карт. Каждая карта предоставляет детали фильма, такие как заголовок, подзаголовок, описание, изображение и рейтинг.
Найдите больше информации Здесь Анкет
Найти живую демонстрацию Здесь Анкет
7. Вдохновитель
Основная игра угадания числа, основанной на различных степени сложности. Цель игры состоит в том, чтобы угадать число, которое случайно генерируется игровым двигателем. При каждом предположении игра будет указывать (используя сообщение и цвет), насколько близко (или далеко) ваше предположение от фактического сгенерированного числа. После угадания правильного номера представлена возможность снова играть.
Игра обеспечивает 3 настройки уровня сложности, а именно: простой, средний и трудный. Исходя из настройки сложности, игровой двигатель будет генерировать случайное число, которое попадает в диапазон чисел. Например:
- Легко – 0 -> 10
- Средний – 0 -> 100
- Трудно – 0 -> 1000
Найдите больше информации Здесь Анкет
Найти живую демонстрацию Здесь Анкет
8. Стандартный калькулятор
Калькулятор, который обеспечивает основные арифметические операции, строитель выражения и полную историю всех выражений. Это позволяет переключаться между клавиатурой и историей в качестве входного механизма.
Найдите больше информации Здесь Анкет
Найти живую демонстрацию Здесь Анкет
9. Биткойн -монитор
Приложение, которое отслеживает изменения в индексе цен на биткойн (BPI).
По умолчанию BPI будет показан для USD, GBP и EUR. При желании можно выбрать собственную валюту для отображения в дополнение к 3 вышеупомянутой валюте.
Биткойн -монитор использует Coindesk Bitcoin Price Index API Анкет
Найдите больше информации Здесь Анкет
Найти живую демонстрацию Здесь Анкет
10. Стандартный монитор погоды
Заявление о погоде, которое отображает текущую погоду, ежедневные прогнозы и почасовые прогнозы на основе вашей текущей геолокации. Приложение интегрируется как с OpenWeather API и Google Geolocation API Анкет
Найдите больше информации Здесь Анкет
Найти живую демонстрацию Здесь Анкет
11. Примечание реагирует
Этот проект не такой базовый, как ранее упомянутые проекты. На самом деле, это проект, который является частью другой серии, над которой я работаю и буду выпускать в будущем. Тем не менее, я подумал, что было бы полезно упомянуть об этом как часть этого поста для тех, кто ищет чего -то более продвинутого. Если этот проект вас интересует, то вы можете найти список проектов в серии на моем GitHub Page Анкет
Примечание React является основным применением примечания, в котором используется React Frontend для захвата и управления заметками, API, написанным в ExpressJS, и MongoDB для хранения заметок.
Найдите больше информации Здесь Анкет
Вывод
Это не конец. Я буду постоянно добавлять новые проекты. Я буду добавлять более простые проекты React, но я также буду добавлять более продвинутые проекты React. В конце концов, моя цель – предоставить как можно больше проектов, чтобы помочь вам ползти, затем ходить, а затем бежать. Я оставлю летающий шаг умным людям, чем я;). 10 проектов, которые я создал до сих пор, должны помочь вам ползти и, возможно, ходить.
Оригинал: “https://dev.to/drminnaar/11-react-examples-2e6d”