This is an example of a simple banner

Training: React JavaScript

Ref. REACTJS
Duration:
3
 days
Exam:
Not certifying
Level:
Fundamental

ReactJS Training

Master application development with ReactJS

ReactJS is currently one of the most popular JavaScript libraries for single-page application development. With our ReactJS training, you will learn how to build dynamic interfaces, manage states, and understand the importance of components. This course covers the essentials of ES6 and React, from the basics of modern JavaScript to the creation of robust web applications. You will discover how to use JSX, manage props and state, and set up efficient routing. It is ideal for developers looking to expand their front-end skills with ReactJS.

Participant profiles

  • Javascript developpers and architects

Objectives

  • Code using new ES6 language features
  • Develop an application from scratch using React 16
  • Understand the benefits of unidirectional data flow
  • Understand and use React, React Router, Redux, Redux Saga
  • Use styled-components to create presentational components (CSS in JS)
  • Taking the advantage of React and Redux dev tools for better debugging
  • Taking the advantage of immutable.js library to follow the immutable state principle
  • Unit test React components, redux using Jest, Enzyme and sinon

Prerequisites

  • Substantial prior experience developing with JavaScript
  • It is recommended to have attended to the following course: Introduction to JavaScript

Course content

Module 1: ES6 Primer

  • History of Javascript
  • What is ES6
  • A word on bable
  • Block scope, let & const
  • Template literals
  • Arrow functions
  • Spread and Rest operators
  • Object literal improvements
  • Destructuring
  • Classes
  • Inheritance
  • Static properties and methods
  • Promises
  • Iterators and Iterables
  • Generators
  • Modules
  • Set and Map

Module 2: Introduction to React

  • What is React?
  • Why React?
  • React version history
  • React 16 vs React 15
  • Just React – Hello World
  • Using create-react-app
  • Anatomy of react project
  • Running the app
  • Debugging first react app

Module 3: Templating using JSX

  • Working with React.createElement
  • Expressions
  • Using logical operators
  • Specifying attributes
  • Specifying children

Module 4: It’s all about components

  • Significance of component architecture
  • Types of components
  • Functional
  • Class based
  • Pure
  • Component Composition

Module 5: Working with state and props

  • What is state and it significance
  • Read state and set state
  • Passing data to component using props
  • Validating props using propTypes
  • Supplying default values to props using defaultProps

Module 6: Rendering lists

  • Using React key prop
  • Using map function to iterate on arrays to generate elements

Module 7: Event handling in React

  • Understanding React event system
  • Understanding Synthetic event
  • Passing arguments to event handlers

Module 8: Understand component lifecycle

  • Understand component lifecycle

Module 9: Working with forms

  • Controlled components
  • Uncontrolled components
  • Understand the significance to defaultValue prop
  • Using react ref prop to get access to DOM element

Module 10: Routing with react router

  • Setting up react router
  • Understand routing in single page applications
  • Working with BrowserRouter and HashRouter components
  • Configuring route with Route component
  • Using Switch component to define routing rules
  • Making routes dynamic using route params
  • Working with nested routes
  • Navigating to pages using Link and NavLink component
  • Redirect routes using RedirectComponent
  • Using Prompt component to get consent of user for navigation
  • Path less Route to handle failed matches

Module 11: Just Redux

  • What is redux
  • Why redux
  • Redux principles
  • Install and setup redux
  • Creating actions, reducer and store

Module 12: Immutable.js for immutable datastructures

  • What is Immutable.js?
  • Immutable collections
  • Lists
  • Maps
  • Sets

Module 13: React Redux

  • What is React Redux
  • Why React Redux
  • Install and setup
  • Presentational vs Container components
  • Understand high order component
  • Understanding mapStateToProps and mapDispatchtToProps usage

Module 14: Unit testing in react

  • Understand the significance of unit testing
  • Understand unit testing jargon and tools

Documentation

  • Digital courseware included

Lab / Exercises

  • Lab 1: ES6 Primer
  • Lab 2: Introduction to React
  • Lab 3: Templating using JSX
  • Lab 4: It’s all about components
  • Lab 5: Working with state and props
  • Lab 6: Rendering lists
  • Lab 7: Event handling in React
  • Lab 8: Understand component lifecycle
  • Lab 9: Working with forms
  • Lab 10: Routing with react router
  • Lab 11: Just Redux
  • Lab 12: Immutable.js for immutable datastructures
  • Lab 13: React Redux
  • Lab 14: Unit testing in react

Complementary courses

Temptraining funding

ITTA is a partner of Temptraining, the continuing education fund for temporary workers. This training fund can subsidize continuing education for anyone who works for an employer subject to the Collective Work Agreement (CCT) Rental of services.

Additional information

ReactJS Training: Master the Fundamentals and Advanced Techniques

The ReactJS training we offer allows you to develop solid coding skills with React. This JavaScript framework is essential today for creating dynamic user interfaces. From learning the basics to mastering advanced concepts like Redux and Immutable.js, our program is designed to provide you with comprehensive expertise. Whether you are a beginner or a developer looking to deepen your knowledge, this training will guide you step by step through the world of ReactJS.

Exploring JavaScript ES6

In this first module, we revisit the fundamentals of JavaScript and ES6, the most modern version of the language, which introduces essential concepts such as arrow functions and promises. You will also learn to use tools like babel to transpile your code, manipulate objects via destructuring, and understand concepts like classes and inheritance. Mastering these notions is essential before diving into React.

Introduction to ReactJS: Understanding the Basics

To start, what is ReactJS? Why choose this framework for your projects? This module not only presents the history of React but also its advantages for developing interactive applications. You will quickly learn how to use create-react-app to set up your first application and explore its anatomy, from component creation to debugging.

Templating with JSX: Simplify Your Code

One of ReactJS’s strengths is its templating language, JSX. In this module, you will discover how JSX allows you to write JavaScript code that resembles HTML, making development more intuitive. Whether you use logical operators or specify attributes, this module shows you how to optimize your component writing and improve your code’s readability.

Component Architecture: The Key to a High-Performance Application

With ReactJS, everything revolves around components. A well-thought-out architecture ensures the stability and flexibility of your applications. You will discover different types of components such as functional components, class components, or even pure components, and learn how to optimally compose them. This section is crucial for any ReactJS developer who wants to code modular and reusable components.

State and Props Management: Master Component Communication

Understanding state management in ReactJS is essential for creating dynamic applications. You will learn how to manipulate your component’s state and pass it through props. This module will also teach you the importance of propTypes to validate the data types you pass, ensuring the robustness of your code.

Event Handling and Lifecycle: Interact with Your Users

In this module, we cover event handling in ReactJS. Thanks to React’s event system, you will learn to trigger actions in response to user interaction. You will also understand how to manage the component lifecycle, a key skill to optimize the behavior and performance of your applications, especially when using modern hooks.

Working with Redux: Centralized State Management

For large-scale applications, managing state efficiently becomes a challenge. That’s where Redux comes in. You will learn why to use Redux to centralize your application’s state, how to configure the store, and write actions and reducers. By combining React and Redux, you will be able to develop more robust and maintainable applications.

Learning to Test ReactJS Applications

A well-developed application must be properly tested. We teach you the basics of unit testing in ReactJS, a must to ensure the quality and reliability of your code. You will learn to write effective tests that verify components individually and ensure the overall functionality of your projects.

Using Advanced Modules with Immutable.js and React Redux

In addition to Redux, we introduce Immutable.js to manage immutable data structures, crucial for avoiding errors in large applications. This module allows you to easily manipulate immutable collections like Sets or Maps.

Why Take This ReactJS Training?

Learning to code with ReactJS is an investment for anyone looking to work in web development. With our training, you will not only master the basics, but also become capable of building high-performance, maintainable applications.
In short, this comprehensive training will enable you to code ReactJS with confidence and adapt to the demands of the job market. The concepts learned are directly applicable to real projects, giving you a competitive edge in the industry.

Prix de l'inscription
CHF 2'150.-
Inclus dans ce cours
  • Training provided by an industry expert
  • Digital documentation and materials
  • Achievement badge
Mois actuel

mer27Nov(Nov 27)09:00ven29(Nov 29)17:00VirtuelVirtual Etiquettes de sessionREACTJS

mer27Nov(Nov 27)09:00ven29(Nov 29)17:00Lausanne, Avenue Mon repos 24, 1005 Lausanne Etiquettes de sessionREACTJS

mer11Déc(Déc 11)09:00ven13(Déc 13)17:00VirtuelConfirméVirtual Etiquettes de sessionREACTJS

mer11Déc(Déc 11)09:00ven13(Déc 13)17:00Genève, Route des Jeunes 35, 1227 CarougeConfirmé Etiquettes de sessionREACTJS

lun06Jan(Jan 6)09:00mer08(Jan 8)17:00VirtuelVirtual Etiquettes de sessionREACTJS

lun06Jan(Jan 6)09:00mer08(Jan 8)17:00Genève, Route des Jeunes 35, 1227 Carouge Etiquettes de sessionREACTJS

mer05Fév(Fév 5)09:00ven07(Fév 7)17:00VirtuelVirtual Etiquettes de sessionREACTJS

mer05Fév(Fév 5)09:00ven07(Fév 7)17:00Lausanne, Avenue Mon repos 24, 1005 Lausanne Etiquettes de sessionREACTJS

mer12Mar(Mar 12)09:00ven14(Mar 14)17:00VirtuelVirtual Etiquettes de sessionREACTJS

mer12Mar(Mar 12)09:00ven14(Mar 14)17:00Genève, Route des Jeunes 35, 1227 Carouge Etiquettes de sessionREACTJS

lun14Avr(Avr 14)09:00mer16(Avr 16)17:00VirtuelVirtual Etiquettes de sessionREACTJS

lun14Avr(Avr 14)09:00mer16(Avr 16)17:00Lausanne, Avenue Mon repos 24, 1005 Lausanne Etiquettes de sessionREACTJS

mer21Mai(Mai 21)09:00ven23(Mai 23)17:00VirtuelVirtual Etiquettes de sessionREACTJS

mer21Mai(Mai 21)09:00ven23(Mai 23)17:00Genève, Route des Jeunes 35, 1227 Carouge Etiquettes de sessionREACTJS

mer25Juin(Juin 25)09:00ven27(Juin 27)17:00VirtuelVirtual Etiquettes de sessionREACTJS

mer25Juin(Juin 25)09:00ven27(Juin 27)17:00Lausanne, Avenue Mon repos 24, 1005 Lausanne Etiquettes de sessionREACTJS

lun04Aoû(Aoû 4)09:00mer06(Aoû 6)17:00VirtuelVirtual Etiquettes de sessionREACTJS

lun04Aoû(Aoû 4)09:00mer06(Aoû 6)17:00Genève, Route des Jeunes 35, 1227 Carouge Etiquettes de sessionREACTJS

mer03Sep(Sep 3)09:00ven05(Sep 5)17:00VirtuelVirtual Etiquettes de sessionREACTJS

mer03Sep(Sep 3)09:00ven05(Sep 5)17:00Lausanne, Avenue Mon repos 24, 1005 Lausanne Etiquettes de sessionREACTJS

mer08Oct(Oct 8)09:00ven10(Oct 10)17:00VirtuelVirtual Etiquettes de sessionREACTJS

mer08Oct(Oct 8)09:00ven10(Oct 10)17:00Genève, Route des Jeunes 35, 1227 Carouge Etiquettes de sessionREACTJS

mer12Nov(Nov 12)09:00ven14(Nov 14)17:00VirtuelVirtual Etiquettes de sessionREACTJS

mer12Nov(Nov 12)09:00ven14(Nov 14)17:00Lausanne, Avenue Mon repos 24, 1005 Lausanne Etiquettes de sessionREACTJS

mer17Déc(Déc 17)09:00ven19(Déc 19)17:00VirtuelVirtual Etiquettes de sessionREACTJS

mer17Déc(Déc 17)09:00ven19(Déc 19)17:00Genève, Route des Jeunes 35, 1227 Carouge Etiquettes de sessionREACTJS

Contact

ITTA
Route des jeunes 35
1227 Carouge, Suisse

Opening hours

Monday to Friday
8:30 AM to 6:00 PM
Tel. 058 307 73 00

Contact-us

ITTA
Route des jeunes 35
1227 Carouge, Suisse

Make a request

Contact

ITTA
Route des jeunes 35
1227 Carouge, Suisse

Opening hours

Monday to Friday, from 8:30 am to 06:00 pm.

Contact us

Your request