EXCEPTIONAL TRAINING COURSES FOR IT PROFESSIONALS
LONDON UK | ONSITE | ONLINE


React Training Course


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


SEE MORE COURSES IN THIS CATEGORY

TRAINING COURSE OVERVIEW

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.


AUDIENCE

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.




DETAILHIGHLIGHTS

 

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

Call our Tech Team :  0800 028 6400  request info



PUBLIC COURSES (LONDON, UK)
 

2nd Oct 2017 - 2 days £1295
Book

see all dates


X

Show Discount for this course



PRIVATE COURSES


  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




 

You may also be interested in ...

 

 

view all case studies

 

 

Our inspiring and up-to-date courses gain exceptional feedback

►"great tips to help reduce build times"
► "we got access to exclusive content"
► "intensive 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