All courses

React.JS

This online course is dedicated to professional web-apps development with React.JS.

Program

In this course, we'll go through building a single page application with React step by step. We'll start with pure basics like how React works, how to write simple components and use third-party ones.

Then we'll dive into business-logic and state management with most popular implementation of unidirectional dataflow architecture - Redux.js. We'll learn how to write simple flows, your own middlewares and how to use redux thunk to communicate with a server. Then we'll use react-router to create different screens and connect it with our redux store.

That's effectively everything you should know to start developing your own SPA, but we will also discuss some advanced React APIs, like context and new lifecycle methods + get some overview for the advanced ecosystem like Redux Saga, MobX, Relay, GraphQL, React Native etc.

The course contains 4 blocks:

  1. Getting familiar with React and its ecosystem.

  2. Building React applications: Redux.js.

  3. React for SPA: react-router and advanced React API.
  4. Where to go next.

You can find program details .

Main agenda topics.

  • Block 1
  • Block 2
  • Block 3
  • Block 4

Block 1

Getting familiar with React and its ecosystem.

In this block, we'll learn React basics, get familiar with its core algorithm, lifecycle, and a component-based architecture. We'll learn how to write your own components, use third-party libraries and create simple animations.

  • How create-react-app works.
  • Understanding of the Virtual DOM and JSX syntax.
  • Component lifecycle.
  • Code reuse with decorators and inheritance.
  • PureComponent and shouldComponentUpdate.
  • What are keys & refs, when to use them.
  • Animations in React, CSSTransitionGroup.
  • Third-party libraries usage.

Block 2

Building React applications: Redux.js.

When your application grows in complexity you should think about organizing your business-logic, building a scalable architecture, implement communications with server etc. We'll learn the most common pattern for React apps - Unidirectional dataflow, and its most popular implementation - Redux.js.

  • Redux.js features: functional programming paradigm.
  • Store, as an Immutable object, Immutable.js.
  • Synchronous data flow with Redux.
  • React-redux to connect your components to Redux.
  • Memoized selectors with reselect
  • Side-effects with Redux: how to use and create Middlewares.
  • Retrieving data from server.
  • Redux-thunk: Async Action Creators.

Block 3

React for SPA: react-router and advanced React API

Single page application development is one of the most exciting front-end tasks. We'll understand how to build them using React, learn some advanced React API and React Router v4.

  • Why do we need routing, how it works.
  • Differences between react-router v4 and v3.
  • How to use Routes and nested Routes.
  • What is history and how to pick one.
  • Connect react-router to redux.
  • Handling server errors.
  • How to declaratively control your router
  • Using context – one more way to manage your data.
  • Overview of advanced react-router API.
  • Using props.children for component composition.

Block 4

Where to go next.

You already know everything to start developing your React app, but it's never enough. The huge ecosystem has grown around React, we'll shallowly go through all main directions for professional grows: different platforms, state-management libraries, and standards. + You'll be able to get answers to your particular questions.

  • Working with forms: redux-form, final-form, formik.
  • What to expect in React 17.
  • React Native & React VR.
  • GraphQL + Relay/Apollo.
  • MobX vs Redux.
  • Managing side-effects: redux-thunk, redux-loop, redux-saga, redux-observable.

The way it goes:

We'll have 9 lessons, with a break in the middle. Before that, we'll have an organizational meeting. The first part will contain basic React: main ideas, new APIs, infrastructure and simple Redux. Then we'll take a short break to rest and understand the material and in the second part, we'll dive into communications with a server, routing (RR4), advanced React APIs. And the last meeting will be dedicated to your questions, we can shallowly discuss everything you're interested in: testing, Relay + GraphQL, MobX, React Native, etc.

Each lesson will be followed by a home task. The tutor will review it and give you a feedback.

The next time we're analyzing what you've done, common mistakes, pitfalls and how to improve this. To get the best of this course you should not just listen to it, but do home tasks, show them and ask questions. That will help you understand React by building an application step by step and getting a constant feedback.

As a result:

  1. You know, understand and can use in practise main React concepts.
  2. Component structure and Redux architecture are totally clear for you.
  3. You can build reusable components as well as SPA with React.
  4. You know where to look next and familiar with the top React ecosystem elements.

Guarantee

If you don't like our course for any reason, you can get money back.

Let us know during the first week of the course, and then your participation will cease and you get a full refund.

Teacher

Photo
Roman Yakobchuk

I’m a software engineer who started programming somewhere in a childhood. Right now I’m working as a Front End Architect at Wix.com.

I’ve been programming frontend for about 5 years, using React.JS from earliest times and teaching React and JS for the last 4 years.

I believe we should look at our profession from different sides, so I have an exerience in other client and server-side languages that helps to build solid and successful apps.

Professionals’ opinion

Additional information

  • You'll need a knowledge of JavaScript (ES6) and some CSS/HTML.

  • For online lessons: internet speed 256kb/s or better. Windows/Mac/Linux are all supported.

Comments

read this before commenting…
  • You're welcome to post additions, questions to the articles and answers to them.
  • To insert a few words of code, use the <code> tag, for several lines – use <pre>, for more than 10 lines – use a sandbox (plnkr, JSBin, codepen…)
  • If you can't understand something in the article – please elaborate.