Thursday, 9 January, 2020 UTC


Summary

Hello there, and Happy 2020!
At RisingStack, besides working on consulting and outsourced development projects, we're actively training engineering teams as well, ranging in size from 5 to 25 ppl at a time.
You might already know that we have 2-days-long training agendas for
  • Node.js
  • React
  • Kubernetes
  • Microservices
These training opportunities are regularly popping up in major European cities, and are also available for companies who'd like to train their engineers on-site, wherever that may be.
In December we prepared a new, 5-days-long training agenda for engineering teams who'd like to dive deep into React and Node, but have little to none experience with these technologies.
Below you can read the full training agenda for the React training, and you can also check out the 5-days-long Node.js Training Agenda in another blogpost.
In case you have any questions about our training agendas, or if you'd like to invite us, reach out to me at [email protected], or use the contact form on our training page.
I'll get back to you within 24 hrs.

This React Training is for developers who:
  • want to improve their front-end skills,
  • want to build application prototypes rapidly,
  • want to create complex and maintainable websites with React

The goal of the training sessions is to

  • teach JavaScript and React fundamentals.
  • teach how to create complex and maintainable websites with React.
  • teach how to write performant front-end code with React, with the latest UX best-practices in mind.

Prerequisites

  • Basic JavaScript and HTML knowledge needed.
  • No prior React knowledge is required.

Other info

  • This training agenda is delivered throughout 5 days.
  • The training relies heavily on hands-on exercises. During the training, we're building a social networking site.

Full Training Agenda
  1. React primer
  2. Setting up a React project
  3. JSX and rendering
  4. Creating React components
  5. Handling state
  6. Project design and structuring
  7. Performance optimization
  8. The new way of writing React: Hooks
  9. Revising and covering more exotic use cases
  10. Complex state management with third-party libraries
  11. Networking on the client-side
  12. Routing with User Experience in mind
  13. Creating a real-world React app

1. React primer

We will discuss the basics of front-end applications, then learn what React is and when to use it. After that, you will learn the core principles behind React - like components and the vDOM.
  • Vanilla JS vs. jQuery vs. Modern Frontend Frameworks
  • When to use React
  • Components and their benefits
  • Introducing the virtual DOM
  • React vs. other frameworks: the difference between a view layer and full frameworks
  • The current state and the future of React: async rendering and hooks vs. lifecycle

2. Setting up a React project

You will learn how to bootstrap a React application in seconds with create-react-app and jump straight into development. We will cover the basics of writing components and the development flow.
  • 1-minute setup with create-react-app
  • Writing our first dummy app
  • Introducing the basic programming and dev tools
  • Creating our first production build
  • What happens behind the scenes of create-react-app?

3. JSX and rendering

You will learn what JSX is and its relation to HTML and JavaScript. After that, we will discuss when do React components render and what exactly happens during a render.
  • The relation of JSX to JS and HTML
  • Common JS syntax patterns that you will use inside JSX: like conditional rendering and spreading
  • Inspecting how renders affect the DOM
  • The syntactical differences between JSX and HTML
  • What are JSX fragments
  • What happens with JSX during the build

4. Creating React components

We will take a deeper dive into React components - explaining the different ways of writing them. After that, we will learn how to handle user-triggered and lifecycle events.
  • Class-based and function components
  • Event handling
  • Synthetic React events vs. DOM events
  • Lifecycle events

5. Handling state

We will learn how to handle local state inside components, how to split complex apps into multiple components, and how to share state with child components.
  • Handling local state
  • Controlled components and uncontrolled components
  • Passing props to child components
  • Lifting the state up: when and how to do it
  • The problems with props and handling state in big apps with React context

6. Project design and structuring

We will discuss best practices for project structuring and component design. We will learn the difference between stateful and stateless components and the difference between container & presentational components.
  • Project structuring
  • Stateful and stateless components
  • Containers and presentational components

7. Performance optimization

React has a few key concepts which boost performance significantly. Knowing these and applying them during development can save you from a lot of post-project optimization headache.
  • Avoiding redundant renders with PureComponent, shouldComponentUpdate and memo
  • Using keys to render lists: why are keys required and what do they do
  • Common design mistakes that slow down websites

8. The new way of writing React: Hooks

Hooks are the new way of writing React logic. They are co-existing with lifecycle events, but they fundamentally differ from them. We will discuss the benefits and drawbacks of both and your opinion about them.
  • From mixins to lifecycles to hooks: the benefit of hooks and why were they added
  • Writing an app with the most commonly used React hooks
  • The rules of hooks and what happens if you violate them
  • Writing a simple useWindowSize hook
  • How hooks work behind the scenes
  • Your opinion about hooks vs. old-school lifecycles

9. Revising and covering more exotic use cases

React has an amazingly well written and terse documentation. We will go through the docs, discuss what we already know, and learn what we did not cover so far.
  • Avoiding redundant renders with PureComponent, shouldComponentUpdate, and memo
  • Using keys to render lists: why are keys required and what do they do
  • Common design mistakes that slow down websites

10. Complex state management with third-party libraries

We will discuss when to use React’s own setState and when to use more third-party state management solutions, then learn how to manage complex state and handle async state changes.
  • Why is React’s own setState not enough: handling large scale global state
  • Learning the basics of Redux
  • Writing an app with redux and react-redux
  • Handling async actions
  • The idea behind and redux and it’s benefits
  • Covering other - fundamentally different - state management alternatives: like MobX and Apollo Link State

11. Networking on the client-side

You will learn how to fetch data from an API server and how to handle async events.
  • Handling async networking
  • Updating the state
  • A quick glance at GraphQL and when to use it

12.Routing with User Experience in mind

You will learn how to implement user-friendly routing with pages and links, then we’ll move on to programmatic routing. We will also cover protected routes with redirects and handling query parameters.
  • Introducing React Router
  • Creating a simple multi-page app with links
  • Handling redirects and private pages
  • Nested routing
  • Keeping the minimal state in query parameters

13. Creating a real-world React app

You will learn how to rapidly develop and deploy front-end apps while keeping them maintainable.
  • Rapid app bootstrapping and development
  • UX considerations, project management, and structuring
  • Graceful error handling
  • Refactoring apps as they grow
  • Deploying apps on Netlify