Прочитав новую документацию по ReactJS, я нашел несколько хороших примеров кода, которые с некоторой доработкой можно использовать сразу. Поэтому я решил рассказать о некоторых из них.
Предоставленные ссылки приведут к разделу документов с окончательным примером кода (с ним есть песочница + вы можете нажать на ссылку форка в правом верхнем углу, чтобы просмотреть полный код в CodeSandbox). В описании я также добавлю ссылку на свой собственный проект, чтобы показать, как я сам его использовал. Его репо можно найти здесь (о нем я также писал в одной из предыдущих историй).
1.Фильтруемая таблица (код sandbox в конце страницы)
Это один из первых примеров в документации, демонстрирующих общую функциональность React (раздел Thinking in React). С его помощью можно сделать простую таблицу с полем поиска, разделами и базовой сортировкой. Необработанный пример можно увидеть в документах, и после некоторых корректировок я превратил его в эту таблицу для своего небольшого приложения.
2. Галерея (первый вызов в конце страницы)
Вы можете просто проверить решение задачи там, если не хотите ее выполнять. С помощью этого кода вы можете создать простую галерею с кнопками Далее/Предыдущий, счетчиком и кнопкой/разделом Показать подробности. Я внес некоторые изменения, чтобы использовать его для страницы Исследования в моей версии.
3. ToDo list (третий или четвертый вызов в конце страницы)
Опять же, если вы не хотите выполнять задание, просто проверьте его решение. Последние две задачи показывают один и тот же результат, но используют разные подходы к его реализации. Это базовое приложение ToDo с функциями добавления задач в список, их удаления и редактирования. В моей версии я добавил некоторые стили, счетчик задач и проверки, чтобы разрешать добавлять/редактировать их только тогда, когда что-то написано в форме (иначе выводится сообщение). Также есть выпадающее меню для выбора версии приложения (первое сделано только с State, второе — с Reducer, а третье сочетает в себе Reducer и Context; ссылки на соответствующие документы можно найти в каждом разделе мой вариант).
4. Викторина
Это простой компонент викторины, позволяющий отправить ответ и получить результат в зависимости от того, правильный он или нет. В моей версии (кнопка Викторина под изображением на главной странице) я добавил немного стиля и изображение, которое показывается, если вы отвечаете правильно.
5. Редактор форм (второй вызов в конце страницы, четвертый вызов — версия без использования React)
Это форма с возможностью ее редактирования. Я немного модифицировал его, чтобы в моей версии текст располагался поверх изображения из галереи (раздел Разное внизу страницы — первая кнопка). Текст можно отредактировать или убрать с изображения.
Как видно из этих примеров, я читал документацию и внедрял часть кода в свой личный проект, корректируя различные его части. Я не упомянул все вещи, которые я использовал (возможно, я расскажу об этом в другой истории), так как их больше.
Я хотел показать, что вы можете напрямую взять некоторые фрагменты кода из документации и использовать их в своих собственных приложениях/сайтах. Это также помогает изучать React, поскольку вы в основном практикуетесь на ходу, а не просто читаете текст. Пока я предпочитаю этот подход, поскольку он заставляет вас не только следовать руководству, но и пытаться реализовать или изменить предоставленные примеры кода.
Вот и все, что касается моей пятничной истории. Если тебе это пригодилось, благодарю тебя, добрый человек.
