React, Redux, GraphQL

Master cutting-edge JavaScript in a few days and speed up your front-end productivity


Play video

  • abinbev
  • financial times
  • blockchain
  • the trainline

LeanJS world-class JavaScript instructors are specialised in helping companies succeed on digital transformations. Our experienced instructors have trained top companies. Join our public courses in London or request a private on-site training. Our private training is delivered worldwide.

Request a private training delivered worldwide

Next Public Courses

1-Day React Essentials Course

It includes curriculum part 1: React Essentials.
Date: Saturday 16 Sep 2017. From 9am to 7pm.
Location: 1 Fore St, London, EC2Y 9DT
Price: £500 £195 + VAT


4-Weeks React Ecosystem Course

It includes curriculum part 1, part 2, part 3, part 4.
Dates week 1: Full day 16 Sep 2017. Office hours 20 Sep 2017.
Dates week 2: Full day 23 Sep 2017. Office hours 27 Sep 2017.
Dates week 3: Full day 7 Oct 2017. Office hours 11 Oct 2017.
Dates week 4: Full day 14 Oct 2017. Office hours 17 Oct 2017.
Location: 1 Fore St, London, EC2Y 9DT
Price: £1600 + VAT


Essentials Course Upgrade to Full Course

It includes curriculum part 2, part 3, part 4.
Dates week 1: Office hours 20 Sep 2017.
Dates week 2: Full day 23 Sep 2017. Office hours 27 Sep 2017.
Dates week 3: Full day 7 Oct 2017. Office hours 11 Oct 2017.
Dates week 4: Full day 14 Oct 2017. Office hours 17 Oct 2017.
Location: 1 Fore St, London, EC2Y 9DT
Price: £1500 + VAT

By purchasing a course, you agree to our Terms & Conditions

How it works

Full day on-site training session

Experience our intensive hands-on training focused on real-world challenges. Striking the perfect balance between lectures and coding exercises. This part of the training takes places at LeanJS headquarters, 1 Fore St, London, EC2Y 9DT

Remote mentoring

Work with our experienced mentors that will support you between training sessions. You will work on your own and we will support you with personalized feedback, advice and code review. Remote mentoring happens during the 4 weeks of the React Ecosystem course.

Office hours

After hours on-site mentorship and pair programming with your peers and experienced developer support from the LeanJS community. After hours happen during the evening at LeanJS headquarters, 1 Fore St, London, EC2Y 9DT

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

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
  • 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

Part 1. React Essentials

  • 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

Part 2. Redux

  • 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

Part 3. Advanced React & Redux-Saga

  • 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)

Part 4. Advanced React & GraphQL

  • 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

Trainer

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 transformations.