Дорога к современному JavaScript и отреагировать
Цель этого руководства состоит в том, чтобы предоставить список из нескольких бесплатных ресурсов (статьи, книги, видео?), Которые помогут вам изучить современный JavaScript и библиотеку React.
️ Это руководство не предназначено для перечисления всего, что вы должны знать о JavaScript или React. Я попытался перечислить то, что может быть полезно, если бы вы были совершенно новичны в этом мире, основываясь на моем опыте и людях, которых я встречал. Если ваша любимая вещь не указана там, это не значит, что мне это не нравится или не одобряю это. Например, TypeScript или GraphQL великолепны, но я не думаю, что обязательно изучить это первым как новичок .
1) Современный JavaScript?
Учебные пособия, которые охватывают все:
- Узнайте веб -разработку также научит вас HTML и CSS.
- Красноречивая Javascript идеально подходит для изучения JS и общих концепций программирования.
- Современный учебник JavaScript, как это делается сейчас. От оснований до расширенных тем с простыми, но подробными объяснениями.
- Узнайте ES6 (Ecmascript 2015)? Если вы писали JavaScript некоторое время назад и хотите догнать современные синтаксисы.
Статьи и видео, которые мне нравились:
- Современный JavaScript, объясненный для динозавров, вы узнаете основы о NPM, Babel, Webpack и т. Д. И истории.
- Понимание подъема в JavaScript Если вы пришли с другого языка программирования, вы можете чувствовать себя некомфортно с тем, как мы можем объявить переменные в JS. Эта статья поможет вам почувствовать себя лучше!
- Отладка JavaScript? Firefox или Edge также имеют свои собственные Devtools, но я лично предпочитаю использовать хром при кодировании.
- Функциональное программирование в JavaScript? Эти видео сделаны бывшим разработчиком Spotify JS. Он научит вас важным понятиям, таким как обещания, закрытие или функции более высокого порядка. Эти вещи являются основными в React.
- Композиция над наследством? В школе мне пришлось сделать много объектно -ориентированного программирования. Это видео помогло мне понять, почему это не всегда необходимо.
Документация
Иногда вам нужно будет искать документацию, например, если вы не знаете конкретное ключевое слово в кодовой базе или вы хотели бы узнать, как использовать собственную функцию. Конечно, вы можете использовать любую поисковую систему или Stackoverflow, но я бы порекомендовал использовать веб -документы MDN.
2) Реактируйте ⚛
- Что такое React: визуальное введение для начинающих
- JavaScript, чтобы знать для React
- Официальный документ - лучшее место для изучения React.
- Руководство для начинающих отреагировать?
- Прогрессивные советы реагируют, чтобы сделать ваш сайт React Performant. Web.Dev также имеет много таких статей.
- Обучение моделей обучения для создания мощных веб -приложений с ванильным JavaScript и реагируют.
Крючки? Классовые компоненты
Крюки очень специфичны для реагирования, я предлагаю вам проверить, зачем реагировать крючки? ? Чтобы узнать больше об истории реагирования и о том, почему мы теперь используем крючки. Вы также можете узнать о компонентах классов и некоторых шаблонах, используемых для обмена логикой между компонентами (до прибытия крючков), потому что во многих кодовых базах все еще присутствуют:
- Сравните диаграмму потока крюка с диаграммой методов жизненного цикла класса компонентов
- Компоненты более высокого порядка: шаблон проектирования применения React
- Рендеринг реквизита
Государственное управление и другие библиотеки
В какой -то момент вы можете подумать, что было бы неплохо иметь доступ к какому -либо глобальному состоянию в любом компоненте React, чтобы не отдавать реквизиты снова и снова ... Люди могут сказать вам, что вы можете использовать Redux, Mobx или Apollo или Xstate или [вставьте имя популярного библиотеки], чтобы достичь этого, но это может быть переполнено! Я бы порекомендовал прочитать статью React React State Management Libraries и как выбрать хороший обзор. Библиотеки React за 2023 год также занялись этой темой и многими другими!
3) Что дальше!? ?
- Оставайтесь в курсе и открыть для себя новые вещи с помощью информационного бюллетеня React и байтов;
- Практика реагирует с созданием реакции-приложения или непосредственно в вашем браузере в CodeSandbox
- Построить готовые приложения с: vite, next.js, gatsby, React Native через Expo;
А как насчет стиля? ?
Некоторые основы
- Изучите CSS курс Evergreen CSS и ссылайтесь на повышение опыта вашего веб -стиля.
- Современные CSS объяснен для динозавров
- CSS-In-JS или CSS-AND-JS
- Официальный стиль и CSS React Doc Doc
Библиотеки Somne вы можете использовать для управления своим стилем:
- Попутный ветер
- CSS -модули
- ваниль-экстракт
- Эмоция
- Стилизованные компоненты, я думаю, что они являются лучшими между выбором для тех, кто привык писать «классические» CSS и хочет воспользоваться преимуществом, смешивая его с JavaScript.
Системы проектирования
Может быть, вы просто хотите построить приложение и не тратить много времени на написание CSS и HTML. Я предлагаю вам использовать такие библиотеки, как материал-UI, дизайн муравья или Polaris. Если вы хотите создать свою собственную систему дизайна, я бы посоветовал прочитать атомный дизайн.
Как насчет тестирования? ?
- Но на самом деле, что такое тест на JavaScript?
- Как использовать учебник библиотеки React Testing Понимание шутки и научиться писать автоматические тесты через библиотеку тестирования React (есть другие тестирующие библиотеки, но RTL - отличный, рекомендованный официальным документом).
- Понимание издевательства над шутками - это метод изоляции испытуемых путем замены зависимостей на объекты, которые вы можете контролировать и проверять.
- Почему кипарис? ? библиотека для написания сквозных тестов и многое другое;
Другие инструменты, которые я по умолчанию
- Редактор кода: VS Code;
- Автокодический форматер: красиво;
- Линтер: Eslint;
- Управление GIT через пользовательский интерфейс вместо команд: Sourcetree или VS -код;
- Создайте и разверните приложение: NetLify;
- Непрерывная интеграция: Трэвис CI;
- Купить доменное имя: домены Google;
Другие библиотеки, которые я не по умолчанию
- Маршрутизация: React-Router;
- Интернационализация: Linguijs;
- Разработайте свои компоненты в изоляции и поделитесь ими в своей команде через сборник рассказов. Разверните свой сборник рассказов и запустите тесты на скриншот на каждой истории через Chromatic;
- API издевался при тестировании: Mock Service Worker;
Оплачиваемые курсы?
Те, которые я рекомендую после их завершения:
- Уэс Бос курсы? JavaScript, React, CSS и многое другое; Некоторые даже бесплатны !
- Кент С. Доддс курсы? Реагировать, тестирование;
