Полная дорожная карта React

Изучение React поначалу может показаться сложным и непонятным! В статье продемонстрирована полная дорожная карта для изучения React, чтобы у вас был четкий путь для продвижения вперед .

Предпосылки

Есть некоторые предварительные условия для изучения React , без которых вам будет трудно . Поэтому настоятельно рекомендуется сначала освоить следующие навыки, прежде чем погрузиться в изучение React.

1. HTML . Вам необходимо хорошо знать основные теги и атрибуты , которые они принимают. Не нужно быть мастером HTML , достаточно только базы знаний.
2. CSS — если вы не хотите создавать такие скучные веб-сайты, вам придетсяопределенно следует потратить некоторое время на изучение основ (а именно selectors, box-model, flexbox, grid layout, и responsive design) CSS .
3. JavaScript. Поскольку React работает поверх JavaScript , вам нужна прочная основа , чтобы упростить процесс изучения React . В качестве barebone-комплекта вам понадобятся variables, conditional statements, loops, DOM manipulationи event triggering. Изучение функций ES6+ , таких как spread& rest operators, также arrow functionsможет пригодиться.

Основы

1. Настройка проекта React : прежде чем вы сможете начать изучать React , совершенно очевидно, что вам нужно настроить проект React , что является очень утомительной задачей. К счастью, у нас есть такие замечательные инструменты, какcreate-react-app
2. Познакомьтесь с JSX : обычно код React написан на JSX ( JavaScript XML ). Вы можете не использовать его, используя только React.createElementзвонки, но в этом нет смысла, потому что вы должны развиваться. Вам необходимо знать о различиях между JSX и HTML , так как каждый element должен содержать закрывающий тег , события в Camel Case ( onClickв отличие от onclick) и возможность напрямую использовать JS внутри кода.
3. Типы компонентов. Хотя в последнее время наблюдается стремление использовать функциональные компоненты для всех целей, поскольку они более интуитивно понятны и их легче программировать , вы должны иметь базовое представление и о компонентах классов, чтобы при работе над унаследованной кодовой базой не получить в итоге вот такую картину.
4. Props vs State : Propsпозволяет нам передавать данные от одного компонента к другому , но при неправильном использовании это может привести к prop chainingкрайне нежелательной практике в проектах React , которую мы исправим позже в дорожной карте .Stateпозволяет хранить данные между повторными рендерами компонента . Обновление state повторно отображает компонент и каждый дочерний элемент, принимающий stateданные в качестве опоры.
5. Списки и ключи : Часто при работе с большим количеством динамических данныхlists вам необходимо визуализировать данные . Убедитесь, что вы добавили key, чтобы позволить React отслеживать элементы и оптимально перерисовывать их , вместо того, чтобы перерисовывать их каждый раз, когда что-то меняется .
6. Жизненный цикл компонента : Компоненты класса имеют методы жизненного циклаcomponentDidMount() , такие как и componentWillUnmount(), которые также можно эмулировать с помощью useEffect хука в функциональных компонентах . Эти методы жизненного цикла запускаются в определенное время , что делает их полезными для определенных задач , таких как вызов APIcomponentDidMount() или очистка таймера во время выполнения.componentWillUnmount()

Средний

Теперь давайте углубимся в темы Intermediate React .

1. Стиль : до сих пор ваше приложение выглядело довольно просто . Давайте исправим это прямо сейчас. Существуют сотни вариантов оформления приложения , но если вы не используете какую-либо библиотеку, такую ​​как Material UI , Chakra UI , Semantic UI , настоятельно рекомендует использовать модули CSS или SCSS , которые дают вам полную мощь CSS с добавлением сохранения стиль ограничен только одним файлом .Больше не нужно беспокоиться о том, чтобы использовать одно и то же имя класса дважды и случайно переопределить его.
2. Хуки : Хуки были недавно добавлены в React 16.8 и полностью изменили экосистему React . Хуки представили функции из компонентов класса в функциональные компоненты , что сделало возможным использование , и states lifecycle methodsв функциональных компонентах .contextrefЧасто люди избегают изучения сложных понятий, таких как memoи ref, но это плохая идея, поскольку, если вы создаете что -то важное для реального мира , ваше приложение определенно будет сильно полагаться на них. Кроме того, использование contextпозволяет избежать prop chainingпроблемы, обсуждавшейся ранее.React также позволяет вам создавать собственные хуки для удовлетворения ваших личных потребностей, на которые вам также следует обратить внимание.
3. Порталы : иногда вы сталкиваетесь с крайними случаями, когда стилизация таких элементов , как модальные , для рендеринга поверх элементов, расположенных дальше по дереву DOM , становится кошмаром. В таких случаях вам помогут порталы , они позволяют отображать элементы за пределами корневого элемента React по умолчанию, что значительно упрощает не только стилизацию, но даже группировку элементов вместе .
4. Ленивая загрузка . Ленивая загрузка — это шаблон проектирования, обычно используемый в веб-дизайне и разработке для отсрочки инициализации объекта до того момента, когда он потребуется . Это может способствовать повышению эффективности работы программы при правильном и уместном использовании .К счастью, реализация отложенной загрузки в React — это прогулка по парку. Все, что вам нужно, это Suspense компонент и знакомство с import()функцией.

Передовой

Проверьте свои знания с помощью этих продвинутых навыков

1. Webpack и Babel : ни один из написанных вами JSX не может быть понят браузером, поэтому он должен быть transpiledв обычном JS , чтобы браузер мог его выполнить. Процесс транспиляции обрабатывается Babel , а объединение всего в один файл выполняется Webpack.Чтобы по-настоящему понять, как все устроено, вам нужно создать приложение React с нуля . Прочтите эту статью , чтобы узнать, как это сделать.
2. Тестирование : Тестирование — это то, чем очень немногие люди действительно любят заниматься, так как оно подпадает под категорию «черной работы», когда вещи, которые вы не вносите, не вносят никаких видимых изменений . Но для больших приложений это имеет решающее значение , так как небольшое изменение может привести к поломке всего приложения.
3. TypeScript : Это просто один из основных навыков, которыми вы должны обладать . TypeScript — это надмножество JavaScript , которое добавляет важную, но необязательную строгую систему типов и является предпочтительным языком для любого крупномасштабного приложения React.

Экосистема

Давайте погрузимся в инструменты React. 

1. Маршрутизация : поскольку React — это библиотека, а не фреймворк , он не поставляется с собственной маршрутизацией, но React Router — это библиотека, на которую стоит обратить внимание. Если вы используете SSG ( генерация статического сайта ) или SSR ( рендеринг на стороне сервера ), такие как Gatsby или Next.js , то у вас уже будет встроенная маршрутизация без каких-либо дополнительных библиотек.
2. Управление состоянием : Инструменты управления состоянием, такие как Context API, являются хорошей функцией React , но не работают в случае крупномасштабных приложений . В таких случаях лучше использовать библиотеку, такую ​​как Redux , или бесчисленное множество доступных библиотек.npm
3. Кроссплатформенность : если вы хотите использовать ту же логику, что и ваше веб-приложение, в мобильном и настольном приложениях , React Native и Electron (или предпочтительно Tauri ) будут отличными инструментами для изучения.
4. Стиль : если вы не хотите писать собственный стиль для своего приложения, стоит обратить внимание на Material UI , Chakra UI или Semantic UI . Это может значительно сократить требуемые усилия, поскольку они поставляются с готовыми компонентами.  

Надеемся, это поможет вам спланировать свой путь, чтобы стать новаторским разработчиком React .

Источник статьи: http://dev.to/