React Training Course

16 Apr London
request info

Capita Marks and Spencer Telefonica Cisco BBC Lloyds Sony

React training course (code: REACTFLUX)

Learn React and Flux - Build large data-driven applications that intertwine with Facebook & Instagram



React is the exciting web framework from Facebook. It runs Facebook.com, and a host of other high-performing web applications, and is designed to facilitate three goals: performance, agility, and scale.

React is a component based front-end library that allows you to build applications out of a tree of small, testable, modular components. It features a diffing engine that makes DOM manipulation incredibly fast, faster even than vanilla DOM scripting.

Flux is an architectural pattern characterised by one-way data flow, immutability and message passing. We create a central data store, and then pass messages to it to tell it how to change. Changes then flow into the component tree, updating the DOM. It can seem intimidating at first, but quickly becomes natural. In this course, we use Redux for Flux, which is currently the best practice solution.

Our React training course is practical. You will, right from day one, be building components and applications with real-world applicability. We will build against tests from the end of day one, and design sensible, component-based solutions using best practice. You will also gain an awareness of the wider JavaScript toolchain ecosystem, including Node, Karma, and Webpack.


This course is designed for software developers who are interested in learning how to build single page web applications or mobile hybrid apps. You should have good coding skills, and some skill with JavaScript. You will also need to be able to compose a basic website in HTML and CSS.

 Instagram is one popular website known to be using React.



React Vanilla Quickstart with ES6

  • React Theory and Architecture
    • Why React is faster than vanilla DOM scripting (with demos).
    • The virtual DOM
  • React Vanilla Hello World
    • Getting React running.
    • Creating DOM components
  • Composing a DOM with Vanilla React
    • Nesting Strings, elements and arrays inside one another.
    • Generating an unordered list from an array of data.
    • Using Keys for DOM performance
    • Array#map for array manipulation
  • Vanilla React Components
  • Stateful Components
    • What is State in a React component?
    • What does setState do?
  • A Word on Immutables
    • Object.assign
    • The Spread Operator
    • Problems cause by mutating data
  • DOM Events
    • Handling clicks, keystrokes and form submissions
  • Passing Data into Vanilla React Components with Props
    • One-way binding
    • Props
    • How do I pass data around a React app?
  • Making Components Emit Events
    • Sending data back up through the tree
    • Making reusable components
  • Introducing JSX
    • What is JSX?
    • What is a transpiler?
    • How do I convert JSX to JavaScript?
  • Initialising an App with create-react-app
  • Presentational vs. Container React Components
  • Optimising Compilation with Pure Components
    • How do I use shouldComponentUpdate to improve performance?
    • What are Pure components?

Flux with Redux

  • What is Flux, How Does It Work
    • What is Flux?
    • How can I build a minimal flux implementation with plain ES6 JavaScript?
  • Introducing Plain Ol' Redux
    • What is Redux and how does it relate to React?
    • How can Redux help me build an app?
    • How do I connect Redux to my React app?
    • What is a Redux reducer?
    • What is meant by (state, message) => state?
  • Binding Redux to React
  • Combining Redux Reducers
  • Integration Exercises
    • Walk out working


  • Render and a simple hello world.
  • Child Nodes and rendering child nodes.
  • Creating Components.
  • Props and passing data down to render.
  • State and updating UI state.
  • Transpiling JSX to make our templates more legible.
  • Flux architecture with Redux
Receive the latest version of this course into your inbox

See why people choose JBI

"At jbi even the sales team are technical so you are able to ask questions before the course"

Garima Aon

Blog (Show All)

JBI training course London UK

Shelf Life - are React and Angular frameworks here to stay?

12/02/2018: Your choice of development framework will have long term repercussions for IT and corporate strategy for years to come. When migrating and upgrading...

JBI training course London UK

React vs Angular - which framework and therefore which Training Course?

16/01/2018: React vs Angular which framework best for my organisation Speed, security and extensibility are the hallmarks of a great web service, and your...

JBI training course London UK

Angular Course | Expand your HTML capabilities with Angular

09/01/2018: Using HTML is a great way to build static web pages that hardly need any movement or adaptability, but every time a dynamic environment is required,...

Case Studies (Show All)

JBI training course London UK

Online fashion house gets intensive React training course in 2 days

06/02/2018: Originating from Facebook, React is a component based front-end library that allows you to build applications out of a tree of small, testable,...

JBI training course London UK

Android Training Course - customised and run onsite

08/01/2018: Knowing you need an app is one thing, making it happen should be as painless as possible. When a team of experienced developers needed to work...

JBI training course London UK

Developers improve Web Skills with Angular training course

06/01/2018: This organisation wanted to level up developers' expertise in modern web development. Some of the delegates were seasoned programmers with years...


16th Apr 2018 - 2 days £1295

see all dates


Show Discount for this course


  Bring a JBI course to your office
  and train a whole team onsite
  0800 028 6400
or request quote

  You can customise this course to
  suit your exact needs here
  0800 028 6400 or request quote

Get in touch
0800 028 6400

Excellent feedback, consistently !

►"great tips help reduce build times"
► "we got access to exclusive content"
► "Short course meant less time off"

►"what an inspiring trainer !"
► "colleagues at 2 sites joined via web"
► "I passed my exam the next day"

Newsletter ! Get exclusive news about upcoming programs, technical insights & special offers

Google Apps Script
Authorization is required to perform that action.