Managing React State with MobX Training Course

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

Leave a Reply

Your email address will not be published. Required fields are marked *