Advanced React

Upcoming

6 September 2020 Book Now

Upcoming

6 September 2020 Book Now

This advanced React workshop covers the journey from defining your project module architecture all the way to deployment. Every module covers the best practices for testing strategies.

Due to the fact that React has a pretty big feature ecosystem around it there are multiple checkpoints that will allow us to analyze and troubleshoot case studies that you would run into in production environments both in terms of feature requirements and performance tweaks.

Each module in the course will contain recommendations for tools to use in each scenario to achieve the best results and have your project laid out in a way that facilitates extending and a tighter feedback loop that is in line with good DevOps practices.

Schedule

Week 1: Monorepos

Why use a monorepo? Who is using monorepos? Advantages and disadvantages [Lecture]
How to implement monorepo in a project, npm link, yarn workspaces, Lerna [Lecture]
Create and use local packages using yarn workspaces [Exercise]
Benefits of using Lerna. Fine grained dependency management, project structure [Lecture]
Create new Lerna package. Import and use new package in react application. Change local package and use Lerna version to bump changed dependency versions. Note: use conventional commits to also auto-generate changelog [Exercise]
Build tools for component libraries: Rollup, Webpack and Storybook and how they work together for bootstrapping a production-ready ecosystem for your project [Lecture]
Build a component. Create a showcase for the created component in storybook. Use component in the react app [Exercise]

Week 2: Design System

Components and Atomic design [Lecture]
Creating a typography, fonts, styles, using higher-order components for defining a reusable system for styling your text [Lecture]
Add a Body text style [Exercise]
Styled-system & themes, theme provider, styled-system scales [Lecture]
Create a font scale and check that it gets applied to your components by the font provider. Create theme modules for font families, colors [Exercise]
Dealing with responsiveness in your components in fonts and layouts [Lecture]
Add a breakpoint module to the theme for mapping the different screen sizes to corresponding font sizes [Exercise]
Storybook addons and easy testing of components using storyshots [Lecture]
Add a storybook showcase of the Body component similar to Artifika. Add snapshot testing ability to storybook using storyshots [Exercise]

Week 3: State management and side-effects

App architecture. Modules structure. How to store data in redux and data normalization [Lecture]
Scaling side-effects using sagas, implementation of an auth render-prop [Lecture]
Implement books progress start/stop [Exercise]
Using selectors to optimize store data access with memoization [Lecture]
Implement selector for books in progress [Exercise]
Unit testing strategies for Redux applications including sagas, selectors reducers [Lecture]
Add App component functional test. Add reducer unit test. Add action unit test. Add saga unit test. Add selector unit test [Exercise]

Week 4: Using CircleCI for CI/CD of your React project

Continuous integration and continuous deployment [Lecture]
Anatomy of a CircleCI yml file [Lecture]
Create circle job to build app and run tests [Exercise]
Cypress - automated UI tests [Lecture]
Add login test. Add viewport test [Exercise]
Deploy to cloud provider or static hosting using CircleCI [Lecture]
Create a job in CircleCI to deploy bundles [Exercise]
Wrap up [Lecture]

Structure

The class takes place over 4 weeks, with an average time commitment of 4-5 hours per week. Each week will follow this structure:

Mondays: Lectures & exercises released via the Homeschool platform; you'll need to be logged in to access this.

All week: Peer chat and exercise sharing with your instructor & class cohort.

Thursday evening, 8pm and Friday morning, 10am CEST: Live recap and Q&A sessions (~1 hour) with the instructors. Exercise answers released.

The Q&A session is streamed within the Homeschool platform, with questions submitted via chat. Q&A recordings are added to the platform and all questions are logged with a timecode for each is published after the streams end, in case you miss them.

All course materials are permanently available on your Homeschool account after they've been released.

What you'll need...

  • A laptop with a terminal emulator compatible with *NIX platforms.
  • A code editor, we recommend VS Code

Previous experience with:

  • CSS, HTML as most of the examples will be frontend focused.
  • Node.js, as some parts of the build pipeline require knowledge of npm scripting and npm package management
  • React, as most of the examples will be React and the basic React concepts will not be covered
  • Redux, as most of the examples that include Redux will only briefly touch on the concepts of Redux and assume some understanding of actions, reducers, the redux store and how the data flows.
  • styled-components would be beneficial as the course will not provide a lot of details on the library and how it works under the hood.

Who it's for...

If you are in any of the following roles, you'll benefit from this class:

Frontend engineers experienced with building single page applications with React looking to take a more modular approach into building UIs using custom built component libraries

Fullstack engineers who want to be able to build a robust architecture for the frontend part of the application and be able to harness the power of styled components for theming and responsiveness.

Tech Leads, Architects, and Engineering Managers who want to get a handle on how to build modular apps using React and Node using monorepos and design systems. The project will take you from inception to delivery using recommended industry standards.