Course : ReactJS: Mastering the Facebook JavaScript framework

ReactJS: Mastering the Facebook JavaScript framework

Download in PDF format Share this course by email 2


Going against traditional models, the framework maintained by Facebook promotes simplicity and performance of RIA components. In this course you’ll learn how to develop applications with ReactJS, JSX and Flux and discover the principle and benefits of isomorphic development.


Inter
In-house
Custom

Practical course in person or remote class

Ref. TJS
Price : 2070 € E.T.
  3d - 21h00




Going against traditional models, the framework maintained by Facebook promotes simplicity and performance of RIA components. In this course you’ll learn how to develop applications with ReactJS, JSX and Flux and discover the principle and benefits of isomorphic development.

Teaching objectives
At the end of the training, the participant will be able to:
  • Developing with ReactJS
  • Design an SPA with ReactJS and Flux
  • Understand the JSX JavaScript subset
  • Optimize the performance of the RIAs

Intended audience
JavaScript developers, Web project managers and architects.

Prerequisites
Practice of Web development, mastery and practice of JavaScript (ES5 minimum).

Course schedule

Refreshers on the components of the RIAs

  • Fundamentals. HTML, CSS, Javascript. The DOM.
  • Conventional app design patterns. Limitations of JavaScript applications.
  • Ecosystem of JavaScript frameworks.
  • Data-Binding principles: dirty-checking, observable, virtual-dom.
  • ReactJS, positioning and philosophy.
  • JSX, presentation. Implementing "Transpilers".
  • Development environment. IDE and plug-ins.
Hands-on work
Setting up the development environment. Introduction to JSX. Defining the app's structure.

Developing with ReactJS

  • Approach: MVC and Virtual Dom, a matter of performance.
  • Using JavaScript or JSX.
  • Understanding JSX in detail. Pitfalls to avoid.
  • Main API methods.
  • Creating view components. Lifecycle.
  • Initializing properties.
  • Render Function: management of component states.
Hands-on work
Defining and producing components according to the determined specifications.

Interactivity of components

  • Event management. "autobinding" and delegation.
  • Design Pattern: strategy for stateful components.
  • Composing in sets.
  • Component Data Flow: owner, children and dynamic creation.
  • Reusable components: control and transfer of properties.
  • Control of form components.
  • DOM manipulation.
Hands-on work
Creating a structured set of UI components.

Single-page app with ReactJS and Flux or Redux

  • Flux/Redux: presentation. Data propagation.
  • Comparison of architectures.
  • Creating views and controllers in Flux.
  • Role of the Dispatcher in Flux for actions.
  • The Stores, logical state manager in Flux.
  • Definition of Functional Programming.
  • Approach with Redux. The "Reducer".
  • Extension for ReactJS: "hot-loader".
Hands-on work
Incorporate an SPA.

Isomorphic application

  • Principle and benefits of isomorphic development.
  • Server-side JavaScript ecosystem.
  • Introduction to NodeJS.
  • Configuring NodeJs for ReactJS.
  • Organizing routes.
Hands-on work
Server-side pre-render of an application.

Introduction to React Native

  • Positioning, differences with Cordova.
  • From React to native iOS components, a project to follow.
Demonstration
Application using React Native.


Practical details
Hands-on work
You'll build a complete application based on the ReactJS framework.
Teaching methods;
Guided development. 50% theory illustrated by 50% practice.

Customer reviews
4,5 / 5
Customer reviews are based on end-of-course evaluations. The score is calculated from all evaluations within the past year. Only reviews with a textual comment are displayed.


Dates and locations
Select your location or opt for the remote class then choose your date.
Remote class