ReactJS - Django App Development Workshop

I'm running a web design agency in Singapore called bitmask and we built websites with Django and Python we have been doing this for the last four or five years and yeah so the last six months or so I was building a mobile app for one of our biggest clients and we were using react.js for this app and that means I had to use a lot of JavaScript I created a little repository on github that shows it's basically it's supposed to be a step-by-step guide that teaches you how you can set up django and then how you can create your first few react components and use them in your django application so the first step is simply creating a Django project and all you need to do for that is actually one through these four commands you could probably even skip the first one if you don't care about virtual environments so pip is a software that comes with Python to install Python packages so in the Python package that we need to install it's called Django once we have that installed we have another command available on the terminal which is called Django admin and this command has a sub command called start project and then we give our project a name so I just call this like Django react eg I react this is the name of our Django project okay and what this command here does is it creates a DJ react folder on your hard drive which already has a few files inside that come that Django automatically generates for you is like the minimum amount of files that you need in order to run a Django project and the last command here is not necessary really but I like to rename the DJ react folder into Django because of the Django project so what you will end up with is something like this the Django folder which has managed to pie file and the DJ react folder and inside of that folder you will have the very important file settings pie I will I will talk about this file a lot today so try to remember this URL spy and this file we can ignore so I explained a few other things like if you install something this pip you should also create a requirement stop text file and put this same requirement into that file so when you look into this file it looks like this that's just Django inside the latest version that's just best practice it's not really relevant to this project mmm no when you need to do something I will tell you it's after after we stop the recording basically so after you ran basically these two commands here you should be able in your terminal to do manage my run server I already have it running actually yeah you should be able to do manage pi run server and then in your browser you can go to localhost and you will see the Jango welcome website that's basically the if you didn't do anything this is what Jango will look like it will show your welcome screen just to tell you that just your settings settings file is correct and that everything worked okay so that's the first step just installing Jango and creating a project super easy and as a second step I basically want to create a view so that we can see like a hello world text in our browser so this is supposed to be our old django app right we I built this because I want to enhance my old django apps and used react.js component instead of normal django HTML code okay so in order to hook up a view and django you need to go into the URL spy file and you need to add this line here and i actually add a two views for demonstration purposes so this basically says that at the URL view to slash we should show this template and at no URL at all so basically the home page we should show this template okay then you need to add a setting that tells django where can find the templates and then you need to create the actual templates so those of you who have already written HTML should be familiar with this basically we will have a base HTML file and then the to template files for the two different views so Django has this cool thing that is called template inheritance that means I mean usually when you build an HTML site they always need all this boilerplate code here right every HTML website needs to have an HTML tag head tag a body tag and so on and but for our views we don't really want to repeat all this every single time so that's why we can put this into one central file and then the sub files for the for each view they will extend the central file ok so that basically means everything that's in between the block main here which is just a tag that says view 1 should be rendered in the base HTML file in here so this part will be replaced with this part ok so if you look at the code again so that you can visualize how it looks on the file system basically what we did in this step is we created the templates folder and the three files that I just showed right so when you when you go into the file you can see it's just this template file with the block and the other two files they extend the base file and they fill in some content into the block ok and that's the step when you did this and you run in your terminal you run manage pie run server you will see view 1 which is the thing that we put in view 1 HTML in the file right or if we go to the other URL view - we will see vo - okay so this should already if you have never done web development and you want to get into it and you thought that Django might be a good technology this should get your excited it's like well I just have to create a few templates I put something into the URLs dot PI file and I can see something in the browser right and from here you could start actually writing you're making your website beautiful add more content and then afterwards you will get that you will ask yourself hmm how can I have some more dynamic stuff how can I save something into the database and get out of the database so from here onwards you will dig deeper into the Dan Django documentation and learn more about Django but which we won't do today so the next step is the one where people who want to use reactor as often struggle or give up so this took me I don't know maybe a few weeks to get my webpack conflict nice and correct and understand what's going on like six months ago when I started using react js4 for my project so we wanted to build a mobile app and we didn't want to use angularjs so there's a software called Cordova that allows you to write a mobile app but use web technology and yeah I heard I just heard about react.js and people are pretty excited about it and said it's very very fast and it gives you a mobile gives it a chance to build a mobile app that almost feels native so that's why I thought I'd just give it a try and turn out to actually work and look really good that's why I decided to use react I guess in the first place and a few months later Facebook released react native and then we threw away my react.js mobile app and we migrated everything to react native which is a very similar technology but it uses the actual iOS and Android native views so it feels even more native this is really cool technology but it uses almost the same code as that that we had already built so the migration was actually very painless so this is the most difficult step here the problem is with react you you've write your front end using javascript okay and usually you will have one javascript file which is the so called entry point into your app and from there you import a lot of other smaller files and you use them and inside of those smaller files you might import even more small smaller components and it's all JavaScript code okay and but the problem is the browser doesn't really know about how to do imports and all these kind of things the browser really just wants to have the browser says give me one component J s file that I can load and then I try to execute that file right we cannot give a lot of files to the browser and expect the browser to execute those files correctly so what we need to do is we need to bundle our whole app into one big JavaScript file that includes everything and then we can put this file on a content delivery network or wherever we host our static files for our website and make sure that the browser can download this file and execute it so this is what the software called web pack is all about it asks you where is your entry point into your education and where should I save the bundle and then it goes into your files and and gobbles them all up and tries to put them into one big file okay the problem is yeah so usually when you develop like this with react yes you want to do something that is called hot reloading so that means you see your work in your browser and you are working in your editor and every time you're safe your browser gets updated okay so that means that kind of web peg generates a new bundle on the fly but it doesn't really save it to the database but it keeps it in memory and there's a tricky magical way how web pick can communicate with your browser and set and tell the browser that the bundle has just been updated and then the browser will refresh itself and there's a django application called django web web pack loader which has only one purpose it it tries to teach django what is the current file name of your latest bundle okay we will see that later when we actually generate a manual you will see that the file names they always have a random string at the end so every time we save and we change our code the finite file name of the final bundle changes as well and that's a problem with Django because usually when you just woke up let's say jQuery minge is it's always this file name Django always knows that this is the file I have to download and execute but with our own bundles we will always have these random strings at the end so the bra Django needs to be up-to-date and know what is our latest file that we have saved I could configure webpack in a way that it always says the files was exactly the same name but it's usually not not a good idea because then when your user refreshes the browser like the user comes back to your website the next day then the old file has been cached by its brought by the browser so the browser sees like fjs alright I don't know that this last week already so I will use it again so then the user will be using an outdated version of your app right but by just changing the file name every time the browser will think that this is a new new static asset that it needs to download again and then you never have these problems that users have outdated or running outdated code yeah so anyways in order to use a third-party django application we need to install it same way like we install django so we run pip install django a peg loader and then most third-party django apps are used in the same way you add them to your settings pi file remember i said this is the super important general settings file so we add one line to that file here and then we add a few more lines further down the file telling django where we are saving our static assets so static assets is like javascript files CSS files images that should be displayed on the website these are considered static assets okay the mmm okay and then we need this crazy scary-looking package JSON file this basically is the same like the requirements not text file that we use in Python so it's also just a file that tells your project what kind of software needs to be installed so that this project works and we basically just put in package names here and the version numbers that we want to have all right you remember when I showed you the requirements text file it only had one line Jango equals equals one point nine point zero point three so that's the Django package for Python that we want to install and here's the same we want to install a JavaScript package called babel and it's dis version and a lot more Java Script packages so but let's just ignore them for now so the config that we need to generate for for web pack is looks kind of scary at first because I split up into two files it's gonna be a base config and then further down we have a second file which is which has almost the same name but there's local in here okay this will make more sense later when I talk about deployment because usually in the real world you have your own computer you have a staging server and you have a production server okay and you need to generate three different versions of your app for the three different environments because for example when you develop locally your API might have this address localhost 8080 I version one right but on your staging server it might be this address sandbox my app comm API version 1 and on the production server it's just my accom so you have if the website is basically running on three different machines your own machine the staging machine the production machine and that means that your app that the which is in the JavaScript bundle right needs to know to which API am I talking to right now so these kind of things have to be hard-coded into the app and so that that is the reason why we need three different config files okay but most of the config files is exactly the same for all three environments so that's why we have a base config file which has most of the stuff and then we have specific config files for the other environments which overwrite a few things that need to change for that environment okay so let's just have a quick look at the base config file this module exports thing here is a JavaScript thing that means that down here we can import that config file so if you have done a little bit of Python already you know that you can do this from django import models right you can in your Python files you can import other PI's and modules and this is the same in JavaScript here but it looks mean the syntax was a little bit different it basically says that we want to import this javascript file and we want to put it into this variable name okay and then the question what will actually end up in this variable name and it will be the thing that this file here exports okay and what does it export it exports something that looks very much like a Python dictionary you know the Python has dictionaries with curly brackets and it has lists with square brackets right so JavaScript basically has the same thing I think in JavaScript this is not called dictionaries probably I don't know it's called object I guess right Mike yeah so we are basically creating an object that has several attributes so context was one attribute entry as one attribute output is one attribute and each attribute has certain values and the important one here is the entry point right we are telling webpack where is the JavaScript file where my react is application begins you will notice that there is no js' ending here you can leave out the ending because you are free to put to name it J s or JSX or in any way actually so by leaving out the ending webpack we'll be able to just find the file that's called f1 dot anything and assume that this is your entry file ok we will ignore this for now and then this output path is important so this tells webpack where the final bundle file should be saved on your hard drive ok so ok maybe I should talk about this vendors thing here the problem is react native is like jQuery it's a pretty big library it's I don't know maybe 180 kilobytes or even even more so and it will never really change as long as Facebook doesn't release a new version of react.js this library will not change so it would be cool if your browser can download this big library and cache it so the next time when the user comes back this was already in cache and doesn't need to be redone loaded again but the stuff that changes all the time which is our own app right this should be in a different file so by using this commons chance plugin here and by saying that react should be entry-point webpack will generate to bundle files it will generate one super big bundle file that contains react.js and everything is related to react yes and it will con create one small bundle file which only contains our own code that we have actually written which in comparison to react is tiny right and yeah so that's that's the purpose of the comments chain plug-in did the rest we can ignore for now so that's the base config okay the local config I okay so the local config first of all that imports the base config into the variable name config and then it overrides a few of the attributes so you up here you can see that we define the plac plugins attribute and it's a list of plugins okay so down here we are overriding the plugins attribute and we are adding we are concatenating some elements to that list so basically we are saying in general we want to use the commas chunk plug-in but if we are developing on our local machines we want to add the bundle tracker plug-in all right and we'll explain what the bundle tracker plug-in does later so if you would run webpack now it will probably crash and give you some syntax errors that's because there is a new version of JavaScript emerging called es 2015 and this has a lot of things that for example it has classes it has this kind of way of importing things so this loss you know this is still JavaScript down here here it looks much more like pison already write import something from something when you compare to this this is also just an import but it looks completely different because this is written in the old way and this is written in the new way and in order to be to teach web pack that it's it's should be able to deal with the new way you need to create this bubble our C file and put these settings inside this is also a pitfall like when you want to get into react.js development you do everything like they describe it in the tutorial but most tutorials don't tell you about this because most people have this file in their home folder and they forgot about it that they had to set this up this file a few months ago and for them everything just works but when you try to reproduce it nothing works at all because you don't have this file yet so yeah you need to copy and paste this into this file so now we will basically have configured web pack correctly but we don't have any JavaScript code yet that web pack can run so that means we need to create an app one dot JSX file which supposed to be our entry point right and in this file this is actually how react.js looks like and we will talk about this later so for the purpose of this step here we just want to be able that we can compile something and see something in the browser so we create one component here and this component uses another component that I'm also importing here so that means we have to create a file for that other component as well and implement that component as well right and for like demonstration purposes I went even further so this file is using another component called headline which I'm importing here right so we need a third file which is another react component so you will already see a pattern when you look at these components you always see that there's a class it has the same name as the file name that's a good convention and it extends reactor component and you have to import react here so that's why reactors available here okay and inside of that class we are defining functions very similar to Python classes and the most important function is called render and it's supposed to return something and what it should return is basically something that looks like HTML code right you you are you have seen this h1 tag here and here we there is some magic happening there's some variable stuff inside the HTML and the interesting thing is when and here's the same right for the headline for the headline component we have a class called headline which is the same as the file name the class has a render function and the render function returns some HTML and the interesting thing is when you go one step for one step up the headline component can now be used as if it is an HTML tag as well okay so that so when you build react applications you are actually trying to build a lot of very small components that do one thing and one thing really well so basically my headline component will have the correct color the color correct font size the correct font family and all these things so that and then everywhere in my code I just use headline and I be sure that all my headlines look exactly the same okay and if somebody says all right we have a new style guide for our company and all the headlines need to be green now you just need to change something in this single file here right okay so yeah no the before code is using whatever was before es2015 I don't know how it's called JavaScript old JavaScript I don't know actually I don't know I don't know if I would be able to use I would probably not be able to use it for executing web pack I'm not sure Mike do you know basically whenever I look into tutorials and other boilerplate repositories they are all using the old syntax for the backpack config so I just copy and pasted that to be honest maybe you can try it you can try to replace this with the new sentence but I guess it would not work most of the tutorial never tell you about that paper I see and we also don't know what is the tutorial will work using this one yeah so you mean for now he just now the system to use es 2 1 exactly so how it looks like on the file system is in your Django folder we will now have this babel our c file and whenever you execute your web pack it will try to look if this file exists and it will use it I mean it's probably only half the truth actually web pack is using some code it's using something called bubble and bubble is the one that is looking for the bubble our C file I think that's the point when we execute web app web pack we are not using bubble yet but web pack is the software that invokes bubble so while we are executing web pack this file is not being used and that's why I think the new centers will not use when you execute member but I might be wrong that's not discussed this in great length because I don't want to tell wrong things and end up on YouTube like that so so basically you know we created the base config file and we created the local config file right which uses most of the parts of the base config and we created a react J's folder which has our entry point which is this first component here right and we created a containers folder I will explain maybe I will explain later why I split this up into two different components which has another react component and we have our components folder which has the mini small headline component ok so you can see actually reactions is not that scary the mini smallest component is just 5 lines of code and it's relatively easy to understand what it does ok and when you and that's what they say on the Facebook website give it five minutes they're like if you try to mess around with this you will fall in love with it and then you will dig deeper and learn all the difficult parts they don't tell you that it's actually very difficult to understand they just tell you look it's so easy it's just five lines of code give it five minutes and then you walk down the rabbit hole and you don't find the way back anymore okay and you end up becoming a JavaScript developer and you are actually a Python developer right so this was step three and hopefully when we run this what what happened oh right it still looks the same right because so far we have only created a lot of boilerplate code config files components all this stuff and we have even created a bundle like this last command here and my tutorial will teach you how to actually create a bundle but in our browser we can still see the old view one right that's because in our Django template we haven't made any changes we should now include the new JavaScript bundle that we have created in our Django template and that's the thing where most people that use Django didn't really know so far how to do it nicely so let's see how that works so if you go back to your view one dot HTML you remember that there was only one tag here basically saying to render view one right this is this view one here now we put something different here now we put an empty div container here which an ID called m1 alright and we this is something specific to Django because we are using the web Django web page load a third-party app which we have installed using pip before we are now able to load a so-called Django template tag and the template tag is called random bundle and we can use this template tag to load specific JavaScript bundles with certain names and when you remember back to your to our web pack config and we had two entry points the first entry point was called f1 and the second entry point was called vendors okay so those are exactly the same two names that we will use here in the Django template right and what web pack django web pack loader actually just does is it teaches django which name here corresponds to which bundle file on the file system that we hopefully have generated if we didn't generate it then it will crash and say that the file cannot be found ok so basically when the server returns this template it's gonna be an empty website of just a white empty page which has to load this JavaScript stuff here first and once this stuff is loaded then it will replace this emptiness in between the diff here with our actual JavaScript react components and then we will see whatever the components output okay oh yeah there's a final thing that you need to put into your Django settings so that web page load R knows in which folder the bundle files will end up and where it can find these WebP X that's JSON file so I haven't really explained what these do the thing is every time you run web pack because we are using the bundle tracker plug-in in our local web pack config it generates this file here and the file basically only says that the app was the name app one has its bundle file called like this and this is the random string I was talking about this one changes every time you save the file right and it also tells Django where this bundle can be found on the hard drive okay so Django basically only knows this file and because of that file Django knows when I say render bundle app 1 it knows which javascript file to import ok yes so if we do all this and so this is Steph all right yeah this is step one and we run manage pie run server and we go to the browser now we see something new which is the same let's have a look at our JavaScript components hey let's internet so slow here see I was using the headline component with the text something new inside so we can we can confirm we are no longer seeing some old Django templates UML stuff we are now seeing the output the result of our react.js application okay all right so but so far this is still very inconvenient because every time you're safe you also need to run webpack to generate a new bundle and then you need to refresh your browser to see the result that's too much clicking around and typing in the terminal so we need a way to make this automatic first of all we need a new file called server GIS this is another scary thing that where many people give up and we need to copy and paste this whole code inside I won't even talk about what this does is basically it's a web server programmed in JavaScript and we will use nodejs to execute this web server this server will listen on port 3000 and do magical things we will see that later and in order for this to work we need to make a little update to our web page local config and so this was our entry file here we need to add these two lines ok and we need to add this line which didn't exist before and we need to add these two new plackets before we only had the bundle tracker plug-in but when we want to do web pack when we want to do hot reloading with web pack we need to add these two plugins as well so I mean I don't even understand what all this means I just copy and paste this from some tutorial try it it works oh it's great never touch it again and and don't worry about it right so if you have all this in place and this is step 5 you can do manage my run server you can go to a website and oh my god I see nothing this is because I forgot that I also need to run note server dot J's so when you want to develop your site now you have to remember always to execute both servers the Django web server and the note web server okay when you do that now our app is rendered again okay and now look at this this is the cool thing when we save our code let's say we change this - oh my god works and save oh my god it works see let's save it changes immediately correct when I save I press save now and there's the change okay so this is the hot reloading that's going on and it's basically recreating the bundle and keeping it in memory so Django is no no longer looking onto the hard drive for the bundle it's now looking to this port 3000 webserver so it's trying to fetch it from I don't know where it comes from from memory I guess and this is really powerful this enables you like if you have for example in your office you have a to monitor setup you have the website here you have your editor here and your code encoding code and like creating beautiful user interfaces is really really good with this because you can try like make it 1 pixel bigger one pixel smaller a little bit more to the left to the right and it's like so fast it really encourages you to experiment and come up with new ideas and try different versions ok so this is a great way to build websites [Music] so yeah many people already got to that that far and then the next question is okay but how do I deploy my stuff to my Jango to my already existing Jango infrastructure to my servers okay and as I already explained in the beginning what the only thing we need to do is we will create two more web pack convicts one is called stage config yes and the other one is called trot convict j/s and those convicts same as the local one they import the base config and they change a few of the of the variables here for example they say that we will have a specific folder for our bundles which is called bundles slash stage and we will also have a specific folder for production bundles and for example this plug-in here the define plug-in basically allows you to set something called like something like environment variables that you can use in your JavaScript code so this enables you to have things like if environment is production then use this API URL otherwise use that or if environment equals local then do some special debugging output that you don't really want to use if for the for the real production website all these kind of things or for example I like to describe my API base URLs in here so they if I if I run web pack with this config all my API calls will go against this URL if I run it with this production config all my API calls will go against a different URL okay so that means every time when we want to release a new version so this has been this is how you call web pack this is the command and then you basically say I want to run web pack with this config okay and so that means when I made some changes to my app and I'm ready to test it I have to create two new sets of bundles one for the staging server and one for the production server assuming that it's fine and I after I tested it on staging I want to have the same stuff on the nationís so that is a lot of stuff to type in the terminal right I have to every time I have to create these two outputs here so that's why I use something called fabric it's a very powerful and helpful package in pison so we would use pip install fabric and we will create a so-called fat file in our root directory and we will put this little bit of code into the fat file which basically only says that we have a fabric task task which is called webpack and whenever we run fat web pack on the terminal it should execute these four terminal commands okay so maybe you have already heard about make files maybe when you compile source code on Linux or whatever you often have to deal with make files so this is a similar thing like make files so let me show this to you and step six okay when you do fat webpack it does all these things it's just one command but it's executing four different commands it it deletes the already existing bundles from your last time and it generates two new bundles for staging and for production and puts them in the same folder again okay so when I run git status now I can see that a lot of files have changed right some files have been deleted and there are new files that haven't existed before because they all have different file names right that's why I want to delete them because if I only save new ones I will I will end up having a hundred thousand bundle files half a year from now and yeah no need to version to put them into version control all of them so yeah for those this might be may be interesting for people who watch it on YouTube who know Django already my development workflow is like this I go into my project folder I run managed by run server and note server J s so that I can see my stuff in the browser I start coding my app when I'm done I commit my changes and then I run fat web pack to generate the bundles and usually I like to have a different commit only for the bundles and then finally I run my deployment script from a Django website and that's the cool thing that means you you are now using react.js but you don't really have to make any changes to your infrastructure the the way how you deploy Django stays exactly the same however I mean every company does it in a slightly different way so it doesn't interfere with that at all right so you only make sure that you generate your bundles commit them into your repository and run a normal deployment okay I have three more steps which is probably a bit difficult for you guys now but might be interesting for the video so I try to keep this a bit faster I won't I don't know should I explain everything in detail the more I explain the last time we will have to try it on the laptops later so I have to find a good middle way anyway so yeah quickly okay so the thing with with react components is they have something called props and state basically when you think about the component for example this this headline component that we had right it's supposed to render something that has been passed into the component and so the component basically doesn't really know what kind of text it should render you can put any kind of text inside and the component will render that text so that it's some information that has been given into the component from the outside okay and this works for for small components that only deal with themselves but what if you have for example a button component and when you click at that button some kind of counter on your website should increase and the counter is a different component so these two components they don't know about each other necessary they don't necessarily know about each other so how that's the counter know that it should increase when somebody clicks at the button right so we need some kind of event system like the button when you click it needs to emit some kind of event like I have been clicked and the counter needs some kind of event listening system so that when the counter will listen to I have been clicked and when he hears when the counter hears that event he will increase in itself for example okay so if you read about react you will quickly learn about something called flux that's like a way of thinking how you can manage your state and react applications and there are a lot of a lot of different flux implementations so it's basically another JavaScript library that you need to import in your project and then you need to understand the documentation of that library and then you can use it the question is which one of those that exists should you use there are like ten difference once maybe I mean three months ago was 10 different now it's probably 20 different and but thankfully some smart person came along and invented something called Redux and it's a little bit like flux but I think it's easier to understand than flux and less complicated what you need to do in order to use Redux is first you need to create a so-called action creator ok you will put that into a file for example called counteractions JSX George is owned that's a typo you need to fix that and basically what we do is we create a constant which describes the name of the actions so let's let's assume there's a button you click that button then the action increase should be emitted ok and so Redux this will make more sense later when we look at the next file by definition all the the actions should have this look that there should be JavaScript objects or if you think about pison there should be dictionaries and they should have a key called type and the type should be some some string actually and you know this constant here is a string okay so this is a bit confusing so let's maybe let's not get the next file so what you should keep in mind is the action creators describe what kind of actions can happen ok then we need something else that's called a reducer and we will put that into a folder called reducers and we call it counters on J as for example the reducers always look like this they import the action creators that belong to this reducer and they describe how the data looks like usually when you are working with some more complex database for example I don't know you have a user profile then maybe you would have user profile here right or let'slet's when you think about Facebook maybe they have user profile here and then they have posts for your timeline and this is another key and this dictionary here so basically here you describe how the data looks like that this reducer takes care of and we just want to increase the clicks in a counter so that's why I'm only having one variable here called clicks and I initiate it with zero okay and this is the actual reducer function here it's basically just a function any name name doesn't matter and into the function we put some state the and at the very beginning we put in the initial state and every time when an action happens so when this increase action here is fired it will be put here as the action variable into the entry into the reducer function and with it the last state will put will be put into the function so you can think about it let's say let's say we click at the button 20 times in a row that generates 20 actions that will be put into a queue right and then slowly each item will take will be taken out of the queue and will be put into the reducer function so that's the state it's the last state right together with one of those 20 actions and then inside of this reducer function we will manipulate the state so we are this is a weird new JavaScript syntax here so this does not mean this is a dictionary don't get confused of the because of the curly brackets this means that we are taking the old state variable and we are returning a copy of it and we are only changing the clicks attribute to something new and we are increasing it by one just try to like this is basically what this statement means it does it does a lot of stuff in one line of code which would usually take more lines of code that's the only reason why we use this so it looks nicer so you can think of the reducer like old state gets we put the old state into the function and we return a new manipulated state a copy we cannot manipulate the actual stay we have to return a copy okay and there and in order to get redux working you need to remember our app m1 Dodgers X file it used to be a very small component right now there's all this stuff here in the file before the component was only using the other sub component and now we have to import all this which is a Redux related and then we have to add this code this is all for because your app will usually have more than just one reducer and it assembles all the reducers that are available and generates like one big store you can think so the store has several reducers remember we only have one reducer and the reducer has called counters and it only counts the clicks but if you have a really complex application you might have a lot of different producers like maybe one reducer that only deals with user profile data one reduce and it only deals with your products if it's a webshop one reducer that only deals with I know comments if it's a block or whatever right and you act might be complex it might have a webshop and a block and a user profile and and so on and so on so that's why you want to have your data capsulated in in small reduce hopefully as small as possible reducer files that's why you split it up into several files and this code basically makes sure to collect all these files and generate one big store out of it and then it wraps this around our outermost component and then this component is becomes more powerful it's now listening to all the actions that are happening and if some actions happen that change the data the component will rerender itself automatically that's kind of the idea so when we go into the so this is everyone is our outermost component right and we were loading another component here this one needs to change a little bit we need to import connect and put it on top of the class as a decorator so this add symbol here means it's a decorator and we basically just say that inside of our class we want to be we want to have a variable called counters so we made up this name here counters I could name this in any way and counters is the counters reducer from our store right because we I said that we we are assembling all the reducers and there will be in this state variable here so we could have stayed toward user profile' state or product state or whatever in our case we only have one state or our counters and obviously I just keep the same name and then inside of my react application I can now make use of this counters variable okay it's no part of the react.js properties this will confuse you because you need to read the react.js tutorial to understand what properties and state means but basically just think about it like this is a bucket of variables that this react.js component has access to and one of those variables is called counters because we connected it to our reducers okay so yeah let's just try if this thing works because it's always so much nicer when when something happens on the screen step 7 okay so I run minish Pyro's over so this is my button here and when I click it increases another component okay so refreshing it gets back to zero exactly and that's a good point the last set will deal with that like usually you need to fetch your data from the database so every time you load you reload your app it refreshes the data and displays the last the data it was saved and database last here I'm just initiating with zero and then we are counting up from zero and next time when you reload the application we are initiating from zero again right all right cool so that works there's two more things styles so you all know a little bit about HTML so that means you also know a little bit about CSS properly probably right who knows about CSS okay so that's almost the same people that also know about HTML and this is something where the community is in a heated debate because react basically makes it very easy to define your Styles right there in JavaScript so you are no longer writing CSS files no longer you will no longer have central style sheets for your application instead you can put your Styles as a JavaScript object right next to the component that's being styled and this is really powerful because I don't know maybe I'm a very bad web designer but every single project that I have ever done ended up having a three thousand line style sheet that nobody dares to touch like you are usually only adding more stuff to the stylesheet because you are scared to delete anything because you never know when your site has like your website has 300 pages and subpages and whatever you never know if I delete this will suddenly something on my website look ugly and better don't touch it I mean obviously there are people that are only writing CSS and they are very good at it and they know how to maintain the CSS files properly but usually most of the teams I've worked with they they just accepted the fact that the CSS file is a huge you know a huge mess and you don't have this problem here anymore if if you wonder you can I change this color to red then you will just check where is it used so this is the style called counter and then it's being used here so you look at this component here and you know it's a relatively small component and they are usually always pretty small and it's a relatively small chunk of java CSS code so you can the a developer even a developer who doesn't know the whole system who has just joined your team and he has the task to fix this one component the developer will probably be able to make a good decision if it's safe to change this to red or not right so that means you will have you actually have only JSS code in your app that really matters and know that CSS code that nobody uses anymore okay yeah the center is different so you cannot use dashes in here usually it's font - size text - decoration and all these things you have to use camel case so called Kim okay so you start with a small letter and then after when there used to be a dash here this letter has to be capital okay so and then and there's another library called radium actually there are a lot a lot of different libraries for the react j/s ecosystem that help you writing styles right there in JavaScript and I just happen to stumble upon radium when I needed it and I stick to it so I don't know if it's the best one but for me it does everything that I need and so you just need to import radium and then you need to put another decorator around your class here and that's all then you can use style equals and this is some weird new JSX syntax from Facebook so you are saying that the style attribute is going to be a variable so that's why we put curly brackets here and the variable is supposed to be an array that's why there are square brackets and the first element of the array is the counter style and then the counter style is here all right so we can even put comma separated more than just one style and they will overwrite each other so that way you can write a little bit more modular code yeah I'm not going to show this as basically only makes the counter blue so it's not a big difference the last part is so I mean this tutorial so far if you do this at home you can follow this you will end up at the same stage and then you are like okay cool now I know how to do Django I know how to do react to yes I want to build the next Facebook now and okay so how do I get data right that's like the next important question that you will definitely ask yourself and and there's actually a lot of work that you need to do for this first of all so I'll rush through this a little bit I created a utility CAS file which basically okay so now I have to go one step back um there is a new standards coming up on how browsers can do Ajax requests so if you have used jQuery before there's the jQuery AJAX function which allows you to write JavaScript code that can like talk to other websites and other web servers and api's and there's something new coming up because you might not you might not be using jQuery if you use reactions usually you will not use jQuery anymore so how do you use how do you do Ajax requests now right so there is a a new function coming up here called fetch sometime in the in the future browsers will just natively support this and nodejs on the server will also support this all right now nobody will need to force it so you need to import another library called isomorphic fetch which is the so-called polyfill for your browser and for nodejs to make sure that this fetch function here work in your browser and on the server so just accept it like sooner like like maybe three years from now this line will no longer be necessary necessary hopefully and the fetch function is returning oh God no need to go to policies it returns the so-called promise okay I'll not explain this basically when you when you talk to a server there are several things that can happen first of all the response will be successful right the server gets back to your vessel response or the response will be some kind of error message a very common error message is 400 which probably means that you send wrong data and the server is saying I'm here I can hear you but the stuff that you sent to me doesn't make any sense so the server will return with arrows there's another very common error that can happen then a 500 internal server error you might have seen that when you go to a website and it's just wide and says internal server error so any kind of a lot of it's not just a 500 error a lot of different errors can actually happen and finally the fifth thing that wait how many is it success five 400 error 500 error and finally the fourth thing that can happen is that you don't have an internet connection so your request will end up nowhere and timeout probably so I basically just wrote a function the function is called request it requests it requires the URL you want to talk to some additional options we are not using the options here in these examples and then for callback functions so this is this is a weird thing that actually you can do this was Pisan as well you can write a function that accepts other functions as parameters okay so we are basically putting in four different functions into this function and then we are reacting to the different things so if the fetch request returns we check the status if it's 200 it's a success that means we we turn the JSON response into some JavaScript objects and then we call this callback function here okay and so if it's an error we call the other callback function if it's a really bad error we call the 500 callback function or if it's a really really bad error and then then the internet didn't work we call the failure function so this will make more sense when we look at this here so this should look familiar if you didn't fall asleep in two steps ago it's another action creator right we had the we had an action creator for counters which had these constants here and you know the increase here we have the four kinds of results that can happen and we need another one to signal that we have just started doing a fetch right so these are the five things that always happens when you talk to the Internet you start talking to the Internet and then either it works or in lots of cases it doesn't work so that's why we create five different actions here okay and that's something that you have to make up yourself so I'm I didn't tell you that so I'm trying to build extend our app so that it fetches all my own github repositories from github so that's why I call this fetch repos repositories okay so if you would write a function that's supposed to fetch the user profile for example then you would call it fetch user profile and fetch user profile success and so on you can make up the name yourself something that describes the thing that's supposed to fetch okay and you might remember from the counters action creator that it should return something like this that has a type and returns that the increase constant right there's a second way that we can do we can return a function instead that needs to have the dispatch parameter this is really difficult to explain even when I look at this and I have used like 100,000 times now I still have have a hard time wrapping my head around this so basically this basically tells redux that we are trying to do an action here that takes a lot of time because we don't know when the result will come back to us right when you talk to the internet you don't know how long it takes for the server to respond so this is a so called asynchronous action that's happening here Sherry's giving up huh don't give up Cheri almost there is the last step and almost at the end of the slide alright so yeah so I'm basically first I'm dispatching the action that tells my system that I'm going to talk to the internet now right it's the first one and then I call this request function the one that I described above that I have written here which allows all these callback functions here right so keep this in mind keep this function definition in mind when we go down here here we are using that function right and these are the four callback functions that the function definition requires that we are passing into the function the syntax might be a bit confusing but this is some new JavaScript syntax to create an anonymous function on the fly so when you see these brackets here with the fed arrow that means that this line is a function although it doesn't have this kind of syntax where you really say this is a function called so-and-so right this basically means this is a function without any name and it requires one parameter and it it this is the code inside the function okay so basically you can see that we are having four functions here and it's exactly these four functions that our request function requires okay all right and then we would create a new reducer which which has the repositories from github that I'm trying to fetch and a variable that says is it currently loading or not okay and here you can see that we are now listening to the different actions that can happen for example when we start fetching we change our state and we say now it is loading we set it to true alright and if it's successful we say now it's no longer loading and this is the result that we got so we change repos to whatever is attached to the action okay and in all other cases we just say now it's no longer loading but you know we still have no repositories so that's the reducer and then you need to make a lot of changes here and there and here is how we can change the react component remember all the react components they have this class and then they have the render function and they are supposed to return some kind something that looks like HTML okay so this is exactly this render function from our react component and now here we can connect to our reducer and we can say is it loading or is it empty like we don't have any repositories in that case we render a loading screen otherwise we render a real component okay and then but you can dig through this if you do this at home I created another component which takes care of showing all the different repositories that we fetch from the internet and this component looks like this it's basically using for each to iterate over each component and then render just a div with the component name right so I mean this is too complex to describe now and we need to get to finish to wrap up this talk so this is something if you look at this at home you will probably understand it after a while if you stare at it long enough but let's just see what it does that's so more so much more interesting so step and a step mr. Pires over solid it shows loading and then when github responds with my repositories it's showing all my github repositories it's the this is the same that you can see when you go to my github profile here or here what repositories hey repositories and see these are my repositories here and we are now fetching them because github actually has an API you can go to API that github calm I forgot the name it's probably users oh yeah and then the user name and then repos and it will return this lot here which is a so-called JSON string and here it is like Chen Tweep is one of my repositories it has this ID and this is the full name blah blah blah and there's a few few extra information about this repository so see Chantry also shows up here in our react application all right yes okay so for the record to wrap this recording up if you follow these steps on this github repository here I have actually basically everything that I just told you it's also written down here so you can go through this step-by-step all the code you can just copy and paste if you're not sure how your folder structure should look like just open this in another tab and compare how your hard disk the files on your hard disk how they look like in comparison to what I've created in this step right and then at the end of the step you should always be able to do manage cut run server node server Jazz open it up in your browser and then you should see something okay so I really encourage anyone who wants to deal with Django and react js2 just go through this step-by-step and yeah hopefully be hopefully be inspired that this should actually works and it's actually relatively easy to set up you don't need to change your Django deployment process and you can step-by-step start replacing old stuff on your website with fancy react components there may be one example that I just deployed two days ago so this is our old django website and we are selling whiskey here for example if you have a lot of cash i basically replace the whole filters and shopping grid here so because i wanted this to be real time and everything so now i can click add a filter and it reloads immediately and shows me the result immediately okay this way it's not a good example let's go to art or for some Bank I can click at next page and it just loads the next page right without actually doing a page reload so the browser is not reloading the page it's just sending an API request to our server and the server is sending back something like the JSON string that we just saw from the github API right so I can filter for prices see and it always changes immediately so it's pretty fast to pre the re rendering of the react complex react components it's extremely fast and this is so much different from jQuery with jQuery when you got back the Ajax response you still need to find the Dom element that you need to remove or to replace or to update in some way react doesn't care about this all you care about is updating your reducers right so basically you are when you think about your application you only think about a data structure right you think about what do I need to display to the user and if it's just a data structure in your reducers and then you write those react components around the and they have access to the reducers and they did they display the correct values that's all you do and you are no longer caring about Dom manipulation at all you are only caring about updating your reducers that's all you didn't need to do and the Dom needs knows how to update itself no ok thanks for watching I guess

Channel: Coding Tech

Views: 64,376

Keywords: reactjs, django, application, web application, api, software development, programming, coding, web api

Id: kxzg_QXrV_k

Length: 71min 1sec (4261 seconds)

Published: Tue Oct 10 2017