Build React Apps | Getting Started With Flux (Intro) #04

Key Takeaways

Healthcare gonzo although doing welcome to a new video tutorial on the series of learning react so yeah this particular toriel we are going to jump directly into vlogs so we're gonna learn what is Fox what is very very important for any for any react developer to know about and why it is very also important for small applications so flux is kind of like a technique for react in order to make components like multiple components know about each other which means so they can exchange the data between each other let's say another like like second component which is a child component gets some kind of some kind of an effect or something like an onclick event and he wants to submit it into the main component so how to do that how to exchange the data and he wants to risk like submit or send the data into the main component so the main component can receive it and I don't know work with that or render it or something like this but with all phlox we won't be able to do that they're only using flux this also is called redox self locks and redox are not the same thing redox is a way way much more like advanced than flux flux is just for small and medium medium sized applications and like scale projects not for big projects nothing at all read access more reliable and things like this will explain redox and later on in the series as we go far but for now flux would do the job for us so as you can see I have gone and do and I draw some some kind of like an architecture of how flux and react components can interact with each other so this first one is Krissy these main react components and also there is a child one component in China two components as you know react only lets you render like a single like crude components and into the rules you can render the other children so you can render multiple components so there's this children's go to be rendered into the main react components and also the time for two components so let's say like a child one component has triggered an event so let me are like I'm working on a child - I'm seeing like the login box then I click on that and I need to submit an event now I'm logged in or I'm having the credentials like I'm having the username and the password how I can transmit this into the main react components so this is actually a way for doing that you can use a method or something but it's not that flexible so how Fox let us or make us or would be able or actually let us do that is like let the child components submits and events so he sent it to the box store then floc stores submit another event and he tells the main react components that we have received in events and he he give it to the data that he has received from the child components one or any like and other child components also we can receive and send data between the components the first component in the second component or any other components are connected to each other using the flax torso flock seeds are the baby or actually the main idea beach behind flocks is you create a store and you keep your state on this store so u-haul application states are going to be existent or it's gonna live into this sword and whenever if something change it is gonna like submitted events and the other components gonna know or listen for the this events then they're gonna just react depending on this particular state change and so on and so forth so this is how we make it a little bit more easier for us to interact between components in exchange Deana respects to play so most of us can see there's a diagram down here there's like a components in store and from the step one what do you do is trigger an event with custom Deanna so let's say company like child components one want to send to the Ellen to the main react components so he triggers an event and how he triggers is the using the flock stores black stone house gonna I'm gonna give him like a method or something to trigger that the other so he's gonna trigger this theater is gonna just jump right into the like the main react components and just remain react components gonna list her for this event and receive the DN a-- so this be I was gonna go from the checkup for this one into the flock store then from a black flux store to the main react components and so on and so forth you can you can use this for any other components or two components you want to exchange the data between back and forth or like multiple components or however you want to use it but this is like the main idea behind flux and we got components not like to go ahead and like implements that in a very basic way as you can see the higher we have been like an import from the last video tutorial we can submit or we can type and we get that immediately change and also you can increment in here where we have discussed the state now going back into our application and as you can see make sure to obviously around the MPM run watch in order to keep Rancho or watching of the files so always do that before start coding now under the render is warning what is creating new components so let's say going to be new components and I'm gonna name it for example components to or something like this or let's say like a lot logging box or something like this so we're gonna like submit at credentials and it's gonna extend from react components so here we're gonna have a constructor as always and so props and I'm just gonna call super prompts so super prompts yeah we're good to go and here we're gonna render things so let's write something like return like I don't know a div and make sure to obvious if you're using Visual Studio code to change from JavaScript the language you are using it to react JavaScript in order to make gsx available for you so yeah just run to us and you'll be good to go now under again I wanna like submit an input and do that input I wanna like let's say placeholder is going to be enter user name and in here we're going to be the time off a text now you feel you should be familiar she I'm elements works and we're gonna have another components or another import pretty much gonna have a placeholder off and your password okay and it's not gonna be taxed going to be a password or something since you wanna hide your password from thieves and for example gonna have label and HTML for it doesn't really matter okay it's just gonna give it what enter your your username and you just copy this for winning the time and ensure your password so yep or now we need to change this to password so now what we bots on behind or what is like the the main idea behind creating new components in here and doing like a login box what I want is when I talk about the use your name here and type the password then I click on the button that I'm going to just create right now is whenever you click that button is I want to submit an events or I want to get this data like the username and password all the main components on the header component over here so we want to get this data and pretty soft like a console dot log or something in this particular situation we all know about this deal and we won't be able to know about this deal illness we have created in stores so let me just create that and show you in a second how to create a store so submit for example and it's gonna be a button and they're gonna have also a BT intosh success and yeah yeah gonna be like simple as that now let's try to put on on submit so let's say you want to submit over here it's gonna accept that and on the click in here so you should already like familiar with these events and events handlers and listeners so I'm gonna call this dump on sub man and we're just gonna bind this context so here I'm gonna submit the form and we're just gonna save this into this top state so this top state and or pretty much we don't need to do that actually so just gonna save it we're gonna have this on this particular thing so also what we need is to use the reference so we're gonna just reference that so if you're not if you're not familiar with the reference is something like in the yaks actually where you can reference the this particular element so you can access it from any other method or any any other part of your class context so for the reference here you give it the the input or the elements yah to work with so just give it an import give it any name and it takes a call back as you can see here in ESX and arrow call back and here you can say this dot user name input equals M so here later on which we call this user name input we will get this particular elements so what we are doing that in order to get the DNA from this text or from this input so we can retrieve the actual user name so this like a way for storing so this like a way for storing the input or for storing HTML elements in this class context so you can access it later on on your application and yeah we're gonna access or we're gonna make that develop as well under the passwords you're gonna need them both of them so to pass input ok no we are ready to go now what we need is to submit the events so now if we try to cancel the lock this dot use your name input value and also this stop pass input don't value after we fill in something we we will be able to get the actual username and password that we have the time then but before that we need to render the login box so let me just make this also a top so ledger in order to distinguish between the components and a normal method and here we need to render it let's say I'm going to render it at the end over here so I'm just gonna call it wrong box and we are good to go so this is how you render multiple components you call it just you caught us a normal HTML element and make sure to type in the name correctly and you good to come now control s for saving and bundling everything going back and we should see something in here but we are not seeing so yeah I'm sorry let's say the take a look on the cost of the log and we are actually having nothing and yep Dom class did you mean class me yeah I did so also make sure to use the class name if you have any problems over there and yeah let's see no with the class and the class name you keep giving me that okay okay don't don't take care of this warning it does just does nothing ok heroes because you would get into you is your name getting input into your password it's not that much good thing it's not styled correctly or properly but what we can do about it is just other math class there and we can say for gosh control also for the password so also we can do this what you make it looks a little bit aful okay now enter your user name enter your placeholder enter user name into your password now we'll try to let me just repress this username pass okay submit as you can see we get here we get user name and pass so we're probably getting the data correctly now how we can exchange this and how we can take this data from from this components from the logged component back into the header components where the this is being rendered and we can just use that as an event listener so let's say we're gonna have the story over here so the story much is going to extend from the event immature an event immature is a base class of no js' which lets you immense or trigger events and add the listeners particular events so it's a standard modular for that so you don't need to install a dowel or do something this also one notice if you're not familiar with no source I like this I have a false views on my channel so go ahead and watch it before continue this series because it's gonna give you all a huge information of what actually doing over here now as I've said also we need to get the events immature so we're gonna require this from from events and the accesses events image simple as that knowledge create the store I'm gonna call it just the store simple as that I'm just gonna extend this from the event immature and extending it from the investment to allow us as I've said to emits and listen for events no I'm just gonna call we don't need a constructor or something this so not what we need is like an event to call so let's call or create a method called a net and this init method is gonna take the e username in the password so username password and um in this particular username and password gonna send them from the login box over here and we're gonna emitting events so the header component can listed for this event and receive this username and password data so how we can do that is just call this so since we are in this context were the event image will be extended format so we could call a met method which allow us to emit a brand new event and here we give it the event name let's say dear our dodge received some glass in here the second argument is the data we want to send let's say you wanna send the first thing is the username the second thing is the password then actually we can with storm of this channel for this particular event so actually we can access this a store instance so let's go ahead and create an instance of this store so I'm gonna call store and actually gonna call Lance let's say so current store something equals new sore or pretty much let's use this particular thing let's use this store with no problem so if you have like in a very large application with a lot of components you can do this trick but for now gonna have just two components so this is gonna do the job for us perfectly so we need us actually we need to add an advanced instrument for that to do that if the perfect place to do to add event listeners on the component side is added into the component will mouch method so this is like why this method exists because this is going to be cold before right just before the component is going to be rendered which means he is or the component is ready to be rendered this method is going to be cold so here we can have this event launcher and we can just call store dot on so the on method gonna allow us to listen for events and here we give it the events name so Deanna received so as you can see it's the same thing they received in here we it takes a callback so go back we're gonna use just an ESX arel callback and it takes two arguments the same thing we have passed in here the first one is the username so I'm gonna receive the data and the second one is going to be in the password now after receiving that let's say I want to set on my stage so this boxset state and we are going to set username equals the username and password equals password okay now we can get the username into this stage and we're just gonna set the stage then we can render our things so also make sure that this callback is going to be cold when after the header is going is is rendered actually to the Dom and everything is ready this callback is going to be cold because it's just gonna be registering in wait for the event to be submitted once it is submitted whenever on whatever time in like the application received that sub man think this event or this listener is gonna just trigger and call this callback and set the stage of applications so just bear that in mind this household backs an event to the student works now let's try to render links in here but try to render it before this and let me just give it again and I'm gonna say for example let's say your username and password are and I try to render them just right in here or okay let's try to use an age five and I'm gonna say this dot state don't use your name applause okay I'm just gonna concatenate shrinks so you can use it freely in here since we are and do the curly braces scope and we can say this don't states don't pass route now this should render us the this password and username and once we receive it as he using the data received now one thing we need to do is to call this init method once we receive the data so this init method should go right into the login box and into this sub map method we need to call store dot and knit so store talking as passionately user name is going to be like this don't user name input the value ends the password is going to be this dog this dogs pass input well okay now we are passing in everything should work fine now now actually there's still one single problem with our code but this won't work properly now if we go back into the other browser and try to refresh anything in here it is gonna give us Aaron no rendering at all if we go to the console and we should see mirror so we just you see the errors so as you can see we get require is not defined and that mainly because we are importing the event immature from the events and events like use require the no J's require functional to require other modules in order to make that works but it says here we are only just if go ahead into the browser again and you can tell take a look back using the file to serve our our file in here the index.html what we need to do instead is use a server to serve this files so we need to call or use some kind of server that is going to serve us these files and this juror will need to use some nodejs in the back end so no J's can can manipulate our files and compile it using webpack of course and just gonna give us or transpile the require into an ESX statement so it can be used into the browser over here so that is like every easy thing to do all you need to do a go and go ahead and install the web pack dev server so some of you might ask what I didn't do that in the first time when I started this series it is mainly because like not not a simple rehab application gonna need from you to use a server because you're gonna do a rendering on the web on the side on the cycle or client side here so this no need for this terrible illness you need to use some flax or redox or something in this particular case so as I've said a stall web pack the server and yeah just install it like this make sure to grab in the diversion let me just go back into the package of Jason as you can see the web pack dev server with 1.14 I think like the two version so there's like web pack dev server the second version which works with a web pack for which is the latest version actually I can give you an error like you need to use the CLR or something so if you get this error make sure to downgrade you to this version because this version is working pretty much fine and you can just install like this now after installing this I want to start using this actually in your code or need to start compiling your rendered ojs or updog days into the distribution for low start distribution I just think we need to compile using word pack and use our service shell under the Welcome Packet of JSON as you can see that when we have created the one edge script so under that go and edit that particular thing so here instead of what instead of using normal webpack we need to use webpack the server and let's use Mike or let's remove these quotation marks and we are good to go so make sure touch to change from web back to a black dev server and another thing is that you can go into web pack don't make stock J's which gonna represent or which actually represents our what pack configuration using literal max now especially we are having here a targets to note what we need to change it is to web in order to let it trust pound the require the require function into more ESX and function so the require will no longer exist a non coding will work fine for us from now on now everything now she works finally to save your backdoor JSON weapon got mixed on this and now run npm run watch again after stopping us of course from the first situation since we were using it by compiler finder or before that now everything you should see like a server gonna start up using webpack dev server and actually pretty much what this dev server uses no J's in the backend to do all of that so it is like come table whatsoever if you need to like put this on a production server you're gonna need to use your own server of course so now going back we need to access this link advanced like to provide us you can customize this link but it gonna do fine for us for now so we can just use it for now with no problems and wait for that so as you can see it just gonna like use some autosave and auto reload and up is updated and as you can see it give us an error in here so it telling us like the store is not defined so going back and the store and we having a couple of issues in here and it a last like the store dot on is not a function or something so if your control as we're saving again and we pretty much still getting this one let me check this for a second will extend being we getting events and require is actually so events from the advancements immature and we actually get in the store the on and store is not function and there the actually now we need to initialize this class so let me just initialize this a little bit we can call that explore with like a lowercase letter of the beginning equals new store so just create a new instance of the particular store in from that we can use the lowercase store in order to give the event works and the functional control as as you can see it still works for us for compiling we're like gsx using webpack still working pretty much fine with no problems now the fish again you can type it's like connects into this socket of j server and yep now as you can see the error has gone with no problems so it pretty much tells us that this is gonna work pretty much fun now just gonna see we get undefined undefined once we start typing let's say this time for example pinterest we stopped me and as you can see we get islam anyways in a very perfect connection so this is awesome nice can see flux is working with us and we are receiving the events then printing or like putting that into the dom and rendering it so yeah we're getting we're receiving theater from the events from in other components so if you can take a look at this we are receiving the component all the login box component just gonna let us put the username and the password then it's gonna just tour and next we're gonna go ahead and initialize this into the store so this is like our flocks or so this how pretty much actually fox works with the store so you just submit any events to it and save the other to it and it just gonna pretty much work for you very really fine so as you can see you get a store an edge which initialize and sends the username and password then from here we can emit a deer received event with passing in the username of the password ask arguments then we can add an event listener whenever we need to lister for this particular event since we have here the instance so they are received as you can see stored on here we are adding eventually for this - received particular events and we are receiving the password me using it then here we set the state which means we are we're entering and updating our state in here then if we go down over here we are using the state of username at this state or password in order to ring your things up so yeah it cool in a very cool condition I can just add on the art for making things clear and more properly or making a little bit more prettier over here so username and password she looks a little bit fine and as you can see it's works pretty much find this how odd flux works in a very really basic way yeah of course there is a lot of other conditions or a lot of extending of last like worse scenarios you can use more complicated things and more advanced topics or flux but this is what's just the basic basic think about flux how you can use it with react components and want to exchange and receive the ana events whenever something has been submitted or something like that it just gonna work fine so username example pass submit and as you can see it still works front so you can do a lot a lot of things in here with this particular event immature and black store and you can just send receive events with your municipal components and you can make your application looks way too much for a better and a more even more actually more flexible way so that was actually guys for today story was very basic and was very simple thing so just cover the flux and mutual components and how you can render between them so this is actually how flux works with a store submit event receive event and add event listener if right so you can render things properly for your components so those actually guys again I will catch you in the next video tutorial we're actually going to create a real-world application using flux and we had an create something really really nice so keep that keep that in your mind or keep watching subscribe or something like that yeah I will catch you in the next video story