Overview
React is a JavaScript library for building user interfaces. MobX is a library for managing state in React applications.
This instructor-led, live training (online or onsite) is aimed at developers who wish to use MobX in their React applications to more effectively manage state.
By the end of this training, participants will be able to:
- Set up MobX in React.
- Understand the uses cases for MobX, as compared to Redux (e.g., MobX’s “classical paradigm” vs Redux’s “functional paradigm”).
- Use MobX as an advanced state layer for React applications.
Format of the Course
- Interactive lecture and discussion.
- Lots of exercises and practice.
- Hands-on implementation in a live-lab environment.
Course Customization Options
- To request a customized training for this course, please contact us to arrange.
Requirements
- React programming experience
Audience
- Developers
Course Outline
Introduction
- MobX vs Redux vs Relay
Understanding State Management
- How React handles local state
- How Redux manages state
- How MobX manages state
Getting Started
- Preparing the Development Environment
- Installing and Configuring MobX
Building an Application
- Overview of the component architecture
- Creating a React Application (Components, Element, JSX, etc.)
Working with React Component State
- Initializing and updating state
- Working with forms
Implementing a MobX Data Store
- Setting up the data store
- Passing data to components
- Listing out contents of data store
Managing Changes to Data
- Adding data to store
- Notifying React of the change in data state
Updating the View
- Declaring observable data
- Updating the view
Improving DataFlow
- Modifying state data through actions
- Calling actions (avoiding unsafe data manipulation)
Working with Computed Values
- Perforing calculations on core data
Using Advanced Development Tools and Techniques
- Creating components with ES2017
- Using Babel for ES2017 and JSX
- Using WebPack for React and MobX
- Performing asynchronous actions with MobX
Testing the Application
- Creating unit tests for React components
- Choosing tools and frameworks (Jest, Enzyme, TestUtils, etc.)
- Creating unit tests for MobX stores
- Debugging the Application
Deploying the Application
- Tooling and automation
- Implementing Continuous Integration (CI)
Troubleshooting
Summary and Conclusion