Merken

Django and React: Perfect Together

Zitierlink des Filmsegments
Embed Code

Automatisierte Medienanalyse

Beta
Erkannte Entitäten
Sprachtranskript
the of this and thank and the new I
on the so what is Jack and so do it again well also suffer
developer from New York City on and 1 of the reasons why I'm giving this talk is most of my recent projects 3 of my last for recent projects were Django projects that also used react so I dug deep into how that you can fit together and I really like how they fit together hopefully I'm somebody has it was you worked on the reactor projects that OK so again fall so not a room full beginners that's exciting if you are a beginner it I kind of during this talk for people who know GenGO but haven't really used reactor yet I just think about it look at cell i and j user for for over 5 years so react uses for about the last year or so a little longer than that and afterwords where they don't consider myself to be any kind expert on either of those things just someone who put in a lot of time working on Django projects and react projects and might have a little bit to share the so i in Ryan talk faster but talk to advanced of slow me down but I it's kind of a broad scope to this talk so more worried about from not having enough time and I am not like filling time I'll try it sometime vacuity the end but that's my contact info you can up on Twitter again but what if you have any questions that we didn't plan for today I also here and the next couple days for this process so what are the goal the sound of this talk uh the title of the talk really could be a crash course in react for people who already know Django on the the 1st goal is to understand what we have done was is how we act works because a lot of people talking about it and people in the general community some people kick the tires on some people abuse heavily Balog people have so it's kind intro to react for GenGO people and and uh the goal is to build a mental age for of react so you know I think about it it's getting longer than a 45 minute talk to build a mental map for reactor but hopefully this will be a good time on when they become familiar with some of the the parts of a reactor project and learn how to set up a reactor project inside the Django environment I who were the other big challenges of learning react is lot react projects and up most of the reactor boilerplate examples use J x and point would you JavaScript yes extra yes 7 around so will be diving into a little bit about this you know what you're looking at that is 1 things that can in some intimidation to where we have and then finally will bring altogether by showing how genuine reactant fit together in a project and we actually start here a little bit at a high level view of before digging into the reactor core will look at a separation of concerns it genuine react project that uses both so Django follows the MVC pattern for building user interfaces in the NVC patterns are the 3 parts of the model view and the controller and the all interconnected this is kind of gathering interconnected the model updates the view the view is what seen by the user the user can do stuff to manipulate the controller but this is based on the user's interaction with the new and the controller updates the model this is have Django works sort of is a question on the Django fact page of Django appears to be an NBC framework but you call the controller the view and the view the template how come you don't use the standard names and the incident and again this is your interpretation of the city the view describes the data that's presented to the user it's not necessarily how the data the books but what data is being present but it's sensible to seperate content from presentation and that's where Django templates come it's kind of pedantic answer to that question but that's also part of the reason why I like that but what they're saying essentially that in note the view part of the NBC is split into 2 things the view that you keep in view is that the Y that renders data to your templates that actually or the view that the user sees so the map of NBC from genders perspective looks more like this where the model corresponds to your models that my file your views corresponds to use that party there in the data your templates all of which is what the user sees but here she interacts with the templates to manipulate the controller which is kind like the framework itself and the controller updates the model reactants here reactants with simple are it replaces data templates and based on how the user interacts with those templates dispatches actions that that of the gender update the controller so this is what you're NBC looks like in a reactor project of the 1st thing about reactor to understand is that it's not a full EC framework and doesn't try to be but if you use it in Denver practical fit we're templates on the news to fit it won't replace anything else in project on and people might have looked like it's the broad view templates it's not just the templates files but also the files and packages that you're templates use the query potentially CSS all your JavaScript files of that are imported into so that's why would you want to do Django templates work perfectly well why would you wanna stop that stop using them and start using something that is significantly more complicated story but that that but they have to learn from scratch and that's outside the Django ecosystem that you already know real well and law all and the answer to that is me don't need you don't want use react and it would be over engineering to use react Django templates are perfectly fine for plenty of sites of and we all know that because we use them for plenty of sex they work but react lets you do certain things that would be really really hard to do if not impossible to do on using gesturing at it's the 1st thing
on that reactant what's what you do is listen to her ear yourself into a single page and Our from the user's perspective single-page apps with about the right way they are faster they feel more modern and it's something that's really been popular JavaScript community for a couple years now and has been a little bit slower to become popular in the general community and the Ruby community and other channels are doing some work to be able to use templates to build single-page apps but this is a big reason why reactors deserving of a lot another thing that you get with react is the ability to reuse parts of your code base for IOS an Android in addition to just your where that method that too much into this so but it basically works like this your react to the you react templates are made up of components they're really building blocks that you assembled together to form URI wine and each 1 of those building blocks This 2 things it put them some internal logic and based on that internal logic it renders a chunk of data users see it renders a chunk of you walk with react native you get to keep the horror of your templates that perform that logic and use them across platforms and then render out different who either HTML or westward job of based on the platform that the user is used and finally this is probably the biggest reason why reactors kwanzas as because it has used it makes it much easier to manage and manipulate complicated stayed on the most small projects there isn't complicated state status symbols so there's not much to managing people your head were lost when you start working on a bigger project of managing state can become a Roman and short something that you've of potentially run into that is the biggest selling point the reactor the biggest thing that makes much much easier so resumed inferred that on the reactor core of this man on so that you can understand it and get a feel for that organism back out and look at how Django and react work together as part of the whole system all a lower thinks is 1 % reactors taking care of your you why your views on that of the raw data all view layer is really just an API layer react doesn't care what the rest of your status but using something like rest framework is it's a heck of a lot of sense of the cost that you use are just the the i layer by default such the home page for you highlight a couple of things that differentiate it from other UI frameworks on if you understand these 3 things still understand the fundamentals of react the first one we already talked about its that react doesn't make assumptions about the rest of the technologies that react your UI layer it provides a really good tools that arguably the best tool set for of building your URI and it doesn't try to do anything else other than that the 2nd point on the home page is that react is declarative and this was a little bit of graph on react makes it painless to create interactive you you might put in abstracts after the word pair less of it it's painless once you go through the significant pain of like learning how to use it but once you understand that is pretty and let's say that you got our and here it's quite easy to use once you get all that that you design simple views for each state in your application and react to efficiently update and render the right components when your data changes so basically this means that when you use react your application state is kept separate from your dog you declare what you're down should look like you did in a certain on state that your application is in then applications the changes here down changes as a result of that but react controls this change you don't control this change you only manage the state and what the state what the doctor supposed to look like given state I and finally declarative use make your code more predictable and easier gene to debunk it also makes you code a heck of a lot easier to test so how would the card component compares with doing things the interpretive with RG queries with the very simple page again but in India and you have to have these where state 1 is the bottom shows the word following and it is their state to the bottom shows the word shall and it is not this is a good engineering problem of putting the actual HTML page where the dog elements are declared but you have JavaScript file by the click about to that click event will call function every time it's fired the functions that check nets speed the data is entered by whether that is visible or not and then interpret from that state whether or not the there should still be showing interapplication state based on what it sees and from that interpretations you didn't show that have or hybrid this state is interpreted from here not I did this is really bad inquiry about a lack of but yet how you would do the same thing in react it's gonna look very different of reactions components rearing talked about that a bit and this file represents a single react component the easiest way to think about components is as a container for some part of your URI and this code looks uses yes 6 or might look a little bit different than the dogs that they used to seeing topic that just 1 2nd yes 6 is the 2015 JavaScript specification it and a whole bunch of stuff to JavaScript that never was there before it into it ends module see can import and export JavaScript of from files to city can with Python packages it's iterators and generators promises is also yes 7 which is finalized but last month but is really widely supported debt the point is no JavaScript's
evolving and as it does it's becoming we were Python unreasonable tweets that I found this of people noticing the similarities between modern JavaScript and Python my favorite but is it turns out yes it's up in the world of the right turns out is 6 is basically Python with the added bonus of irritating from and has I I this is me during a year ago the by the time they get to Iose JavaScript and Python and and syntactically and also back to the x component that we're looking at it represents a single section of your URI and those 2 things on inside of the 1st thing it does is it manages the state of this you section and the 2nd thing it does is it renders the component itself and actually renders the down elements based on the state the internal functions I collapse known as we see a component a whole at the top we have the um we were reacting components because espoused inferior components we create our component as a class that extends the base reacts component we can do that now from insider plants inside a reactor component with 3 functions functions the constructive a function call toggle showing and when function and then we will look at all those in a moment but all the way up Bottom up we have all our export statement to eksporter component so this is 1 thing that's Python JavaScript a little bit different on in Python every and object is exported automatically in java script you have to explicitly export the things that you want to export so to be able to import somewhere else so let's go back and look at those 3 internal from functions the constructor looks like this it says the properties and the initial speed of your component of we haven't talked about our properties and you probably won't get a chance to talk about them but they're essentially immutable parameters that that come from other components you cannot change in the context of the component that you're looking at In this case there are no properties but there is some state there's uh state made up of a single Boolean saying whether or not the division the panel showing is a function that we called toggles media showing value distinct from true false or from false to true so we use this starts at state to do that that's how you manage internal state inside a reactor model and then finally the render function is exactly what you expect it to be with what it's what gets rendered in this case 1 of 2 things can be rendered at all depends on the value of this . state that the show what's rendered as JS axis it's very similar to HTML but you can use variables inside the effects the same way that you can use variables inside of the Django templates and about yet I just want to offer secondary along but property that we put on each 1 of the rooms on but it's it kills that hobbled showing function that we define that switches the internal state and since the component states change the component is that rear-ended based on the new state if you've ever heard the expression down actions up or 1 databinding or one-directional databinding this is what people are talking about when you get the clip of that action on that event travels up the component it changes the components state and that new state whole is the renderer function to be recalled based on that new state and that data flows down the actions go up and it goes down back to the log might not seem like this pattern is any easier and it's definitely a more of a complicated pattern for simple sites I In this example there is very little state will react shines is in examples where there is a lot of state to manage and when different components are affected by the same state so that brings us to the components themselves our reactant and pick up on this already is component-based but you build encapsulated components that each manage their own state and then you compose them to make complicated you artists since the component logic is written in JavaScript instead of templates you can easily pass rich data through your app and keep state polio related here now as we just both a single component the complex react URI is to assemble the single components together like lenders you react that shouldn't be a model genetic collection of components that each ideally there's a single thing or renders a single part of your you are so let's look at an example where you have a single page has to use a landing page by age we modeled as a single page ad so the top of their component in so the top component in our tree is going to be the same in both cases the quality of next the I'm having the same here all at the top that's what makes it a single page what is a plugin called react rather than the to cover it handles URL routing inside a reactor at all that but I just want to let you know it exists and then the index component of the render 1 of 2 possible components based on the properties it gets from react router it's good either render landing or price landings a component that renders your landing page pricing is a component that renders replacing page each of those pages of might be made up by other components making it up by Apple Creek of other components but the rendered page of your index method is gonna look something like this where are properly monitored in is not rendering HTML is rendering other components based on the properties that it gets from the around so render can render 1 of 2 things you can actually rendered Don or it can render all the components that eventually further down the tree render not and when the have made from your router changes what changes without a page reload 0 applications built like a giant cream with the current view is made up of all the components being rendered all the way down to the base of the tree and when your application state changes all components below what they're being rendered are going to internally check whether the need to change the world and if they do know we ran it sounds like that would be super inefficient of the way that works is actually very efficient marketing it into that but also it's really fast and performance and as we were saying that reactor 1 bring it back and show you how to integrate react with the Django project because that's what this talk is about but so lighting ran this is how you uh get started using Django would react together at the 1st thing is that you need of knowing of foreign you know is what's going to manage all of your JavaScript packages and including react so you install known and in the end which is the node package manager and then 1 would visualize and the
inside the Django project this is going to create a file called package that case time and package that is similar in terms of what it does to requirements . txt for that you are what you install the node packages that you need and the way to do this it is of indium install package B and then add a little flag at the and to define what you want that package installed globally where the what that package installed for of the dead dependencies for development only or from development and production so here is what selection from a package that we found from 1 of my projects but just a couple of things these are all the tendencies for this project all that's needed for broad and also for down a couple of things to focus in on the role of the stuff that starts with babble of babble is a shared for a lack of a better word that takes year ES of 20 16 or 20 15 year year yes 6 JavaScript and reduces it down to JavaScript the older browsers can read of radium is a package that you probably won't use in a typical reactor project I like it a lot because I have a vendetta against CSS and 1 of the things that they react what you do is eliminate all CSS really help help you do it by what you do you queries within react without using CSS I what packs of all the stuff that starts with a pack of woodpeckers in a module builder builds the bundle for and there is a gender template is going to read from and build the act from on both the pride and for now it's probably for you could eliminate the need for tools like grunt angle and it also gives you have reloading so just like when you change a Python file you're server restarts when you change in JavaScript of file you know answer will be able to restart if you look at the only way to do it it's just kind of preferred when do I guess he preferred window it and then finally something that I am product and a just talk about is redox of which is something you should learn and update you so it's a package it's also a pattern for managing and updating application state that let's all of the speed of it's happened in the same place so you can simplifying state management even further and also put them fools there so it's easier to see what's going on on the the next step is the redox it's 100 per cent with the time it takes to learn that there's a really good video store so by the creator of redox of that I linked to your publish the slide there which by the way but you should definitely check that out if you if you can react but then the next step is you make a server that Js file this is the file that you used to you all run your node server in your data but it's kind of like marriage . P Y R 1 server of you would do know . server . org nodes based server that Js to start your I mean it's 1st 1 looks like this and it basically just tells you what that Europe when packed development server how run and it makes use of the configuration file restoral your when pattern figurations making the invigoration file is the next step of the config file I couldn't fit the whole thing about here in figure actually is then 1 the now no but of this just to it so all I'm gonna happen described this without showing it unfortunately and now mean I can't see it yet but this year we had our the gives you the ability to use different alluded to use different modules to use of different of inputs and outputs the inputs that all entries and the outputs which is just pulled out but but is the part that you can be most concerned about what the output does is it tells whether that we're to put that people bundle that it creates so that JavaScript knows where to lose that gender those were look for it and then entry defines what the top components in your company in a react component is so if you want a slowly integrate react into an existing Django project you might have multiple entries of small react at inside Django to manage a small things that grow over time but you get a multiple entry points multiple react trees I guess you'd call them and you would define them in your web app have I only had 1 inequality check that we now have similar to that of but yet is adjusted to that and there's also you index the intercept file which is your top most react files which are included just and then 2 more components that that index that GSS users at room which is where you're you're perhaps rooms or defined and at that J X which is the uppermost components that renders that has the potential to render down and not just to render other components in the other components to but can also render them like a loading and finally there's a little bit to above but together you install the Django when loaded which is a nice little package that lets you hold your when PAC bundle so all of that of the reactor code the other jobs for packages data using but you call that from inside a Django template and you again with pack loaded to install that's we and if you have multiple entry points you want to do some additional configuration that's really well documented on when peddlers of get out and then finally the last step is inside a gender you load random bundle from Europe from Web lower at the top of the page and then inside the HTML of the page so we render the bundle that we're trying to render we call that mean and what type of thing which is this random bundle make at that that is basically how to integrate it into a project so I have more stuff that I can cover and prepared to cover but I figured now would be a decent time to stop for a life 2 or 3 minutes of questions on in case anyone wants to jump and say no that might be a green territory there I the
um reuse the same code base his arms and may seem but only to know what is the reality of that because and there too says exactly the same but I don't think and you can complement urologic right and and you're render short to actually run in different things right and you In a web application you have different complements the source of that what the reality of that yet I haven't worked too much with that but I know several people have this I know you're talking about with the reactant right yeah so react really 1st of all I last react made is more mature than Android reactive right now so most of the problems that people are having seen to be coming from Android react native it's good for certain types of applications applications that like render template abuse it's Bedford applications the superannuation at each have a log like interstitial animations on is also what I heard in terms of structuring that project react what you do 1 of 2 different weights on in side a component you can rendered different code based on the arms based on whether it is aware that war and I was sad or an Android app another thing that you can do is you can have different components to define what your app it so you can have index components that Js acts next the index component . IOS that day effects and you will just import math as index component and react smart enough to know that if you're building an IOS app that wants to use the 1 that I Western Europe building into that wants to use the 1 that suggests that does that answer at all but yeah I think that the that is
if you want your mobile acted you totally different things than your webapp you probably wouldn't but if you want your mobile app it's really just a distribution game where you want your Android Appadurai what's happening very similar to 1 another then being able to share the same code base and the exact what sense so I
have to put questions you mention generous family react if was the willful like for the log for example and sending Mencius have to then I simply describing a token gestures from the key in a pending into Cuesta was to react lived yeah on all so is encoding afterwards through here around for the next couple days basically the way that I do it is i have AJAX calls inside my redox workflow where all the way a from the perspective of a component it I just had a call that says and get I forests or something like that and inside that get artists functions well defined it's going to check what artists I worry have in mind a redox store redox is kind of like the back end of year from and I'm not getting deeper than I wanted to others but it'll check need to make a fetch 1st of all checkpoints need to be indexed call if I do it will make that index called get the response and then loaded into my browsers local store the on the appreciate it probably doesn't fully answer your question no sense of mn expression is I'm reacting get really complicated as you know you can have models in a lot of business logic and and in the descending on the back and in your experience how do you handle where that latitude land as far as the models or models and react but when we don't have 1 sure you rapidly have models that has modules so you're like in importing modules from its not like Django models so much on I guess you react data stores could be similar to modules but on those would be populated by the war so you Django models on so what I would typically do is I would get the data from Django put it into a reactor have been getting and if I need it again and sort of used it the same way that you would kind of use light SQL like if you're building an IOS app where you have like a local data store just for that user just for that section I and then everything else just wasn't going going you have workflow you check if you need if you do you read Fernando if you already have you know as events yeah cost the the the and fearlessly type event which 1 of the conversation around and can react together and the question we use about that style management and CFS you the events and and they're using radium for a new breeze shirt are you using any of libraries at Khan Academy has 1 of the things that had to manage mind styles in virtual dominance not if you I'm not using the basically my CSS is so I've also put a kind rigid separation between the components that render pages are only made up of all the building components that don't manage any internal state so a component from what I have a component for this and things like that and I define with those should look like they're getting props to them and then all the region calls done internally and I'm really actually use radium per the harbor and focus new queries things like that for things like when I do that declaratively by having a reducer that manages the window with so I can access that declarative actions the major question yeah it that and how would you reuse any stature of this the short arm you just have it inherit from of parent like if if if you're using the same button everywhere you you really don't have you're importing the buttons interior components so it's not like you're bummed almost becomes a composite of the DOM element and also the style in the same way that it would be if you had a button that you put like other but success on if you use the bootstrap and you get it my question is about a little bit of architecture in or maybe deciding when you are a where were you should migrate your application to something like react like for example the of the button except let you made is traveling in Jake right there but I'm how do you know when a could really use something that manages my state instead of just adding classes to make stuff and checking I would J. query that you know in selling their reactors not they go 0 1 command thing right really have to commit to it is fairly gonna change your built in a bunch of stuff yet so when you know air we should really be using something more robust than just japery you know I mean I I would say if you're starting a new project and you already know reactor makes a lot of sense because it's no harder to do it that way if you're starting from scratch if you have an existing project that isn't using react being you'll know when you're spending a lot of time debugging of G query people as managing state is but issue so like do that exact calculus of whether or not the investment is worth it really has a lot to do with how much of a headache it is to be of fixed problems on that that happen when state in our like interest so if things for the talk i have heard a lot of different opinions about combining like front and back and especially in our data projects and so I'm wondering how you handle of packaging up your your project for deployment so since logical that the opinions about separating front and the back and bundles and what not later allowed people that I work with the with the against having pets you know the depended on and the and and I can the agree that but I wanna see what you thought about that but yeah I mean I tend to agree with that as well like of the Python Django has to run on the server back and reacted either be deployed on the server or on the line of the run and I liked it a separate so yeah and so that was answer question that the thanks for the talk this really demystifies react and makes it clear that this is state-based you technology yeah so and so that the previous called the previous questionnaires somewhat better through the issue that I want to know about which is when you're in development mentioned running node In the both as a sort of compass like watcher and also as a server for development to serve up some resources that they can do is gonna call for am In the production and deployment I gather that you don't do that and I just wanted to verify that that's true that's exactly right here OK thank you so well found laughter is any more questions about jump into some stuff that I wanted to cover but didn't have find off so stuff I wish I had time to
cover this is also a really good at lying I don't know study guide for what to do next if you're going to start doing so any react development of the 1st thing is the component life cycle so inside every react components they're 7 things that can potentially change the props or the state of that react component it's only 7 but knowing what they are and knowing when they're holds in terms of where the component gets instantiated when component gets released on the called mounted and unmounted from can be really helpful I have a slide in this that you can look at that point there's a brief description of what each 1 of them is on the next thing is flux and redox also flux was the the illustrate react came out some people found that managing state in between components in react with sometimes challenging someone solve that with a pattern called flux that let of state be stored in 1 place relative to a component and the other components lower down the tree would access that the indirectly it would access that state as properties so they could be and it directly but then they can past actions back to a flux store that would then cause it all to update the problem with that is you have a whole bunch of different bookstores at different levels of your app really redox which is kind of flux like architecture that everyone's moving towards is like flocks acceptance says all of your state transformations all under state transitions should happen in exactly the same place in a redox spoke for a reduced and what that what you do is you have your application state all in exactly 1 place a giant j Suntree basically and your application renders from that if you want to change anything in your application development or whatever you don't do it internally in the components you dispatches action to your readout store and what redox does is it preserves your last state but also creates a new state for active transition into of what you do is is you debunk things a lot more easily because you have what your state was what your state now in is so any time you can book so that any time in error gets thrown for a user that it sends the entire state history to a server so that you can debug more easily it lets you see when you react it with your application state is all of 1 find all in 1 place it's uh super useful to work on react router and redox rather those are the 2 routers that people use for URL routing inside of a reactor into essentially the same thing that react rather is simple and perfect for most apps redox rather in some more functionality that react rather doesn't have it's probably too complicated it's not too complicated probably overengineering thermostats but if you need it it's weight while and then and yet I will put some just war authentication and access restrictions using Django that's something I scratched my head on for a while and that the slide before I publish that basically you ran your components inside an authentication wrapper that checks whether or not a user is logged in prior to rendering the component and then other yet we all organs cancel and this learning
react is hard because it's hard it's hard because it includes a heck of a lot of patterns that you probably not already familiar with if you haven't seen before father but a little things to learn their each easy on their own but altogether it makes learning react FIL overwhelming at the beginning or at least and for me but once you know reactor can make state management and so complicated that much much easier but it plays a really nice with of because it doesn't try to do with this stuff that Django already does well it tries to do 1 thing manager templates and there's a really really good job at that so of like as if you've read rejected the moment we're reminded Helen and I'll be here for the next couple days for the on this brings you also watches on few ch thank time and was that
the use and
Bit
Punkt
Prozess <Physik>
Mereologie
Extrempunkt
Pascal-Zahlendreieck
Gesetz <Physik>
Inzidenzalgebra
Template
Computeranimation
Übergang
Homepage
Dämpfung
Gamecontroller
Mustersprache
Interpretierer
Multifunktion
Softwareentwickler
Sichtenkonzept
Template
Machsches Prinzip
Abfrage
Computervirus
Framework <Informatik>
Funktion <Mathematik>
Twitter <Softwareplattform>
Einheit <Mathematik>
Geschlecht <Mathematik>
Dynamisches RAM
Ablöseblase
Projektive Ebene
Information
Programmierumgebung
Fitnessfunktion
Web Site
Gruppenoperation
Automatische Handlungsplanung
Perfekte Gruppe
Content <Internet>
Systemzusammenbruch
Interaktives Fernsehen
Zellularer Automat
Kombinatorische Gruppentheorie
Framework <Informatik>
Informationsmodellierung
Perspektive
Inhalt <Mathematik>
FAQ
Softwareentwickler
Programmablaufplan
URL
Trennungsaxiom
Expertensystem
Benutzeroberfläche
Affine Varietät
Datenmodell
Elektronische Publikation
Sichtenkonzept
Quick-Sort
Mapping <Computergraphik>
Model View Controller
Mereologie
Gamecontroller
Textbaustein
Baum <Mathematik>
Humanoider Roboter
Retrievalsprache
Momentenproblem
Iteration
Aggregatzustand
Computeranimation
Zeitrichtung
Homepage
Netzwerktopologie
Interaktives Fernsehen
Standardabweichung
Code
Mustersprache
Skript <Programm>
Phasenumwandlung
Metropolitan area network
Addition
App <Programm>
Befehl <Informatik>
Sichtenkonzept
Kategorie <Mathematik>
Gebäude <Mathematik>
Güte der Anpassung
Prognostik
Humanoider Roboter
Kontextbezogenes System
Natürliche Sprache
Ereignishorizont
Generator <Informatik>
Menge
Subtraktion
Mathematische Logik
Hecke-Operator
Selbst organisierendes System
Mathematisierung
Klasse <Mathematik>
Fluss <Mathematik>
Systemplattform
Mathematische Logik
Homepage
Bildschirmmaske
Variable
Informationsmodellierung
Knotenmenge
Modul <Datentyp>
Perspektive
Mobiles Internet
Generator <Informatik>
Leck
Soundverarbeitung
Affine Varietät
Datenmodell
Indexberechnung
Symboltabelle
Plug in
Elektronische Publikation
Chipkarte
Komplex <Algebra>
Gamecontroller
Wort <Informatik>
Boolesche Algebra
Resultante
Bit
Punkt
Kartesische Koordinaten
Element <Mathematik>
Template
Komponente <Software>
Arithmetischer Ausdruck
Datenmanagement
Deklarative Programmiersprache
Prozess <Informatik>
Gamecontroller
Minimum
Volumenvisualisierung
Router
Default
Umwandlungsenthalpie
Interpretierer
Lineares Funktional
Konstruktor <Informatik>
Parametersystem
Template
Abstraktionsebene
Volumenvisualisierung
Systemaufruf
Ähnlichkeitsgeometrie
Web Site
p-Block
Ein-Ausgabe
Landing Page
Funktion <Mathematik>
Twitter <Softwareplattform>
Framework <Informatik>
Automatische Indexierung
Projektive Ebene
Garbentheorie
Aggregatzustand
Sichtbarkeitsverfahren
Web Site
Server
App <Programm>
Gruppenoperation
Framework <Informatik>
Code
Division
Zusammenhängender Graph
Widerspruchsfreiheit
Schreib-Lese-Kopf
Fundamentalsatz der Algebra
Graph
Einfache Genauigkeit
Physikalisches System
Objektklasse
Sichtenkonzept
Objekt <Kategorie>
Mereologie
Hypermedia
Bit
Punkt
Browser
Web-Applikation
Kartesische Koordinaten
Computeranimation
Videokonferenz
Homepage
Netzwerktopologie
Datenmanagement
Prozess <Informatik>
Trennschärfe <Statistik>
Fahne <Mathematik>
Mustersprache
Bildschirmfenster
Randomisierung
Figurierte Zahl
Funktion <Mathematik>
Automatische Indexierung
Addition
Installation <Informatik>
Template
Winkel
Güte der Anpassung
Systemaufruf
Abfrage
Ein-Ausgabe
Biprodukt
Rechenschieber
Funktion <Mathematik>
Geschlecht <Mathematik>
Automatische Indexierung
Server
Projektive Ebene
Faserbündel
Aggregatzustand
Server
Term
Code
Knotenmenge
Multiplikation
Benutzerbeteiligung
Ungleichung
Datentyp
Zusammenhängender Graph
Softwareentwickler
Speicher <Informatik>
Konfigurationsraum
Videospiel
Affine Varietät
Konfigurationsraum
Elektronische Publikation
Modul
Mereologie
Wort <Informatik>
Distributionstheorie
Komplementarität
Subtraktion
Gewicht <Mathematik>
Mathematisierung
Web-Applikation
Kartesische Koordinaten
Term
Code
Spieltheorie
Datentyp
Volumenvisualisierung
Vorlesung/Konferenz
Zusammenhängender Graph
Soundverarbeitung
App <Programm>
Güte der Anpassung
Gebäude <Mathematik>
Humanoider Roboter
Quellcode
Ein-Ausgabe
Chipkarte
Automatische Indexierung
Rechter Winkel
Projektive Ebene
Router
Bit
Punkt
Virtualisierung
Browser
Bootstrap-Aggregation
Familie <Mathematik>
Kartesische Koordinaten
Aggregatzustand
Element <Mathematik>
Computeranimation
Übergang
Homepage
Netzwerktopologie
Komponente <Software>
Deskriptive Statistik
Wechselsprung
Arithmetischer Ausdruck
Datenmanagement
Dämpfung
Mustersprache
Bildschirmfenster
Router
Elektronischer Programmführer
Gerade
App <Programm>
Lineares Funktional
Kategorie <Mathematik>
Zirkel <Instrument>
Gebäude <Mathematik>
Stellenring
Systemaufruf
Abfrage
Ausnahmebehandlung
Ein-Ausgabe
Biprodukt
Ereignishorizont
Rechenschieber
Teilmenge
Rechter Winkel
Automatische Indexierung
Server
Projektive Ebene
Garbentheorie
Schlüsselverwaltung
Faserbündel
Fehlermeldung
Aggregatzustand
Subtraktion
Selbst organisierendes System
Mathematisierung
Gruppenoperation
Klasse <Mathematik>
Schar <Mathematik>
Fluss <Mathematik>
Transformation <Mathematik>
Term
Mathematische Logik
Überlagerung <Mathematik>
Fluss <Mathematik>
Informationsmodellierung
Knotenmenge
Authentifikation
Perspektive
Front-End <Software>
Wrapper <Programmierung>
Datentyp
Endogene Variable
Videospiel
Programmbibliothek
Zusammenhängender Graph
Speicher <Informatik>
Softwareentwickler
Ganze Funktion
Cross-site scripting
Beobachtungsstudie
Trennungsaxiom
Videospiel
Wald <Graphentheorie>
Affine Varietät
Überlagerung <Mathematik>
Fokalpunkt
Modul
Ordnungsreduktion
Quick-Sort
Dreiecksfreier Graph
Authentifikation
Computerarchitektur
Innerer Punkt
NP-hartes Problem
Momentenproblem
Hecke-Operator
Template
Aggregatzustand
Computeranimation
Komponente <Software>
Datenmanagement
Prozess <Informatik>
COM
Mustersprache
Videospiel
Aggregatzustand

Metadaten

Formale Metadaten

Titel Django and React: Perfect Together
Serientitel DjangoCon US 2016
Teil 28
Anzahl der Teile 52
Autor McCloy, Jack
Lizenz CC-Namensnennung - Weitergabe unter gleichen Bedingungen 3.0 Unported:
Sie dürfen das Werk bzw. den Inhalt zu jedem legalen und nicht-kommerziellen Zweck nutzen, verändern und in unveränderter oder veränderter Form vervielfältigen, verbreiten und öffentlich zugänglich machen, sofern Sie den Namen des Autors/Rechteinhabers in der von ihm festgelegten Weise nennen und das Werk bzw. diesen Inhalt auch in veränderter Form nur unter den Bedingungen dieser Lizenz weitergeben.
DOI 10.5446/32691
Herausgeber DjangoCon US
Erscheinungsjahr 2016
Sprache Englisch

Inhaltliche Metadaten

Fachgebiet Informatik
Abstract React is a JavaScript library that makes it much easier to build dynamic single-page sites. I won't much dive into how React works, but the main advantage is that it allows you to build your view layer in a declarative way, and with reusable components. We'll start with an overview how React works, with an eye towards how it's different from interpretive libraries like jQuery. This overview will center around how state is managed in React vs. jQuery, which is the biggest hurdle for many developers when they're learning React. So if you haven't quite wrapped your head around the difference between "2-way data binding" and "1-way data binding", or if you've heard someone talk about "data-down/actions-up", "flux", or "redux" and weren't quite sure what they were talking about, this will clear all that up. Then we'll take a look at how you can integrate React into a Django project. We'll talk about how you might want to structure things if you're starting with a brand new project, but we'll also talk about ways you can start to take advantage of React's strengths even in projects that are already mature. Finally, we'll talk about some of the challenging parts of working with React for the first time - how to handle front-end permissioning in React based on your back-end API, how to think about url routing when you literally have two routers, deployment, and the general confusion that goes along with using npm and webpack for the first time.

Ähnliche Filme

Loading...