MobX tutorial #1 – MobX + React is AWESOME HD 2017 [w/ subs]



00:00:00 – which is a fun and I do mean fun and
00:00:02 – simple simple simple way to put a data
00:00:05 – layer to your react application because
00:00:08 – after all react really shines the
00:00:09 – brightest when it is nothing really more
00:00:12 – than a functional reactive UI / view
00:00:15 – layer to all the data in the state of
00:00:17 – your application which lives outside of
00:00:19 – react so mob X plus react and you
00:00:22 – basically have a framework and it's
00:00:24 – extremely simple again extremely fun to
00:00:27 – use the work that it takes to get
00:00:28 – started with something like Redux or
00:00:30 – relay or even flux is sometimes daunting
00:00:32 – and unnecessary I didn't realize just
00:00:35 – how unnecessary it was until learning
00:00:38 – mob X so we're just going to have fun
00:00:39 – with this here's what we have going on
00:00:41 – so far as we're just rendering a to-do
00:00:42 – list component and that to do list
00:00:44 – components just saying mob X that's all
00:00:47 – that's going on now to work with mob X
00:00:49 – you're going to need to babble
00:00:50 – transformers well you won't need them
00:00:52 – you can do it without them but it's a
00:00:53 – lot easier and much more enjoyable and
00:00:56 – that's decorators which is called
00:00:58 – decorators legacy since the spec is
00:01:00 – potentially still in flux but it's safe
00:01:03 – to use a transformer no problem and then
00:01:06 – you'll want to do transform class
00:01:07 – properties as well you'll also want to
00:01:10 – be using react 15 or newer so let's go
00:01:13 – ahead and install mob X and mob X react
00:01:17 – so those are installing and once those
00:01:21 – are done I can just do NPM start again
00:01:23 – to get my hot reloading back up and
00:01:25 – going okay that's running my application
00:01:29 – is hot reloading again so I have mob ex
00:01:31 – installed let's go ahead and start
00:01:33 – around with our actual data layer so we
00:01:36 – can have some fun with this I'm going to
00:01:37 – go to main Jas and just start importing
00:01:39 – Nats that's import store from to do
00:01:44 – store so you see we have main jas to do
00:01:49 – list j/s which is our actual to do this
00:01:51 – component and that to do store i'm going
00:01:53 – to go ahead and close that now to give
00:01:54 – us a little bit more screen space and
00:01:56 – let's go ahead open up this to do store
00:01:59 – and have some fun with mob x the one
00:02:01 – thing we need to import to get started
00:02:02 – is observable from mob x now if we were
00:02:08 – going to go the simplest not necessarily
00:02:10 – the most stable but the simplest route
00:02:12 – with data
00:02:13 – we do an object literal we do something
00:02:15 – like store equals and now we'd say oh
00:02:18 – we've got our two dues are two dues are
00:02:21 – an array and then we might do create to
00:02:22 – do this is what we did back in the day
00:02:24 – right so we have this creates a new
00:02:26 – method that would push something onto
00:02:28 – the to do state we couldn't really react
00:02:30 – to it from the UI we couldn't really
00:02:33 – notice when changes happened we had to
00:02:35 – build all that in manually but it sure
00:02:36 – was a simple way to code out a store
00:02:38 – with mob X we basically get to code in
00:02:41 – the same manner we just get all those
00:02:44 – reactive functional features and it's
00:02:46 – much more enjoyable and much more
00:02:48 – powerful so we're basically going to
00:02:50 – make a class there's class to do store
00:02:55 – and we can go to do's equals that except
00:02:58 – for we're simply going to make them
00:02:59 – observable now let's say we also want to
00:03:03 – have a filter so we can filter these two
00:03:04 – dues again observable and there's no
00:03:08 – filter on there right now let's go ahead
00:03:09 – punch in some to do is let's say we're
00:03:11 – going to get milk we're going to buy
00:03:13 – milk and we're going to buy eggs two
00:03:16 – things we're going to buy very important
00:03:18 – to have and then let's say when you
00:03:20 – actually require this at export say to
00:03:23 – do store severe to do severe store
00:03:25 – equals new to do store and that's what
00:03:28 – we're going to export as defaults and
00:03:30 – then I did it this way so i can actually
00:03:34 – expose it as window dot store as well
00:03:36 – and play around with it in the terminal
00:03:39 – completely unnecessary except for
00:03:41 – debugging so now stores available here
00:03:43 – in the terminal and if i want to see
00:03:46 – that my changes are actually reacting i
00:03:49 – want to import auto run this is
00:03:52 – something we're just going to do for
00:03:53 – messing around in debugging here but I
00:03:55 – can do auto run and give it a function
00:03:58 – and then this will run whenever the
00:04:00 – store changes so I can console log let's
00:04:03 – see store dot filter and I can also
00:04:06 – console.log store got to do's 0 so this
00:04:13 – will run the first time because it
00:04:14 – changed we have no filter which is right
00:04:16 – there I know some people with no filter
00:04:18 – anyway and then we can also buy milk and
00:04:21 – you remember I expose store to window
00:04:23 – dot store so I can actually change this
00:04:25 – and we'll see that autorun fire
00:04:27 – let's say store filter equals milk only
00:04:30 – things that say milk ah now my filter
00:04:32 – has changed and store to do zero is
00:04:35 – still buy milk well let's change the to
00:04:37 – do equals x cheese we're going to go
00:04:42 – with a different dairy product there we
00:04:46 – go now reloaded the filter is milk and
00:04:48 – store to do 0 is by cheese if I were
00:04:51 – just to look at store dot to dues it's
00:04:54 – not just in a right it's an observable
00:04:56 – array when you change things it's
00:04:58 – actually firing off all these change
00:05:00 – events or if I were to look at store to
00:05:02 – do I'm sorry store filter you can see
00:05:06 – that it looks like it's just a simple
00:05:08 – string how are they firing off all this
00:05:10 – change events they're using getters and
00:05:12 – setters so you can look up es6 getters
00:05:15 – and setters if you want to learn more
00:05:17 – about the technology behind mob x now
00:05:19 – for those of you who are familiar with
00:05:21 – react you're probably already thinking
00:05:23 – your mind oh my goodness i see how this
00:05:25 – works i simply instead of doing an
00:05:27 – autorun have react render whenever
00:05:29 – something changes and that's exactly
00:05:30 – what we're going to do let's go ahead
00:05:32 – and get rid of this autorun here and
00:05:35 – we're going to automatically update when
00:05:37 – things change so let's just pass this in
00:05:38 – as a prop that's there and let's go to
00:05:44 – our to do list here and then all we have
00:05:46 – to do in order to be able to work with
00:05:48 – this is we just need to bring in from
00:05:52 – mob x reacts observer and then we just
00:05:58 – add the observer decorator to our
00:06:00 – components now that we've added that
00:06:03 – observer decorator we can go ahead and
00:06:05 – print any values straight here in our
00:06:07 – render method of our components so i can
00:06:09 – go this dot props store to dues 0 let's
00:06:13 – look at 20 and there we go buy milk hmm
00:06:17 – what if I want to change that remember
00:06:18 – I'm still setting store as Windows Store
00:06:21 – so i can play


Video Url:
http://youtu.be/xnABRgSY6r8

Comments

comments