MobX tutorial #1 - MobX + React is AWESOME @learncodeacademy

Uploaded August 2016 | Updated September 2026, 1 week ago

MobX is AWESOME. It makes React.js programming fun and it...just...works.
GET THE CODE:
github.com/learncodeacademy/react-js-tutorials/tree/master/6-mobx-react
THERE ARE 2 BRANCHES: "master" for where we end up and "start" for where we start.

MobX builds on the concept of observable values. When React observes a value, it can automatically update the UI whenever the value changes. This makes programming with MobX and Reactjs extremely simple.

All it takes to begin is to install mobx and mobx-react and make sure that you are transforming class properties and decorators in Babel.

Now, you simply add @observable to your MobX class and you've successfully built a MobX observable store.

To "observe" the store, you pass in a MobX store as a prop and you decorate your React component with the @observer decorator.

Voila...you're reacting to store changes in React.

-~-~~-~~~-~~-~-
Also watch: "Tailwind CSS - why CSS utility classes save so much time"
youtube.com/watch?v=oU5ar0dmQEY
-~-~~-~~~-~~-~-

MobX tutorial #1 - MobX + React is AWESOME

Build an HTML + CSS Layout with Flexbox in just a few lines of code

Standing Desks, Fluidstance Review & Developer Health

GITHUB ATOM - Why Atom.io will be your favorite Text Editor!

REACT FLUX TUTORIAL #10 - Flux Store Events

CSS SELECTORS MADE EASY - HTML CSS Tutorial for Beginners

$Modular Javascript - Prototypal Pattern vs Classical OOP in JS While many JS devs still use classical OOP, many have switched to the prototypal pattern for Module Inheritance and Instantiation. Heres the prototypal pattern for JS and why some devs find it simpler to use. View Classical Inheritance here: https://www.youtube.com/watch?v=sWOXYDBbz0g View the whole modular JS playlist here: https://www.youtube.com/playlist?list=PLoYCgNOIyGABs-wDaaxChu82q_xQgUb4f SOURCE CODE HERE: http://codepen.io/anon/pen/gaggvG?editors=001 Basically, when coding JS OOP with the prototypal pattern, everything is an object. You start with an object literal and, then, to inherit from it, you use Object.create(someModule) to create a child that inherits from it. var parent = {some: method}; var child = Object.create(parent); //now add new methods to the child child.newMethod = someMethod; So theres really no difference between inheritance and instantiation in the prototypal method. To create multiple children, simply: var child1 = Object.create(parent); var child2 = Object.create(parent); And there you have it! Also see the source javascript code on how to include a create method so creating is a little more seamless. -~-~~-~~~-~~-~- Also watch: Responsive Design Tutorial - Tips for making web sites look great on any device https://www.youtube.com/watch?v=fgOO9YUFlGI -~-~~-~~~-~~-~-$

How the Internet Works for Developers - Pt 1 - Overview & Frontend

Javascript Events Tutorial - How Web Developers Respond to User Input