React, Redux, GraphQL training in London

Master React, Redux and GraphQL in a few days in London, small group and project-based training


Play video »

  • abinbev
  • financial times
  • blockchain
  • the trainline

ReactJS Academy teaches React and Redux in London since February 2016. We've trained more than 500 developers in London in our private bootcamps and public workshops. MEET US   at our free workshop in Central London. Become a productive React Redux developer in 4 days in Central London.

JavaScript ES6 & ES7 Workshop London

Curriculum: See the ES6 & ES7 curriculum.
Dates: May 3rd, 2017. From 6:30pm to 9:30pm.
Location: 1 Fore St, London EC2Y 9DT
Price: £99 + VAT

React Redux Fundamentals Course London

Curriculum: Day 1 and day 2.
Dates: May 13th and 14th, 2017.
Location: 1 Fore St, London EC2Y 9DT
Price: £990 + VAT

Advanced React, Redux, GraphQL Course London

Curriculum: Day 3 and day 4.
Dates: May 20th and 21st, 2017.
Location: 1 Fore St, London EC2Y 9DT
Price: £990 + VAT

React, Redux, GraphQL Bootcamp London

Curriculum: Day 1, day 2, day 3 and day 4.
Dates: May 13th, 14th, 20th and 21st, 2017.
Location: 1 Fore St, London EC2Y 9DT
Price: £1980 £1782 + VAT

React Redux Testing Workshop London

Curriculum: See the testing curriculum.
Dates: May 10th, 2017. From 6:30pm to 9:30pm.
Location: 1 Fore St, London EC2Y 9DT
Price: £149 + VAT

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

React, Redux, GraphQL Training

On completion of the course each student will:

  • Understand the core principles and libraries of the React ecosystem: react, react-router, redux, react-redux, redux-saga, react-apollo
  • Be able to develop and test complex and reliable React applications: enzyme, chai, mocha, sinon, jsdom
  • 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. 10 hours: react fundamentals

  • 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
  • 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
    • Implement react-router in a master-detail web application
  • Introduction to unit testing in React
  • Apps vs. Webs: react-bootstrap and material-ui
  • Improve the previous React app with React Router and data from a web service

Day 2. 10 hours: redux fundamentals

  • Day 1 recap: build a React app from scratch using React, React Router and data fetching
  • 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
  • Build your own version of Redux using TDD
  • Architecting your React app with Redux
    • react-redux: Provider and Connect
    • Unique source of truth
    • Using react-router and react-redux together
    • Action creators
  • Refactor the app that you built in the morning to use Redux
  • 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

Day 3. 10 hours: advanced react & 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
  • 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 patterns: Reuse functionality across components
    • Higher-Order Components (HOCs)
    • Declarative composition using the Render Callback (AKA function as children)
  • Going isomorphic/ Universal with React
    • Nodejs + React + React Router
    • Isomorphic/ Universal Redux. When and How

Day 4. 10 hours: advanced react, graphql

  • Testing React and Redux
    • Mocking (Spy, Stub), Assertions, Snapshots
    • Shallow, Mount
    • Testing Components, Higher-Order Components, Connected Containers
    • Actions, Reducers
    • Code Coverage
  • Performance and Rendering Optimizations (quantified with numbers)
  • 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

React & Redux Testing Workshop (3 hours)

On completion of this workshop each student will:

  • Be able to test React and Redux applications using: enzyme, jest, chai, mocha, sinon, jsdom
  • Comprehend Unit Testing and Integration Testing in the pyramid of testing with React and Redux.
  • Have a better understanding of TDD and its limitation depending on the testing approach

Curriculum

  • Concepts of testing
    • Mocking (Spy, Stub), Assertions, Snapshots
  • Best practices to test React
    • Shallow, Mount
    • Components, Higher-Order Components
  • Best practices to test Redux
    • Action, Reducer
    • Connected Components
  • Code Coverage

JavaScript ES6 & ES7 Workshop (3 hours)

On completion of this workshop each student will:

  • Understand how transpilers work: babel, babel-node
  • Be confident writing modern JavaScript: ES6, ES7

Curriculum

Modern JavaScript ES6 & ES7

  • Transpilers
    • babel, babel-node
  • ES6 (ES2015)
    • Arrow Functions, Classes, Template Strings, Destructuring, Default + Rest + Spread, Let + Const, Iterators + For..Of, Generators, Modules, Map + Set + WeakMap + WeakSet, Promises
  • ES7 (ES2016 - Stage 3)
    • global, Rest + Spread properties, import(specifier), Async + Await

Head teacher

Alex Lobera

Alex Lobera

Instructor

Mark Rivelles

Marc Rivelles

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 bootcamp

Return of investment

If you own a business

How much are you paying to learn as you go? Let’s say you spend 16 hours (2 days) training a team of 10 engineers. In the next year, these engineers will put in approximately 20,000 hours of work for your company. If training your developers results in only a 1% performance improvement, your company will gain the equivalent of 200 hours of work as the result of spending 2 days in training.

If you are a developer

How long is it taking to learn as you go? How long are you willing to wait for that awesome job in an awesome company? Learning cutting-edge JavaScript will make you a developer in demand and it will put you on top of the market. Investing in your career is a great investment. React is creative and fun, unleash its full power and become an amazing JS developer.

React Redux bootcamps in other locations


See locations