Early Access

The newline Guide to Building a React App with MobX State Tree

In this course, we'll show you how to build a React App with MobX State Tree.

  • 5.0 / 5 (1 rating)
  • Published
  • Updated
Video Lessons

3 Videos

Course Instructor
Avatar Image

Alex Casillas

I do stuff, you might consider it magic, but it's not.

How The Course Works

01Remote

You can take the course from anywhere in the world, as long as you have a computer and an internet connection.

02Self-Paced

Learn at your own pace, whenever it's convenient for you. With no rigid schedule to worry about, you can take the course on your own terms.

03Community

Join a vibrant community of other students who are also learning with The newline Guide to Building a React App with MobX State Tree. Ask questions, get feedback and collaborate with others to take your skills to the next level.

04Structured

Learn in a cohesive fashion that's easy to follow. With a clear progression from basic principles to advanced techniques, you'll grow stronger and more skilled with each module.

Course Overview

What you will learn
  • How to structure MobX State Tree stores

  • Importance of a type-safe store

  • How to integrate MobX State Tree within your React App

  • Dealing with asynchronous flows and time travel to preserve state on networking errors

  • What problems MobX State Tree can solve

  • How to create a scalable store using MobX State Tree

In this course, we will create a complete React Application with the state management handled by MobX State Tree, a state container system that is built on MobX, a functional reactive state library.

MobX State Tree will give your application a solid structure and foundation for large-scale applications and for small applications that are expected to scale rapidly. In comparison to Redux, MobX State Tree outstands it in performance with much less boilerplate. MobX is one of the most popular Redux alternatives and it's used by companies all over the world, including Netflix, Grow, IBM, DAZN, Baidu, and more.

During this course, you'll learn:

  • Types in MobX State Tree.
  • How to create the architecture of a centralized store.
  • How to mutate the state via actions that could be asynchronous or not, depending on if we need to perform network requests to persist data into a database via GraphQL.
  • Understanding snapshots and how we can benefit from them to time-travel if a network request fails.
  • Understanding how MobX State Tree makes use of observable properties and observers.
  • Leveraging re-renders in your React Application to MobX observers for better performance optimizations.

By the end of this course, you will have the knowledge and skills that it takes to build a real-world, production-level React Application with a State Management with top-notch performance that can scale with ease.

Our students work at

  • salesforce-seeklogo.com.svgintuit-seeklogo.com.svgAdobe.svgDisney.svgheroku-seeklogo.com.svgAT_and_T.svgvmware-seeklogo.com.svgmicrosoft-seeklogo.com.svgamazon-seeklogo.com.svg

Course Syllabus and Content

Module 1

Introduction

5 Lessons 42 Seconds

Module 2

Concepts

9 Lessons 4 Minutes

Module 3

Advanced Concepts

5 Lessons

Module 4

React

3 Lessons

Module 5

Building Voyager

1 Lesson

Meet the Course Instructor

Alex Casillas

Alex Casillas

👋 Hi! I'm Alex, Senior Frontend Engineer at Toptal. I've worked many years for startups and large companies helping them build large-scale outstanding products with React, TypeScript, MobX, MobX State Tree, GraphQL, and many others, and now I'm here to pass this knowledge to you so you can deliver cutting-edge applications with the latest technology thanks to newline and this course.

Frequently Asked Questions

Who is this course for?

This course is for junior (React) developers that would like to learn about state management with one of the best tools out there, and for senior (React) developers that would like to move their state management skills to a new level of knowledge.

What if I need help?

You can ask us questions anytime through the community Discord channel (#mobx-state-tree) or by sending us a message.