Introduction to MobX and React

hey how's everyone doing in this video we're going to be going over a quick demo of basically how to get started with mob X what it is how it works and we're going to build a complete app in about 25 minutes it's going to be pretty simple but it should give you a good introduction of how to get up and running so for those who don't know what mob X is it's I would say an alternative to well first of all to store and manage the state of your react app in this case we're going to be talking about and I guess you would say that it's it's in competition with or it does the same thing as redux or just simply using set state in inside react components so what we're going to do to get started is we're going to build a new Creary act app so we'll type create react app and we're going to be doing something called a called The Birdcage I'm just going to build an app that we can enter some birds into our store and display them something nice and simple so once we go through setting up react we'll just let this thing finish lysa take his time somehow there's 19,000 dependencies great so we've got our create react app set up so we'll go into the bird cage folder and we'll pop open atom so at this point we've got our typical create react app boilerplate so we can start this thing by telling it to yarn start pop open the website and we'll see that we have a simple create react app going on perfect alright so the first thing we're going to do is something that you don't always need to when you're just building a small app but we want to eject from crate react app so we'll talk about what that is and then why so if you look at your dependencies in your package JSON file you'll see that we've got one of them being reactors this sort of gives you everything to do with all the web pack configuration bobble all of the different scripts to build your code and to start your server and all of that stuff and we're going to basically eject from that and I'll show you what happens when you do that so we're going to run this eject command here so we'll stop our server and we'll run Jack yes we do cool so if you come back and look at this exact same package JSON file you'll see that now we have a whole bunch of different dependencies babble yes lint we got some web pack stuff down here and our scripts look a little bit different over here you'll see that we've got a config folder with all of our web pack config and that's basically by ejecting it brings in all of the dependencies so that we've got a bit more control over them so why would we want to do that the reason for this and with is because with mob X we want to be able to use something called decorators and decorators if you haven't seen them before you basically can put something like this an @ symbol with the name of the decorator in front of your function and what that does is it decorates where it wraps your function with additional functionality so it sort of puts your function inside another one so that it can do different things sort of before after calling your actual code and this makes working with mob ex a lot easier so to do that we're going to install a babel plugin and i always forget the name of it because it's super long i'll copy that and then talk about it so we'll come down here and we're going to add this just as a regular dependency so we're going to say yarn add paste that in and it's babel plugin transform decorators legacy called legacy but then the truth is that it's quite new and it's not part of normal javascript yet so we want to bring that in we're going to add that shouldn't take too long great and now we're going to going to copy something else now that we have that plugin installed we can come and look for the sometimes there's a file here called babel RC but in this case it's right here in the package.json we're going to go down to the babel section of it and we're going to add a new one called plugins we'll do an array of them and we'll just paste this in transform decorators legacy so by doing those two by installing that plug-in and then adding this transform decorators legacy plugin we can now use decorators and as we'll see later it will make working with mob back a lot easier so we're done that step moving on we want to install mob x itself so we'll do another yarn add and we're going to install a mob ax react and maybe we'll also add Malbec just add them both in there so that we know we've got access to the main mob X but also mob X react I don't know if this is entirely necessary because I think it comes with mob X react but we'll do it for good measure so if you come up you'll see that we've got mob X and react in here now so now we can start working with with it so what we're going to do is we're going to start up our react app same command yarn run start or yarn start and we're going to wait till this loads and then we're going to start adding mob back to our react app we'll close Tigers go JSON it's not needed anymore so we're going to be doing it working in the source folder and the first thing we'll do and what I like to do is to create a new folder where we're going to put our stores so the one difference between redux and mob x is that in redux you you stick with one I was a massive store that can be broken into being handled by different producers but in mob X you can have different stores where they sort of each specialize in handling the state for one piece of the application it's up to you to divide it up how you think success but for this demo we're just going to create one store what we're going to do is we're going to new file and we'll just call this the bird store since we're making an app of those birds left jf so the first thing we're going to want to do is import some dependencies into our store so we are going to import three things observable action and compute it and these will all come from Baalbek himself next thing we're going to do is we're going to build a class and we'll call up class the birds to us and it doesn't need to extend any other classes it's just a straight-up class and what we'll do is we're going to fill in this class with the details needed to run our store sometimes what I like to do is just get the export out of the way first and we're going to do is a little bit different you might be tempted to export the class itself like this where you could have even written export default class word store up here but we're not going to do that here and I'll talk about why in a sec what we're going to do is we're going to create a variable called store and we will create a new bird store instance and then we will export the instance of our store so export defaults store the reason we're doing this is because across our entire application we don't want many copies of the same store we want a single bird store so by exporting the instance of it we know that whoever imports it into other files will be dealing with the the one instance of the bird store so the same data across the entire application so our bird store is going to be made up of three things the three things we imported up here observable action and computed so we'll talk about what observable is and we're going to be using the decorator that we set up in a preview step we're going to say observable and we'll just save birds equals empty array so basically anything that's observable these are the properties or the data that you want to keep track of so in this case we've got a property called birds and it's going to be initialized to an empty array next and there can be multiple of these depending which different properties you need to keep track of the next thing we're going to work with is an action an action is essentially a function where you change the value of the property you're observing so we will create an action and it's going to be called we'll just call it add bird and it's going to be equal to an arrow phone that accepts a bird so then what we're going to do inside of this advert function we are going to take our bird and push it on to the birds array so we do that by saying this got birds dot push and we'll push that bird on and that's it so one difference between mob x and redux is that there's no sort of two places actions and reducers where the action returns or dispatches a piece of data that gets handled by the reducer which updates the state none of that we've just got a function here that can directly interact with our property above all so it it doesn't need to be immutable under the scenes I believe it is immutable when we put when we say that this property is it's observable it sort of wraps our array with a with a special type of array that I think keeps track of the different changes you make to it but we don't really need to worry ourselves about that we can just treat it like a normal array mutated by pushing on a new bird twist next thing we're going to do is we're going to use a computed property so we'll say computed and believe we actually computed yet and we will say that we want this to give us the bird count so it's a function hopefully I didn't write this wrong that data will give me an error and I'll fix it later and what this computed function is going to do is it's going to return basically how many birds we have in the array so this dubbers dot size so what is a computed function basically it's whenever we want to sort of work working with our data up here our bird's observable property we want to maybe filter it or do some sort of calculation based on it maybe you've got a shopping card you want to count up what's the total cost of it anytime you want to access the data and perform some sort of calculation on it and you want this to be reflected in real time with the component that's displaying it I like to sort of think about this as if we go into Google Drive and create a new spreadsheet so think about each cell like the data that we're observing so we'll put five and this one and ten and this one and in this third cell here see we're going to say that we want it to be a sum of a1 plus b1 great so we got 15 here and any time of the underlying value changes it instantly is reflected in this third cell that's observing or reacting to the changes so that's sort of what a computed property is like so now that we've got our store we've imported the ability to have observable properties keep track of the data in our store actions which modify the data computed which sort of can perform calculations or filter it in some way we're good to start using it so what we're going to do next is we're going to go into the index file and in create react app this is sort of the entry point and it's where we take our app component and we rendered inside of the root Dom node and what we're going to do is we're going to import something called provider which comes from mob X react and I'll talk about what provider is in sec we're going to do is we're just going to say we'll create a variable called root and in here we will have our provider which wraps our app and this will probably be familiar if you've been working with redux it's got the idea of a provider as well so now we're not going to render our app but we're going to render there's a route that we just created above we're not done yet what we're going to do is we are going to first import our store so we'll import the bird store from stores bird store and then we will pass it as a prop to the provider so a bird store equals bird store so by doing this by wrapping the provider around our app we have access to any of the stores that we have up here in the provider so it gives our components and it doesn't just need to be direct children like app it can be children of app children of children but it allows us to access our school in a nice and easy way so if we do that we come back here up told you I screwed it up so computed let me just come back and look at my demo that I built earlier my apologies computed up so you can't do the equals like you did for the reaction here I'll fix it and then maybe something to watch out when you're building your own so you get rid of the arrow function there you go in the highlighting text itself so you're probably screaming at me the whole time that I screwed it up but uh it's nice to see see my mistakes so we got a computed get bird count which returns the size of the birds how many are in the array we loaded now our app is working again great so we're actually done in this index file here and what we're going to do is move into the app component I'm just going to clean this up a bit we don't need an SVG or some CSS and I'm going to rip out all of this HTML here so what we're going to be doing is we're going to build a simple form that allows us to enter birds or yet first and we'll add them to our our array of birds in the store and we'll display them below and along with a count of how many birds bf so what we're going to do first is import two things from mob x react so the things we're going to import are inject and observer from mob acts yeah we'll talk about what those are in a sec so above our class we're going to use our decorators again to decorate our class with these two pieces of functionality so we're going to say that we want to inject into this app the bird store and it's no coincidence that it looks the same as what we have over here in the provider that's this is the reason why we can inject the bird store into our app here and then below we're going to say that this component is an observer and what that does it basically watches our store for for when the data changes to force it to re-render to rerender our component so now that we have that it's blank now because I deleted things but we're good to go before we even get in here if we inspect and look at our react dev tool that it make this a little bigger cool so if we go look we've got our provider which has the bird store and then you'll see that we've got a component that we didn't create this was created with the decorator inject so we're injecting app with our bird store we go in here we've got the app we look over to the right you can see that we're passing the bird store as a prop into our app so that's not something sort of we did ourselves that's done when we injected this app with the bird store so the way it injects it is it passes your store of the profit so given that it's a prop I'm going to extract it or take it out of the props for easier access so we'll say the bird store equals v crops so that would be the same as saying bird store equals this crop stop bird store but it's new es6 way of accessing data from an object so now that we have our bird store we can start using it so what we're going to do is we're going to create an h2 and we're going to say you have some number of birds as our h2 so here we can embed our bird store dot and we can use our computed bird count Oh bird count awesome and you'll notice that I don't use parentheses here and that's because it's a get an access err you can treat it like is if it was a for a property of the bird store so if we load it we have no birds in our bird store so you would expect it to say you have zero bird and it doesn't so we got to figure out why maybe I'm wrong nope not wrong it returns the birds dot length there we go sorry too much been doing Ruby during the day so I got messed up there so now we have zero birds in our bird store not size its length moving on we've got our h2 that accesses our computed property and next thing we need to do is if we need a forum to be able to get some birds into our bird store so we'll create a forum we'll just get rid of this action here we'll come back to that in a sec and what we're going to do is inside of here we'll have a an input and it will be typed text they will put a placeholder enter bird and we need to basically give a way to reference it later on in a function so we're going to add a ref property which takes an input club physically takes the element from here whatever element it is but I like to match this here so take the input and we'll put it into a into a class level property we'll call it this dot with this aid bird equal to the input great so we load it we've got our enter bird here and then we're just going to put a button add bird great looking great what a beautiful application we're building so when you add a bird and you submit this we need a way to handle the form submission so to do that we will add a an on submit action handler here and what we'll do is we'll take the event and we'll just pass it to a to a new function we're going to create called handle submission or handle submit that's going to take the heat so let's come up here we need to create this function that we've called so we will say handle submit is an arrow function that receives an e so the first thing we're going to do is we're going to prevent the default of this event so given that the event is a form submission we're basically going to stop the form from submitting then what we can do is we need to access the value of this input down here so the way we do that is we use the reference to it that we set up so what we will do and as a little demo I haven't tried this so hopefully it works but if we come and we find our input or we'll do our app we come into the console here believe you can type dollar sign R yep to access the component that you've highlighted and if we access the bird what you're going to see is that we now have a reference to this input here so then we could get the value of it in this case it's blank but we do chicken we can now see that we have chicken here so that's that's one way to sort of use this console to help you with your development so we'll do is we'll put that value into a variable so we'll just say bird is this dot 4 dot value and now that we have this value we want to add it to our store so we can't use those birds for reference here because it's in a different function so for this case let's just access it directly this stuff props up bud store and then we want to call the action so if you recall here we created our advert action which receives the bird so will say the bird store dot ad bird and will pass the bird to it next just so that you can continue adding other birds we're going to set the value back to we'll just do an empty string here so that you can enter the next bird all right so let's come here and let's enter chicken oh you can see we have one bird now in our bird store and if we look for our app we access the props here we can look at the details of our bird store so we've got our adverb function birds so that's the property that we're observing notice it's type isn't a normal array it's an observable array so that's when we wrap that add observer or add observable I believe this yes @ observable around our bird's property it converted it to an observable array where the first value in here is chickens the thing we just entered so it needs to be working well so far it cleared out our form so the next thing we want to do is display the birds in our bird store will just display them in a simple ul and in here we are going to embed a value and the thing we're going to embed is we're going to map the birds in our bird store so we'll just say bird store that bird stuff map and as we map it each of them will just call a bird that goes to an arrow function and if I actually switch it up to parenthesis I don't even need to do the return so now inside of here we're going to create an Li for each of the birds we're mapping and in our Li we will just simply output our bird now anytime you map an array in that complains unless you add a key property here so we could just use the name of the bird alternatively you could up the parentheses here and work with the index of each of the burbs birds we're mapping but in this case we'll just use the bird itself as the key doesn't really matter here so just to recap this we've got a ul we're inside we want to create an Li for each of the birds in our bird store so to do that we embed these curlies here bird store and we access our bird's observable properties we're going to map each of the values and as we're mapping them we're going to take the bird which is just a string the name of the bird and we're going to produce an Li for each of them we're going to map from a string to the Li the Li has a key which is just the value of the bird and inside the Li we put the bird in here so if we come back here we can add a chicken we can add a parakeet no clues you spell that right a bluejay cetera and it's our computer property is ticking up correctly our form is adding the birds to our bird store and the birds property and then we're showing them in the UL below mapping all of the values of our store so here pretty easily we went in however long that was 2025 minutes from nothing to create react up we installed the babel legacy transform decorators plugin which was where the plugin transformed decorators legacy we added our babel plugin given that we could install ma Bex and create our store which has observable properties actions would mutate the observable properties and computed functions or getters that for armed calculations or filtering on the data that you're observing and then we exported an instance of this store we went to our index file we wrapped our main component here with the provider now if you're using a react router or something like that you can just put the provider around your react router and then what we did is we added a plot of the store that we just created in the other file what that gave us is the ability to come to our component and using inject and observer we were able to inject the bird store into our component as a prop and then we were able to say that it is an observer which allows it to react for rerender to the changes to the observable or computed properties we came into our render function and we grabbed the reference to the bird store first thing we did in our h2 here was to use the computed property to say how many birds we have we created a form which allows the user to enter a bird and deal with the form submission what that did was prevent the default form submission keep event grab the value of the input and passed it to our action of the bird store then reset the form then we came down here we mapped all of the values all of our birds and produced a list of them here and that was the intro to mob X going from 0 to a working mom ever set up in about 25 minutes hope you enjoyed it and I hope you are having a fantastic day take care

Channel: Leigh Halliday

Views: 56,338

Rating: 4.8826866 out of 5

Keywords: react, mobx, javascript, es6, yarn, redux

Id: Dp75-DnGFrU

Length: 31min 28sec (1888 seconds)

Published: Thu Jul 13 2017