Course outline for React, Redux, MobX
Pre-requisites for learning React, Redux, MobX
- Participants must have good knowledge of JavaScript
- Functional programming concepts like closures and the behavior of the this keyword
- Object oriented programming concepts like Constructor functions and prototypes
- ES6 basic concepts especially arrow functions, classes, let, const, module support, template strings.
- A working knowledge of Node.js is also essential to this course
Lab Setup
Hardware Configuration
Participants must have access to a system with the following hardware configuration:
- 4GB of free RAM, 20GB of free disk space and full network connectivity
Software configuration
- Ubuntu 20.04/22.04 Desktop Edition (sudo/root access required)
- Firefox and Chrome browsers
Duration
2-5 days
Training Mode
Online training for React, Redux, MobX
We provide:
- Instructor led live training
- Self-paced learning with access to expert coaches
- 24x7 access to cloud labs with end to end working examples
All jnaapti sessions are 100% hands-on. All our instructors are engineers by heart. Activities are derived from real-life problems faced by our expert faculty. Self-paced hands-on sessions are delivered via Virtual Coach.
Classroom training for React, Redux, MobX
Classroom sessions are conducted in client locations in:
- Bengaluru
- Chennai
- Hyderabad
- Mumbai
- Delhi/Gurgaon/NCR
Note: Classroom training is for corporate clients only
Detailed Course Outline for React, Redux, MobX
Introduction
- Functions as first class objects
- ES6 Concepts
- Pure functions
- Webpack
Setting up the Dev environment
- Babel and Webpack – the problems they solve
- Webpack HMR
- Visual Studio Code, Emmet and other React Plugins
- React Developer Tools Chrome Extension
- Setting up your Component Development Environment - Cosmos, Storybook
Introduction to React
- Evolution of client-side MVC and component based architectures
- React Hello World (in plain HTML and JS)
- Hello World with the create-react-app
- Introduction to JSX
- First encounter with Component based architecture
- Composing Components
- Props and States
- Component life cycle
- Lists and keys
- Handling events
- Forms
- Virtual DOM
Getting into depth
- Type checking with proptypes
- Controlled components
- Parent to child and child to parent communication
- State management challenges, Observer pattern and Event Emitters
- Communication across the component hierarchy
- refs and context
Patterns
- Mixin pattern
- Container and Presentation Components
- Higher Order Components
- Composition vs Inheritance and comparison of paradigms
- Anti-patterns
Advanced React Concepts
- React Hooks
- React Fragments
- Comparison of React Components with Web Components
- Integrating with Web Components
- React Portal
Integrating 3rd party components
- React-select case study
- React data grid
- Material UI
React Router
- Introduction to Routing and History APIs
- Introduction to React Router
- URL parameters
- Redirects
- Link component
- history manipulation
State management
- Need for state management
- Redux (without React)
- Flux architecture
- Actions and Reducers
- React with Redux
- Mobx
- Redux Thunk
- Comparison of different state management solutions
Server-side rendering
- Gatsby - a case study
React Testing
- React Test Utilities
- Shallow rendering
- Jest
- Enzyme
- Mocha