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

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

React Fundamentals Day. 10 intense hours

  • Thinking in React
    • The Imperative to Declarative shift
    • Everything is a component
  • What is React made up of
    • Props and State
    • One way data binding
    • Components with and without state. Classes vs. Functions
    • Developer tools
  • Exercise, refactor a React app to make it really declarative
  • Virtual DOM and JSX
    • React Components, Elements, and Instances
    • JSX and React.createElement
  • Exercise, using unit testing to understand the Virtual Dom and JSX
  • Forms management in React
    • Controlled Components vs. Uncontrolled Components
  • Component lifecycle
  • Data management
    • Presentational Components vs. Container Components
    • Data fetching
  • React Router
    • Main components: Router, Route, IndexRoute
    • Authentication
  • Exercise, given a master detail React app
    • Refactor a master detail page to implement the container pattern and to fetch data from an API
    • Create a new route with a new master detail page
    • Implement a login form
  • react-bootstrap Vs. material-ui
  • Final exercise: Build a React app from scratch that fetches data from a public API

Redux Day. From cero to advanced in 10 hours

  • 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
    • Updating data from Redux to the server
  • Time travel in Redux using Redux DevTools
  • 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
  • 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
    • Unit testing made easy with Redux-Saga

Advanced React Day. 10 intense hours

  • Advanced React patterns: Reuse functionality across components
    • Higher-Order Components (HOCs)
    • Exercise about HOCs
    • Declarative composition using the Render Callback (AKA function as children)
    • Exercise about the Render Callback
  • Advanced React patterns: Learn to make your components more reusable
    • Compound Components, dynamically flow data between components
    • Exercise About Compound Components
    • Patterns and use cases using "context"
    • Exercise about Context
  • Performance and Rendering Optimizations (quantified with numbers)
  • Going isomorphic/ Universal with React
    • Nodejs + React + React Router
    • Isomorphic/ Universal Redux. When and How
  • Testing React and Redux
    • Mocking (Spy, Stub), Assertions, Snapshots
    • Shallow, Mount
    • Testing Components, Higher-Order Components, Connected Containers
    • Actions, Reducers
    • Code Coverage
  • Exercise about testing

GraphQL Day. 10 hours

Coming soon

Request a private training delivered worldwide

Head teacher

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.

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.