 Is it running? Okay. Yeah, okay. Welcome everyone. I think I don't need to introduce myself, but I will do it anyways for the recording. So my name is Martin. I'm running a web design agency here 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. And I had to expose myself to this new technology called React. And it turns out it's actually pretty great technology. And I really enjoyed doing front-end development with that. But I never really understood how can I use React with Django. And two weeks ago I found a blog post which described how you can do this. And I read this blog post and I tried it out myself. And after like maybe half an hour or so I got it up and running. And I was pretty excited about it that I finally have a solution how I can easily start using React.js for small parts of my existing websites and migrate everything over to React slowly. So because I wanted to share this with everyone I created a little repository on GitHub that shows it's basically 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 maybe just a quick show of hands. Who has used Django before? Okay, only Vina. Who has used React before? Who has heard about Django? Oh, the movie? The movie. It's not going to be as bloody today. Yeah, okay, so... I think it's a little bit more famous. Yeah, I heard a little bit. From the guys that are involved in the project. Okay, so that means you are like the toughest audience I could possibly have. So what we will do is I will show this repository and I will go step-by-step through this and try to make it pretty fast so that we can wrap up the recording and then afterwards when you've seen everything so you don't have to follow now because it will be too quick. Afterwards we will go back to step one and we will try to reproduce it on your computers. So basically Django is a so-called web framework so that means it handles a lot of things for you. You can render templates. So you will write HTML and CSS. Who has written HTML and CSS? Okay, maybe half. Yeah, that's great. So you know how to build websites. So Django basically is a framework that helps you to build websites. It has like batteries included so it deals with a lot of things like dealing with cookies and authentication. It can talk to your database and do many, many things and that's why a lot of people use it for building web applications. React.js. People say like, you might have heard about the term MVC here. Model View Controller, right? Who has heard about the term? Who knows what MVC means? Okay, so basically when you write a complex application that should render stuff to the user. For example, if you go to a website you see something in the browser, right? Basically the view. That is what is being displayed to the user. Okay, that's the V. In the back end, in order to see this website here, for example, there is a database somewhere on Earth which has all this content here. And there is going to be a controller that takes out this data from the database and usually there is a model that is able to hold this data for you and the model is going to be passed to the view and the view will render the data. Okay, it's probably still very difficult to imagine but it's a very famous pattern when building web applications or any kind of GUI applications. So Facebook invented this software called React.js which makes the V in MVC very easy, supposedly. Unfortunately, it's a little bit difficult to understand but I was using Python for maybe five years. I was using JavaScript even longer, I don't know, maybe eight or nine years. Mostly jQuery only, like most web developers. So I didn't really write pure JavaScript and that was my first problem because jQuery spoiled me so much I was really able to read pure JavaScript and that was the first hurdle I had to take in order to get into the React ecosystem because when you read React code it's basically pure JavaScript. So the task today is to see how we can marry these two technologies, how we can build a little Django website that uses React.js components for the front-end. Okay, that's the big picture. And we will do this by simply going through the step-by-step guide here on GitHub. I didn't prepare any slides or anything. So basically when you go to this repository here on GitHub, so it's my username, Mbroch, and then Django React.js boilerplate, you will see a readme file that tells you how you can quickly install the master branch on your computer and then you could do this command, this is from Django, managepy run server and go to your browser, go to localhost and then you should see something. But this is basically the end result. Usually if you want to follow the step-by-step guide, you will scroll down here in the readme file and click at step one. So for those who are familiar with Git, who knows how to use Git? Okay, almost everyone. So you know that there are branches, right? Usually in a normal project everybody works on the master branch and maybe you have a development branch. But for this I had this crazy idea that I will create one branch for each step and then make sure that people can, you know, switch through the branches which is pretty easy on GitHub and follow the steps and compare. You will build files on your disk, right? And you want to compare if your files look similar to the ones in my GitHub repository, so that's why I made it this way. So the first step is simply creating a Django project and all you need to do for that is actually want to do 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 is 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, this is the name of our Django project, okay? And what this command here does is it creates a Djreact folder on your hard drive which already has a few files inside that Django automatically generates for you 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 Djreact folder into Django because it's a Django project. So what you will end up with is something like this. The Django folder which has a managed.py file and the Djreact folder and inside of that folder you will have the very important file settings.py. I will talk about this file a lot today so try to remember this. A URL.py and this file we can ignore. So I explain a few other things like if you install something with pip you should also create a requirements.txt file and put this same requirement into that file. So when you look into this file it looks like this. There's just Django inside, the latest version. That's just best practice. It's not really relevant to this project. Do we need to do something now? No. When you need to do something I will tell you. It's after we stop the recording basically. So after you ran basically these two commands here you should be able in your terminal to do managed.py run server. I already have it running actually. You should be able to do managed.py run server and then in your browser you can go to localhost and you will see the Django welcome website. That's basically the if you didn't do anything this is what Django will look like. It will show your welcome screen just to tell you that your settings file is correct and that everything worked. So that's the first step. Installing Django 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. I built this because I want to enhance my old Django apps and use react.js components instead of normal Django HTML code. So in order to hook up a view in Django you need to go into the urls.py file and you need to add this line here and I actually added 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. Then you need to add a setting that tells Django where it 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 two 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. Every HTML website needs to have an HTML tag a head tag, a body tag and so on 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 each view they will extend the central file. So that basically means everything that's between the block main here which is just a tag that says view one will be rendered in the base HTML file in here. So this part will be replaced with this part. Okay? 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. So when you go into the file you can see it's just this template with the block and the other two files they extend the base file and they fill in some content into the block. Okay? And that's the step. When you did this and you run in your terminal you run managepy run server you will see view one which is the thing that we put in view one .html in the file, right? Or if you go to the other URL view two we will see view two. 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 you excited. It's like well I just have to create a few templates I put something into the urls.py file and I can see something in the browser and from here you could start actually writing your making your website beautiful add more content and then afterwards you will get how can I have some more dynamic stuff how can I save something into the database and get it out of the database so from here onwards you will dig deeper into the Django documentation and learn more about Django which we won't do today. So the next step is the one where people who want to use ReactJS often struggle or give up so this took me I don't know maybe a few weeks to get my web pack config nice and correct and then what's going on like six months ago when I started using ReactJS for my project so why do you need to use ReactJS for your project? 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 I just heard about ReactJS people were pretty excited about it and said it's very fast and it gives you 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 it turned out to actually work and look really good that's why I decided to use ReactJS in the first place and a few months later Facebook released React Native and then we threw away my ReactJS 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 it's really cool technology but it uses almost the same code as the app 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 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 smaller components and it's all JavaScript code okay 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.js 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 Webpack is all about it asks you where is your entry point into your application and where should I save the bundle and then it goes into your files and gobbles them all up and tries to put them into one big file okay the problem is so usually when you develop like this with React.js 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 save your browser gets updated so that means that Webpack 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 is a tricky magical way how Webpack can communicate with your browser and tell the browser that the bundle has just been updated and then the browser will refresh itself and there is a Django application called Django Webpack Loader which has only one purpose 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 bundle 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 file name of the final bundle changes as well and that's a problem with Django because usually when you just hook up let's say jQuery.min.js 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 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 saves the files with exactly the same name but it's usually 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 the browser so the browser sees like app.js alright I don't know this last week already so I will use it again so then the user will be using an outdated version of your app but by just changing the file name every time the browser will think that this is a new static asset that it needs to download again and then you never have these problems that users have outdated code cool tricks so anyways in order to use a third-party Django application we need to install it same way like we installed Django so we run pip install Django Webpack loader and then most third-party Django apps are used in the same way you add them to your settings.py file remember I said this is the super important Django 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 and then we need this crazy scary looking package.json file this basically is the same like the requirements.txt 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 you remember when I showed you the requirements.txt file it only had one line Django equals equals 1.9.3 so that's the Django package for Python that we want to install and here is the same we want to install a javascript package called Babel and it's this version and a lot more javascript packages so but let's just ignore them for now so the config that we need to generate for Webpack looks kind of scary at first because I split it up into two files it's going to be a base config and then further down we have a second file which has almost the same name but there's local in here 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 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 8000 API version 1 but on your staging server it might be this address sandbox.myapp.com API version 1 and on the production server it's just myapp.com so you have the website is basically running on three different machines your own machine, the staging machine, the production machine and that means that your app which is in the JavaScript bundle 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 so that is the reason why we need three different config files 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 things that need to change for that environment 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 and this is the same in javascript here but it looks the syntax is 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 and then the question is what will actually end up in this variable name and it will be the thing that this file here exports and what does it export it exports something that looks very much like a Python dictionary you know that Python has dictionaries with curly brackets and it has lists with square brackets so javascript basically has the same thing I think in javascript this is not called dictionary it's probably I don't know it's called object I guess so we are basically creating an object that has several attributes so context is one attribute entry is one attribute output is one attribute values and the important one here is the entry point we are telling webpack where is the javascript file where my ReactJS 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 .js or .jsx in any way actually so by leaving out the ending webpack will be able to just find the file that's called app1.anything 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 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 more so and it will never really change as long as Facebook doesn't release a new version of ReactJS 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 is already in cache and doesn't need to be redownloaded 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 chunks plug in here and by saying that React should be a different entry point a webpack will generate two bundle files it will generate one super big bundle file that contains ReactJS and everything that's related to ReactJS and it will create one small bundle file which only contains our own code that we have actually written which in comparison to ReactJS is the base config so that's the purpose of the commons chunk plug in the rest we can ignore for now so that's the base config okay the local config so the local config first of all it imports the base config into the variable name config and then it overrides a few of the attributes so up here you can see that the 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 commons chunk plug in but if we are developing on our local machines we want to add the bundle tracker plug in alright I will explain what the bundle tracker plug in does later so if you would run Webpack now it would probably crash and give you some syntax errors that's because there is a new version of JavaScript emerging called ES2015 and this has a lot of things that for example it has classes it has this kind of way of importing things so this looks you know this is still JavaScript down here it looks much more like Python already 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 teach Webpack that it should be able to deal with the new way you need to create this bubble RC file and put these settings inside this is also a pitfall like when you want to get into ReactJS development you do everything like that you can describe it in a 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 you need to copy and paste this into this file so now we would basically have configured Webpack correctly but we don't have any JavaScript code yet that Webpack can run so that means we need to create an app1.jsx file which is supposed to be our entry point and in this file this is actually how ReactJS looks like 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 and for demonstration purposes I went even further so this file is using another component called headline which I'm importing here so we need a third file which is another React component so you will already see a pattern you always see that there's a class that has the same name as the file name that's a good convention and it extends React.component and you have to import React here so that's why React is available here 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 you have seen this H1 tag here and here we there's some magic happening there's some variable stuff inside the HTML and the interesting thing is and here's the same 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 one step up the headline component can now be used as if it is an HTML tag as well 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 correct font size the correct font family and all these things so that in my code I just use headline and I can be sure that all my headlines look exactly the same and if somebody says alright we have a new style guide for our company all the headlines need to be green now you just need to change something in this single file here okay so just now you have the variable rc and you mentioned the es215 yeah you say that the before code is using 215 and after is using 216 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 it I would probably not be able to use it for executing webpack 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 webpack config so I just copy and pasted that to be honest maybe you can try you can try to replace this with the new syntax but I guess it would not work in the webpack javas file you want to use because you mentioned that most of the tutorials never tell you about the variable rc and we also don't know whether the tutorial will work using this one that we are doing now yeah so you mean for now we just tell the system to use es215 exactly so how it looks like the file system is in your jango folder we will now have this babel rc file and whenever you execute your webpack it will try to look if this file exists and it will use it I mean it's probably only half the truth actually webpack is using something called babel and babel is the one that is looking for the babel rc file I think that's the point when we execute webpack we are not using babel yet but webpack is the software that invokes babel so while we are executing webpack this file is not being used and that's why I think the new syntax will not use when you execute webpack but I might be wrong, let's not discuss this in great length because I don't want to tell wrong things and end up on youtube like that so so basically we created the base config file and we created the local config file which uses most of the parts of the base config and we created a reactjs folder which has our entry point which is this first component here 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 you can see actually reactjs is not that scary the mini smallest component is just 5 lines of code and it's relatively easy to understand what it does and that's what they say on the facebook website give it 5 minutes they are 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 5 lines of code give it 5 minutes and then you walk down the rabbit hole and you don't find the way back anymore ok and you end up becoming a javascript developer when you are actually a python developer so this was step 3 and hopefully when we run this well 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 in my tutorial will teach you how to actually create the bundle but in our browser we can still see the old view 1 that's because in our jango template we haven't made any changes we should now include the new javascript bundle that we have created in our jango template and that's the thing where most people that use jango 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 1.html you remember that there was only one tag here basically saying to render view 1 this is this view 1 here now we put something different here now we put an empty diff container here which an id called f1 and this is something specific to jango because we are using the jango webpack loader third party app which we have installed using pip before we are now able to load a so called jango template tag the template tag is called render bundle and we can use this template tag to load specific javascript bundles with certain names and when you remember back to our webpack config we had two entry points the first entry point was called app1 and the second entry point was called vendors so those are exactly the same two names that we will use here in the jango template and what webpack jango webpack loader actually just does is it teaches jango 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 so basically when the server returns this template it's going to be an empty website just a white empty page which has to load this javascript stuff here first and once this stuff is loaded then it will replace the 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 jango settings so that webpack loader knows in which folder the bundle files will end up and where it can find these webpack stats json file so I haven't really explained what these do the thing is every time you run webpack because we are using the bundle tracker plugin in our local webpack config it generates this file here and the file basically only says that the app with the name app1 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 jango where this bundle can be found on the hard drive okay so jango basically only loads this file and because of that file jango knows when I say render bundle app1 it knows which javascript file to import okay um yeah so if we do all this and so this is step 4 right yeah this is step 4 and we run managepy 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 why is the 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 jango template hml stuff we are now seeing the output the result of our reactjs application okay um alright but so far this is still very inconvenient because every time you save 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 create a new file called server.js this is another scary thing that many people give up and we need to copy and paste this whole code I won't even talk about what this does it's basically it's a web server programmed in javascript and we will use node.js 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 webpack local config and so this was our entry file here we need to add these two lines okay and we need to add this line which didn't exist before and we need to add these two new plugins before we only had the bundle tracker plugin but when we want to do webpack when we want to do hot reloading with webpack 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 works, oh it's great never touch it again and don't worry about it so if you have all this in place and this is step 5 you can do managepy run server you can go to your website and oh my god I see nothing this is because I forgot that I also need to run the node server.js so when you want to develop your site now you have to remember always to execute both servers the Django web server and the node web server when you do that now our app is rendered again and now look at this this is the cool thing when we save our code let's say we change this to oh my god it works and save oh my god it works see it changes immediately correct when I save I press save now and there is 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 longer looking on to the hard drive for the bundle it's now looking to this port 3000 web server so it's trying to fetch it from I don't know where it comes from from memory I guess um and this is really powerful this enables you like if you have for example in your office you have a two monitor setup you have the website here you have your editor here and you code and code and code and like creating beautiful user interfaces is really really good with this because you can try like make it one 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 okay um so this is a great way to build websites um so yeah many people already got that far and then the next question is okay but how do I deploy my stuff to my Django to my already existing Django infrastructure to my servers okay um and as I already explained in the beginning what the only thing that we need to do is um we will create two more webpack configs one is called stage.config.js and the other one is called prod.config.js and those configs 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 um we will have a specific folder for our bundles which is called bundles and we will also have a specific folder for production bundles and for example um this plugin here the defined plugin 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 for the real production website all these kind of things or for example I like to describe my API based URLs in here so if I run webpack 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 so that means every time when we want to release a new version this is how you call webpack this is the command and then you basically say I want to run webpack with this config 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 after I tested it on staging I want to have the same stuff on production as well so that is a lot of stuff to type in the terminal 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 Python so we will use pip install Fabric and we will create a so-called Fab file in our root directory and we will put this little bit of code into the Fab file which basically only says that we have a Fabric task which is called webpack and whenever we run Fab webpack on the terminal it should execute these for terminal commands 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 when step 6 okay when you do Fab webpack it does all these things it's just one command but it's executing four different commands it deletes the already existing bundles from your last time and it generates two new bundles for staging and for production and it creates them in the same folder again okay so when I run git status now I can see that a lot of files have changed some files have been deleted and there are new files that haven't existed before because they all have different file names that's why I want to delete them because if I only save new ones I will end up having 100,000 bundle files half a year from now no need to to put them into version control all of them so for those this might 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 managepy run server and note server.js 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 a fabwebpack 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 my Django website and that's the cool thing that means you are now using React.js but you don't really have to make any changes to your infrastructure the way how you deploy Django stays exactly the same I mean every company does it in a slightly different way so it doesn't interfere with that at all so 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 less time we will have to try it on the laptops later so I have to find a good middle way anyways so yeah quickly okay so the thing 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 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 is some information that has been given into the component from the outside okay and this works for small components that only deal with themselves but what if you have for example 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 they don't necessarily know about each other so how does 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 when the counter will listen to I have been clicked and when he hears when the counter hears that event he will increase 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 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 exist should you use there are like 10 difference once maybe I mean three months ago it was 10 different now it's probably 20 different 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 okay you will put that into a file for example called counteractions.js oh that's the typo here I need to fix that and basically what we do is we create a constant which describes the name of the action so let's assume there's a button you click that button then the action increase should be emitted okay and so redux this will make more sense later when we look at the next file by definition all the actions should have this look there should be JavaScript objects or if you think about Python there should be dictionaries and there should have a key called type and the type should be 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 look at the next file so what you should keep in mind is the action creators describe what kind of actions can happen okay 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.js 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 a more complex database for example I don't know you have a user profile then maybe you would have user profile here or let'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 in 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 and at the very beginning we put in the initial state and every time when an action happens so when this increased action here is fired it will be put here as the action variable into the reducer function and with it the last state will be put into the function so you can think about it let's say we click at the button 20 times in a row that generates 20 actions that will be put into a queue and then slowly each item 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 together with one of those 20 actions and then inside of this reducer function we will manipulate the state so this is a weird new JavaScript syntax here so this does not mean this is a dictionary don't get confused 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 this is basically what this statement means 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 old state we have to return a copy and then in order to get redux working you need to remember our app 1.js x file it used to be a very small component now there's all this stuff here in the file before the component was only using the other subcomponent and now we have to import all this which is 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 it assembles all the reducers that are available and generates like one big store you can think so the store has several reducers so remember we only have one reducer and the reducer is called counters and it only counts the clicks but if you have a really complex application you might have a lot of different reducers like maybe one reducer that only deals with user profile data one reducer that only deals with your products if it's a web shop one reducer that only deals with comments if it's a blog or whatever and your app might be complex it might have a web shop and a blog and so on and so on so that's why you want to have your data capsulated in small reducers 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 auto most component and then this component 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 re-render itself automatically that's kind of the idea so when we go into the so this is at one is our auto most component 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 at symbol here means it's a decorator and we basically just say that inside of our class we want to have a variable called counters so I made up this name here counters I could name this in any way and counters is the counters reducer from our store because I said that we are assembling all the reducers and they will be in the state variable here so we could have state.usr profiles state.products, state.whatever in our case we only have one state.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 it's now part of the React.js properties this will confuse you because you need to read the React.js tutorial to understand what properties 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 so let's just try if this thing works because it's always so much nicer when something happens on the screen step 7 okay so I run manage.run server so this is my button here and when I click it increases another component okay the one is just embroidery in your browser when you refresh it it becomes zero when I refresh it it gets back to zero exactly and that's a good point the last step will deal with that is the database so every time you reload your app it refaches the data and displays the data that was saved in the 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 alright cool so that works so two more things styles so you all know a little bit about html who knows about css probably probably right who knows about css okay so it'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 this as files you will no longer have central stylesheets 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 3000 lines stylesheet that nobody dares to touch by adding more stuff to the stylesheet because you are scared to delete anything because you never know when your website has 300 pages and sub pages 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 their css files properly most of the teams I've worked with 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 you wonder 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 it's a relatively small component and they are usually always pretty small and it's a relatively small chunk of css code so 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 so that means you will actually have only css code in your app that really matters and no dead css code that nobody uses anymore but the syntax are different yeah the syntax 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 camel case so you start with a small letter and then after when there used to be a dash here this letter has to be capital so and there's another library called radium actually there are a lot a lot of different libraries for the react.js ecosystem that help you writing styles right there in javascript and I just happened 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 the 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 alright 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, it 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 you are like okay cool now I know how to do a Django I know how to do a React.js 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 would definitely ask yourself and that'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 utilities.js file which basically okay so no I have to go one step back 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 APIs and there's something new coming up because you might not you might not be using jQuery if you use React.js usually you will not use jQuery anymore so how do you do ajax requests now so there is a new function coming up here called fetch sometime in the future browsers will just natively support this and Node.js on the server will also support this but right now nobody really supports it so you need to import another library called isomorphic fetch and you need to import polyfill for your browser and for Node.js make sure that this fetch function here will work in your browser and on the server so just accept it like maybe 3 years from now this line will no longer be necessary hopefully and the fetch function is returning oh god now I need to go into promises it returns a so called promise ok I will not explain this basically when you talk to a server there are several things that can happen first of all the response will be successful the server gets back to you as a 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 it doesn't make any sense so the server will return with errors there's another very common error that can happen the 500 internal server error you might have seen that when you go to a website it's just white 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 400 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 time out probably so I basically just wrote a function the function is called request it requires the URL you want to talk to some additional options we are not using the options here in these examples and then four callback functions so this is a weird thing that actually you can do this with 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 script 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 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 the two steps ago it's another action creator right we had we had an action creator for counters which had these constants here 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 you mean the word is fetch underscore info is something that we have to fill in also that's something that you have to make up yourself so I didn't tell you that so I'm trying to extend our app so that it fetches all my own github repositories from github so that's why I call this fetch repositories 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 is supposed to fetch and you might remember from the counters action creator that it should return something like this that has a type and returns the increase constant 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 this like a hundred thousand times now I still 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 is giving up huh don't give up Sherry almost there is the last step and almost at the end of the slide alright so I'm basically first I'm dispatching the action that tells my system that I'm going to talk to the internet now this is 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 so keep this in mind keep this function definition in mind when we go down here here we are using that function 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 fat 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 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 alright and then we would create a new reducer 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 this 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 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 something that looks like html 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 or is it just repositories in that case we render a loading screen otherwise we render the real component 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 fetched from the internet and this component looks like this it's basically using 4H to iterate over each component and then render just a div with the component name so 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 so much more interesting last step run server saw that it shows loading and then when Github responds with my repositories it's showing all my Github repositories this is the same that you can see when you go to my Github profile here or here repositories repositories see these are my repositories here and we are now fetching them because Github actually has an API you can go to api.github.com I forgot the name it's probably users and then the username and then repos and it will return this lot here which is so called jason string and here it is like chantweep it's one of my repositories it has this id and this is the full name blah blah blah and there's a few a few extra information about this repository so see chantweep also shows up here in our react application alright yeah so 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 is 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 managepy run server, node server.js 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.js to just go through this step by step and yeah hopefully 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 maybe 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 so 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 at a filter and it reloads immediately and shows me the result immediately okay this is not a good example let's go to art or for example I can click at next page and it just loads the next page 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 so I can filter for prices you see and it always changes immediately so it's pretty fast the re-rendering of the react components is 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 so basically when you think about your application you only think about a data structure you think about what do I need to display to the user and it's just a data structure and then you write those react components around and they have access to the reducers and 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 need to do and the DOM knows how to update itself okay thanks for watching I guess