Strong-stuff.ru

Образование Онлайн
0 просмотров
Рейтинг статьи
1 звезда2 звезды3 звезды4 звезды5 звезд
Загрузка...

Курс react advanced

Курс по React

Этот онлайн-курс посвящён профессиональной разработке веб-приложений с помощью React.

Набор на этот курс открывается каждые 3 недели.

Вы можете запросить уведомление.

О курсе

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

Постепенно мы разберем особенности построения SPA с использованием React, будем использовать сторонние компоненты и библиотеки для создания бизнес-логики. Вы в деталях узнаете классическую для React-приложений архитектуру: Unidirectional dataflow, и научитесь строить ее с использованием современной и наиболее популярной реализацией – Redux.js.

Курс состоит из 4-х блоков:

Детали программы смотрите далее.

Как организовано обучение?

Курс идёт около 1 месяца.

До начала обучения: вводные материалы

Перед курсом мы попросим вас посмотреть видео-лекции по основам React. Они довольно простые, чтобы на первом занятии вы уже что-то знали.

Мы также будем использовать систему Git/GitHub для обмена исходным кодом, так делает большинство проектов. Для тех, кому это в новинку — дадим крэш-курс и поможем разобраться.

Онлайн-занятия с преподавателем 2 раза в неделю

Запись занятия доступна через 15 минут после окончания. Вы также сохраняете доступ к записям после окончания курса.

Домашние задания, обратная связь по ним

Ваши решения присылаете преподавателю, он проверяет качество кода, использование правильных шаблонов проектирования, даёт обратную связь. К ряду заданий прилагаются тесты, которые частично позволяют проверить правильность решения самому.

Между занятиями доступен групповой чат для общения и вопросов преподавателю.

Курсовой проект

На этом курсе мы делаем курсовой проект. Большую часть кода для проекта вы напишете сами.

Результат

Вы знаете, понимаете и умеете использовать основные идеи React.

Компонентный подход и архитектура одностороннего потока данных(Redux) – ваше второе «Я».

Вы умеете строить как многоразовые компоненты так и SPA с помощью React.

Вы знаете в каком направлении развиваться и на какие элементы инфраструктуры React стоит обратить внимание.

Программа курса

Блок 1

Знакомство с React и его экосистемой.

В этом блоке мы начнем с того, на чем остановились в скринкасте по Реакт. Научимся писать простые компоненты и узнаем, в чем принципиальное отличие React.js от других популярных фреймворков. Создадим первые компоненты, используя декларативный подход, познакомимся с экосистемой, научимся использовать сторонние компоненты и работать с формами.

  • Разбираем как работает create-react-app.
  • Глубже знакомимся с Реактом, Virtual DOM, JSX.
  • Разбираем React Hooks, их отличия от стейта и lifecycle методов.
  • Разберем примеры тестирования компонент с помощью Jest и Enzyme.
  • Подключаем стили с css modules.
  • Учимся переиспользовать код с помощью наследования, декораторов и кастомных хуков.
  • Связь с DOM: keys & refs.
  • Подключаем сторонние компоненты.

Блок 2

Построение приложений с React: Redux.js

Когда приложения становятся сложнее и в них появляется интерактивность, приходиться задумываться про организацию бизнес-логики, настраивать потоки данных и взаимодействие с сервером. В процессе построения простого новостного приложения мы детально разберем самую популярную библиотеку для одностороннего потока данных, узнаем ее особенности и научимся использовать дев-тулзы.

  • Особенности Redux.js: функциональный подход, Redux dev tools.
  • Store как иммутабельный объект: Redux + Immutable.js.
  • Настраиваем синхронный поток с Redux, переиспользуем созданные ранее компоненты.
  • React-redux для связи компонентов с логикой.
  • Мемоизированные селекторы reselect.
  • Side-effects в Redux: создание и использование Middlewares.
  • Получение данных от сервера.
  • Асинхронные экшены с redux-thunk

Блок 3

React для SPA: react-router и продвинутые API Реакта

Разработка single-page applications – одно из основных направлений фронтэнда. Мы разберем, как строить их, используя React. Научимся использовать react-router и продвинутые элементы API React.JS.

  • Зачем нужен роутинг и как он устроен, проектируем структуру приложения.
  • Разбираем react-router v5.
  • Настраиваем вложенные роуты.
  • Выбираем и настаиваем history для нашего приложения.
  • Объединяем react-router и Redux.
  • Учимся обрабатывать серверные ошибки и декларативно управлять роутером.
  • Используем context – еще один механизм передачи данных.
  • Обзор Advanced API react-router.
  • Используем props.children для композиции компонентов.
  • Анимации в React, CSSTransitionGroup.

Блок 4

Куда развиваться дальше

На этот момент вы уже знаете все, что необходимо, для разработки React приложений. Но на этом рано останавливаться, вокруг Реакта выросла огромная экосистема. Мы обзорно пройдемся по основным возможностям для развития, разным платформам, библиотекам и вспомогательным инструментам. + Будет возможность разобрать интересующие именно вас вопросы.

  • Работа с формами: redux-form, final-form, formik.
  • Что ждать от React 17.
  • React Native и React VR.
  • GraphQL + Relay/Apollo.
  • MobX vs Redux.
  • Разные подходы к сайд-эффектам: redux-thunk, redux-loop, redux-saga, redux-observable.

Предварительные требования

  • Знание JavaScript, включая ООП, классы.
  • Интернет 256kb/s или быстрее для видео.

Преподаватели

Программирование люблю и практикую с детства, даже затрудняюсь сказать, какой именно в нём опыт) C React работаю практически с момента открытия фреймворка для публики.

С 2017 года руковожу Front-end гильдией в Киевском R&D центре Wix. Наш основной стек – это React, и у нас он используется в нескольких десятках проектов, с очень разной инфраструктурой. Мы создаем на его основе от библиотек базовых компонент, до сложных приложений с серверным рендерингом и ленивой загрузкой.

Знаю с десяток языков, но в последнее время активно пишу только на JavaScript.

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

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

С 2007 работаю веб-разработчиком. C 2014 пишу проекты разного масштаба используя React и его экосистему.

Один из первых разработчиков Zoomdata – системы визуализации больших данных в реальном времени, которой пользуются крупнейшие бизнесы в США.

Сейчас работаю в Wix.com, разрабатываю новую версию конструктора сайтов, которым пользуются сотни миллионов пользователей.

Так же принимал участие в проектировании open source библиотеки stylable.io для инкапсуляции стилей в React-компоненты.

Программирование люблю с детства. Свой первый сайт создал в далеком 2002 году. С 2007 плотно работал с базами данных. С 2014 профессионально занялся web-разработкой.

Читать еще:  Курсы для садоводов и огородников

C React работаю начиная с версии v0.13 – с 2015 года. Занимаюсь различного рода менторством с 2017 года. Часто провожу небольшие доклады внутри компаний на тему React-Redux стека. Участвую в open-source проектах.

С 2018 года работаю в R&D центре компании Wix. 90% проектов, с которым здесь работаю – построены на базе React-Redux стека. Часть из них на TypeScript. Провожу лекции по Redux для новичков Wix. Участвую как в небольших проектах (с 2-3 разработчиками), так и в проектах на 50-70 разработчиков и знаю что такое «масштабирование» не понаслышке.

Что говорят о курсе участники

Мы занимаемся обучением с 2007 года. За это время у нас обучились тысячи разработчиков из разных стран и компаний.

Все отзывы являются честными. Мы не модерируем их.

React: практики, которые помогут стать продвинутым разработчиком

React: практики, которые помогут стать продвинутым разработчиком

  • Переводы , 25 января 2019 в 12:11
  • Никита Прияцелюк

React.js — один из лучших и наиболее популярных способов создать одностраничное приложение. Это гибкий и удобный фреймворк, с помощью которого можно либо добавить компонент на существующий сайт, либо создать новый сайт с нуля.

Сейчас React.js используется во многих других фреймворках и инструментах вроде Next.js, GatsbyJs, Razzle, After.js и т. д. Поэтому если вы хорошо разберётесь в React.js, то пользоваться всеми этими фреймворками станет легче.

Используйте фрагменты вместо div

Зачастую у нас на руках множество компонентов, которые приходится оборачивать в div , т.к. render() позволяет вернуть только один компонент. Таким образом мы добавляем в документ лишний HTML-элемент.

Согласно официальному руководству:

Порой мы нарушаем семантику HTML, когда добавляем элементы

Больше информации можно найти в документации по фрагментам.

Пользуйтесь контекстом чаще

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

21 апреля в 16:00 в 16:00, онлайн, беcплатно

Пример установки темы из документации:

Используйте хотя бы одни границы ошибок

В React 16 появилась такая замечательная вещь, как границы ошибок. По названию понятно, что это компоненты, которые отлавливают ошибки во всех дочерних компонентах. Идея очень проста: создайте компонент и используйте его в качестве родителя каждый раз, когда вам понадобится обрабатывать ошибки. Если в каком-то из дочерних компонентов возникнет ошибка, границы ошибок будут вызваны для обработки. Имейте в виду, что границы ошибок отлавливают ошибки отображения. Императивные ошибки вроде тех, что возникают в обработчиках событий, должны отлавливаться try / catch -блоком JavaScript.

Для логирования информации об ошибке нужно использовать componentDidCatch() :

Теперь его можно использовать как обычный компонент:

Если в самом компоненте ErrorBoundary возникнет ошибка, он её не сможет обработать.

Такая функция была доступна в React 15 под названием unstable_handleError() . Этот метод больше не работает, и с бета-релиза 16 версии вам нужно использовать componentDidCatch() вместо него.

Разработчики React предоставили инструмент для автоматического изменения кода.

Используйте продакшн-сборку в реальной среде

На официальном сайте перечислены конфигурации, которые могут улучшить производительность. Не забудьте ознакомиться с ними перед развёртыванием в проде.

Здесь можно почитать руководство.

На конфигурацию уйдёт всего 10 минут, а взамен ваше приложение получит большой прирост к производительности.

Используйте ссылки ref для взаимодействия с дочерним элементом

Мы можем использовать ref’ы для активации анимации, выбора текста или управления фокусом. Например, чтобы установить фокус в React, мы можем ссылаться на элементы DOM. С помощью ref’ов мы сначала создаём ссылку на элемент в JSX класса компонента:

При необходимости мы можем установить фокус где угодно в компоненте:

Используйте разделение кода

Если вы используете CRA (create react app) или Next.js, то у вас уже должен быть готовый конфигурационный файл webpack. Он создаст один файл (бандл), который будет содержать всё ваше приложение. Если вы используете сторонние библиотеки и/или приложение увеличивается в размерах, то и бандл будет становиться больше. Когда пользователь зайдёт на сайт, браузер скачает весь бандл и затем всё отобразит. Это может сильно замедлить сайт, поэтому гораздо лучше разделить код и таким образом разбить бандл на части. В результате браузер будет закачивать нужные части по мере необходимости, что приведёт к улучшению времени загрузки сайта.

Для достижения нашей цели можно использовать React.lazy .

Примечание React.lazy и Suspense пока нельзя использовать для отображения на стороне сервера. Для решения этой проблемы вы можете воспользоваться React Loadable. В документации можно найти хорошее руководство по разделению бандлов с серверным отображением.

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

Как правило, переходы на новую страницу требуют времени на загрузку. А если вы заново отображаете всю страницу за раз, то пользователи, не могут взаимодействовать с другими элементами на странице в то же время.

Вот пример настройки разделения на основе путей с помощью библиотек вроде React Router и React.lazy :

Suspense нужен здесь на всякий случай: он будет показан, если нужный бандл ещё не загрузился. Здесь вы можете использовать индикатор загрузки, чтобы показать пользователям, что процесс не стоит на месте. Вы можете использовать границы ошибок даже в качестве родителя Suspense для обработки других ошибок вроде сетевых.

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

Пользуйтесь статической проверкой типов

JavaScript является динамически и слабо типизированным языком, поэтому многие проблемы возникают из-за неправильных типов. Для решения этой проблемы можно использовать различные инструменты для проверки типов. Flow — известный и дружелюбный к новичкам вариант. Он был разработан в Facebook и часто используется с React. Он позволяет аннотировать переменные, функции и компоненты React с помощью специального синтаксиса и даёт возможность быстро отлавливать ошибки. Здесь можно изучить основы Flow, а в этом официальном руководстве найти пошаговые инструкции по использованию.

Курс по JavaScript и React Advanced в школе EasyCode

Уроки продвинутого JavaScript в EasyCode будут полезны тем, кто уже освоил язык на достаточном уровне и хочет вывести свой скилл на качественно новую ступень. Мы поможем прокачать ваш JS по полной.

Как попасть на курсы уровня Advanced по JavaScript в EasyCode

Чтобы начать обучение на уроках продвинутого JS, необходимо пройти собеседование у куратора. Такое условие — необходимость, ведь конкретно этот курс предусматривает, что вы уже знаете JS. На нем не будет никаких основ — подразумевается, что вы уже их освоили. Если уровень ученика не соответствует сложности курса, студенту будет сложно справляться с программой и многое будет просто не понято. Поэтому некоторые из желающих записаться на курс Advanced дополнительно проходят обучение базовому JS.

В нашей школе существует система оценивания, в которую входит коэффициент посещаемости и те отметки, которые ученики получают за домашние работы. Сводная таблица с баллами будет доступна для просмотра, поэтому для вас не станет неожиданностью конечный результат. Все происходит максимально прозрачно, а на основе данных таблицы будут определены лучшие ученики. Для них заготовлен бонус — пластиковый сертификат «с отличием» и помощь в трудоустройстве. Таким образом, вы получаете дополнительную мотивацию для того, чтобы успешно пройти курс. Но, конечно, лучшей мотивацией всегда будет оставаться освоенная профессия — перспективная и любимая. Поэтому можно сказать, что курсы программирования в Харькове делают людей немного счастливее.

Ученикам будут доступны все видеозаписи уроков, что позволяет в любой момент освежить подзабытое или заполнить пробел в знаниях, сформированный пропуском занятия. Конечно, мы рекомендуем посещать все уроки, но если у вас возникнет необходимость пропуска, можете наверстать часть материала при помощи видео.

Что вы будете знать/уметь после курса по продвинутому JS и React в школе EasyCode:

  • использовать все необходимые для разработки инструменты;
  • работать в команде и самостоятельно;
  • взаимодействовать с заказчиком, выполнять задачи с минимальным количеством ошибок;
  • курсыJavascriptиReact в Харькове помогут вам преодолеть пропасть, которая иногда наступает в момент, когда вы уже что-то выучили и умеете делать, но еще не достигли высокого мастерства;
  • продвинутый JS помогает выйти на новый уровень, а значит делает вас более дорогим, как специалиста.

Все студенты получают возможность посетить две бонусных лекции. Обе проходят в нашей школе, в Харькове. Одна из них о фрилансе, а другую ведет HR. На первой вы сможете узнать как получить свой первый заказ на фриланс-бирже, когда рейтинга и круто оформленного портфолио с реальными заказами еще нет. Каким образом выстраивать коммуникацию с заказчиком и как происходит сделка. Таким образом, курсы программирования на JavaScript полезны не только по сугубо техническим параметрам, но и для развития софтскиллов.

Fullstack Advanced
React & GraphQL

Join 22,441 others learning to build Full Stack JavaScript Apps with React.js and GraphQL

Build an online store with React and GraphQL

Just as React has transformed the way we build web applications, GraphQL is changing how we build APIs to query and mutate data.

With a focus on modern JavaScript and real world application, this course is a start-to-finish way to learn Full Stack Advanced React, GraphQL, Node.js and friends.

Join me as I show you how to build a full stack online store with some of today’s top JavaScript technology.

What Will You Build?

Together we will build «Sick Fits», a full stack online clothing store complete with real credit checkout. Users can search, sell, add to cart and checkout their favourite items.

The application has five main models — Users, Items, Orders, CartItems, and OrderItems — all of which are relational and showcase the power of relational GraphQL Queries.

The app also includes many server side bits including JWT authentication, permissions, sending email, uploading images, and charging credit cards.

In addition to building both the frontend and backend of the application, we also spend the last ⅓ of the course Testing the React application.

For a full list of topics covered, see below.

Sweet Code!

The code in the application has been reviewed and influenced by some of our industry’s best JavaScript developers.

Peggy Rayzis

Peggy is an engineering manager at Apollo where she worked on Apollo Client & Apollo Link State. She also delivers talks and leads workshops on GraphQL all around the world. @PeggyRayzis

Johannes Schickling

Co-founder and CEO of Prisma. Johannes is responsible for building and pushing a lot of the JavaScript GraphQL tooling forward. @schickling

All the code for the course is open source and posted on Github

The Tech Stack of our Application

React.js

Apollo Client

GraphQL Yoga

Prisma

What is GraphQL?

GraphQL is a type-safe query language for APIs and a runtime for fulfilling those queries with your existing data.

What?! It’s a replacement for (or addition to) your REST API and Ajax Calls.

GraphQL requires buy-in from both your client and your server — it then puts the power of requesting only what you want into the client and the business logic of finding and filtering that data into backend resolvers.

Specifically in this course it enables libraries that make caching, loading, error handling and pagination a breeze

Complex Relational Data queries and server-side mutations like signing up or checking-out are a snap with GraphQL.

GraphQL is just a standard and can be implemented in any language or framework.

Meet Wes Bos

Wes Bos is a Full Stack Developer, Speaker and Teacher from Canada. He is a course creator, works as an independent web developer and is the co-host of Syntax — a popular web development podcast. Wes has taught over 500 students in 200+ classes and spoken at dozens of conferences around the world. Wes wrote his own bio in the third person for some reason.

Wes is the author of React For Beginners, ES6 for Everyone and Learn Node which together have sold over 55,000 copies. He is also the author of JavaScript30.com, CSSGrid.io, Flexbox.io and Command Line Power User, a set of free video series. 300,000 people have taken at least one of Wes’ free video courses.

Who is this for?

Web developers who want to expand their JavaScript, React and Node skills while learning all about GraphQL.

You should be already familiar with the basics of React — components, state, props, modules and event handlers. If you have taken my React For Beginners course or built a few things in React, you are in good shape.

You should be comfortable with both writing and debugging modern JavaScript including arrow functions, classes, promises, async+await and other commonly used parts of ES6. You of course can take my ES6 for Everyone to skill up on this.

The backend of the course is written in Node. Prior node knowledge is nice, but not required for this course as you should be able to keep up no problem. You can take Learn Node if you’d like to learn more.

This course requires no knowledge of GraphQL, Prisma, Databases, or testing React components

  • Anyone looking to learn the whys and hows of GraphQL
  • Web developers who want to get better at JavaScript
  • JS developers looking to advance their skills and career
  • Bootcamp Graduates (see the FAQ for a student discount!)
  • Front End Devs looking to go Full Stack
  • Existing Node.js developers looking to learn how GraphQL works with Node
  • Anyone who wants to get better at JavaScript and learns well from seeing both fundamental and advanced concepts in practice.

Not sure if it’s for you?

100% money back if you don’t think it’s a good fit

Covered Concepts

In each video, we learn and implement a concept into our application. Many of the concepts we return to over and over for different parts of the application, hitting and solving new problems each time.

As we build an entire full-stack application, this course covers a ton. Along with general JavaScript best practices, here are some of the things you can expect to learn:

  • React Best Practices
  • Server Side Rendering
  • Styled Components
  • Theming
  • Render Props
  • Routing
  • GraphQL Schema
  • Queries and Mutations
  • JSON Web Token (JWT)
  • Resolvers
  • Cache Management
  • Loading and Error States
  • Sending Email
  • Logic and Flow with Async + Await
  • Authentication and Permissions
  • Charging Credit Cards
  • Hosting and Transforming Images
  • Pagination
  • Forms in React
  • Animations
  • Third party React Components
  • Unit Testing
  • Mocking Components
  • Mounting vs Shallow Rendering
  • Deployment

Video pacing is just right
fast enough to keep you interested without passing by or assuming any details.

Seriously, it won’t put you to sleep — I’m even funny sometimes.

Курс по JavaScript и React Advanced в школе EasyCode

Уроки продвинутого JavaScript в EasyCode будут полезны тем, кто уже освоил язык на достаточном уровне и хочет вывести свой скилл на качественно новую ступень. Мы поможем прокачать ваш JS по полной.

Как попасть на курсы уровня Advanced по JavaScript в EasyCode

Чтобы начать обучение на уроках продвинутого JS, необходимо пройти собеседование у куратора. Такое условие — необходимость, ведь конкретно этот курс предусматривает, что вы уже знаете JS. На нем не будет никаких основ — подразумевается, что вы уже их освоили. Если уровень ученика не соответствует сложности курса, студенту будет сложно справляться с программой и многое будет просто не понято. Поэтому некоторые из желающих записаться на курс Advanced дополнительно проходят обучение базовому JS.

В нашей школе существует система оценивания, в которую входит коэффициент посещаемости и те отметки, которые ученики получают за домашние работы. Сводная таблица с баллами будет доступна для просмотра, поэтому для вас не станет неожиданностью конечный результат. Все происходит максимально прозрачно, а на основе данных таблицы будут определены лучшие ученики. Для них заготовлен бонус — пластиковый сертификат «с отличием» и помощь в трудоустройстве. Таким образом, вы получаете дополнительную мотивацию для того, чтобы успешно пройти курс. Но, конечно, лучшей мотивацией всегда будет оставаться освоенная профессия — перспективная и любимая. Поэтому можно сказать, что курсы программирования в Харькове делают людей немного счастливее.

Ученикам будут доступны все видеозаписи уроков, что позволяет в любой момент освежить подзабытое или заполнить пробел в знаниях, сформированный пропуском занятия. Конечно, мы рекомендуем посещать все уроки, но если у вас возникнет необходимость пропуска, можете наверстать часть материала при помощи видео.

Что вы будете знать/уметь после курса по продвинутому JS и React в школе EasyCode:

  • использовать все необходимые для разработки инструменты;
  • работать в команде и самостоятельно;
  • взаимодействовать с заказчиком, выполнять задачи с минимальным количеством ошибок;
  • курсыJavascriptиReact в Харькове помогут вам преодолеть пропасть, которая иногда наступает в момент, когда вы уже что-то выучили и умеете делать, но еще не достигли высокого мастерства;
  • продвинутый JS помогает выйти на новый уровень, а значит делает вас более дорогим, как специалиста.

Все студенты получают возможность посетить две бонусных лекции. Обе проходят в нашей школе, в Харькове. Одна из них о фрилансе, а другую ведет HR. На первой вы сможете узнать как получить свой первый заказ на фриланс-бирже, когда рейтинга и круто оформленного портфолио с реальными заказами еще нет. Каким образом выстраивать коммуникацию с заказчиком и как происходит сделка. Таким образом, курсы программирования на JavaScript полезны не только по сугубо техническим параметрам, но и для развития софтскиллов.

Ссылка на основную публикацию
Adblock
detector