Private on-site React training

Private React, Redux, GraphQL training delivered worldwide


Play video

  • abinbev
  • ASOS
  • financial times
  • blockchain
  • the trainline

LeanJS world-class JavaScript instructors are specialised in helping companies adopt cutting-edge web technologies. Speed up your digital transformation and bring knowledge in-house. Our experienced instructors have trained top companies like Blockchain, ASOS, Financial Times, or Trainline.

Request a private training delivered worldwide

I would like to recieve more info and some free learning resources!

React, Redux, GraphQL Training

On completion of the full training each student will:

  • Understand the core principles and libraries of the React ecosystem: react, react-router, redux, react-redux, redux-saga, graphql
  • Be able to develop and test complex and reliable React applications: enzyme, jest
  • Comprehend the best practices for front-end JavaScript: functional programming, es6, webpack
  • Understand the best practices and patterns for building layouts: material-ui, react-bootstrap

Curriculum

Day 1

  • Thinking in React
    • The Imperative to Declarative Shift
    • Everything is a component
  • What is React made up of
    • Props vs. State
    • One way data binding
    • Components with and without state. Classes vs. Functions
    • Developer tools
  • Virtual DOM and JSX
    • React Components, Elements, and Instances
    • JSX and React.createElement
  • Component lifecycle
  • React Router
    • Main components: Router, Route, IndexRoute
    • Authentication
    • Implement react-router in a master-detail web application
  • Data management
    • Presentational Components vs. Container Components
    • Data fetching
  • Forms management in React
    • Controlled Components vs. Uncontrolled Components
  • Styling your app
    • React-Bootstrap
    • MaterialUI

Day 2

  • Thinking in Redux. What problem is Redux solving?
  • Intro to functional programming
    • Data and behaviour
    • Data in, data out
    • Mutations
    • Pure functions
  • Redux Principles
    • Store, Reducers, Actions
    • Unique source of truth
  • React-Redux: Provider and Connect
  • Exercise:
    • Build your own version of redux and react-redux using TDD
    • Given an existing React-Redux app, you will have to build some features using action creators, reducers and connected containers
    • Configure Redux from scratch in a React app
  • Connecting Redux to the server
    • Fetching data from the server to Redux
  • Functional programming
    • Composing functions
    • Currying, thunks and higher-order functions
  • Advanced Redux:
    • Introducing the Redux middleware
    • Exercise, build your own Redux middleware
    • Thunks. Actions that dispatch actions
    • Exercise, implement loading indicators using thunks
  • Time travel in Redux using Redux DevTools

Day 3

  • Testing React and Redux
    • Mocking (Spy, Stub), Assertions, Snapshots
    • Shallow, Mount
    • Testing Components, Higher-Order Components, Connected Containers
    • Actions, Reducers
    • Code Coverage
  • Redux-Saga:
    • What is the Saga pattern
    • How is Redux-Saga implemented: ES6 generators
    • Refactor an app to implement redux-saga instead of redux-thunk and redux-promise
    • Testing with Redux-Saga
  • Going isomorphic/ Universal with React
    • Nodejs + React + React Router
    • Isomorphic/ Universal Redux. When and How
  • Performance and Rendering Optimizations (quantified with numbers)

Day 4

  • Functional programming concepts
    • Data and behaviour
    • Data in, data out
    • Composition
  • Advanced React patterns: Reuse functionality across components
    • Higher-Order Components (HOCs)
    • Declarative composition using the Render Callback (AKA function as children)
  • Advanced React patterns II: Create more reusable components
    • Compound Components, dynamically flow data between components
    • Patterns and use cases using "context"
  • GraphQL
    • GraphQL: Query, Mutation, Fragment
    • Relay vs. Apollo
    • Relay connections
  • GraphQL exercise: Integrate Apollo in a React & Redux app
    • Connect an Apollo client to a GraphQL server
    • Implement infinite scrolling in a React app using Apollo on the client-side and a Relay connection on the server-side
    • Update the state of your React app using mutations and Apollo client

Do you have any questions? Contact us at hello@leanjs.com

Request a private training delivered worldwide

Head Instructor

Alex Lobera

Alex Lobera

A day in our training

Live coding

Developers will be introduced to new concepts with presentations and also live examples. With live coding we can enhance interactions between trainees and instructors and provide tailor-made examples to trainees’ queries.

Pair Programming

By working in pairs developers have to explain to their partners what they do and how, rather than just doing it. Explaining is a great way to learn and to make sure concepts are clear. Pair programming also increases motivation and productivity.

Mentorship

Our experienced instructors will give developers individual feedback whilst developers are coding. Instructors will guide and mentor them to think of the best way to solve a given problem. Groups of 10 developers for 1 instructor on average.

Code

We are strong believers in learning by doing, and so we want developers to code as much as possible, so they can make mistakes in a safe environment. You will have time to practise everything we explain during the training.

Play video

What our trainees say about our training

Do you need help adopting the ReactJS ecosystem at your company? Our consultants are specialised in front-end digital transformation.