Video details

React is hard but not why you may think | Sara Vieira


Sara Vieira

React is hard. There are a lot of resources for getting started, but things can get complex and confusing when writing full blown application. Navigating its ecosystem is a lot to take in and sometimes extremely overwhelming. With this talk, I hope to help you understanding some of its gotchas more clearly, while giving you some confidence when building bigger React applications.


Thank you so much for having me. It's a real pleasure to be in this conference and to do what I want to talk about is how I use a lot of people and a lot of stories of how we act is easy and how getting started with reacting like, I don't know, in five minutes you're going to get everything done. First, I want to point out that nothing in programing is easy. Programing is hard. Don't let anyone tell you that something is easy. But I don't think react is that hard. But what's horrible react is navigating the entire world of react are so many things in react that kind of get lost, even if react itself is not hard. And you know how to use all the states and all the effects and everything. It's still hard because you have to make all these libraries that hate each other, talk to each other and somehow like each other. And that's hard to know when to use something and when not to use something and blah, blah, blah. And as an example to that, I want to explain to you how I learned react. So back in my early days when I was a sweet summer child, think I was like twenty three or something. I don't know. I would have to go on LinkedIn to check, but I don't know my password so I'm going to go with twenty three. I was like twenty three and I worked for this company and I worked in like the treatment management system of it and we had to build a new payment system which was everyone was paid. But also that makes it so much easier to sell the stock and we had to kill people. And there was me, another guy and there was me, a guy and another girl on my team up front. And this was the also the only time I ever had more men, more women than men in my team and never happened again. Don't get your hopes up. It's not a Portuguese thing. We haven't won. And this this guy was super nice. And he had this idea that, like, OK, so we should use react for this react is this new thing. And it looks really good and we should use it. And it was always like ahead of the curve and stuff like you made the first Babbage's gas explosion and all of that stuff like really smart guy. Ten out of ten. Problem was, no one else knew how to use react like I didn't know what to use react and my friend also didn't know how to use react. But we were like, OK, that's right. Like we'll learn whether or not to use react, let's use react. So what happened was like this was before great react. So we made like the entire webapp thing and Danny went on vacation for three weeks, so he left for three weeks and my friend also left for three weeks. So it was me, the sweet summer child. I was left there alone wondering what the fuck is happening here. That was not good times. So the point of this is that I kind of had to figure it out. So I had to build this thing. I had to build this PayPal integration. I did not have to do the back end. Obviously, like someone tried to the back end. I had to do this PayPal integration and I had no idea what the fuck I was supposed to do. I came from Angela, one respect I get from Mangler one and like an angular one, like people just gave you things like, you know, you want around here is like just the rolton that it's easy acle. Then it's scale that you cried. But in the beginning it was like, oh wow, this is easy. Like I didn't even know that much JavaScript. Like I joined our company because they were impressed by my Xbox knowledge. So I tried to figure it out. And what happened by the end was that I didn't quite understand the idea of like front end and packages at the time. Like, I knew they were real. But I didn't know you had to use them this much, so I tried to do everything would just react and the way that I did, for example, routes was that so I had this like Appalachia's. Right. And then you had all the buttons, like the napkins. And when you click the button, it just toggle the state about it goes through. And if it was true, it showed another component. Which in retrospect, may not be the best way to create things and react and then like so like the final of these three weeks, like this app worked kinda, but it was the worst code that you would ever see and react, because I tried to do every single thing with react because I didn't know any better. Literally, I didn't know any better. Like, no one told me that I could go on the Internet and look for packages that did the things that I wanted them to do. So then my friend came back and he was like, why did you use a routing library? And I was like, what's a routing library? And it was like, you put it into reality and it goes routing for you. And I was like, Oh, you mean like with the things and everything. And it was like, yeah, I was like, oh, oh, that that sounds better. So after that it was all the way up because I feel like I started right at the bottom. We finish that, but then you forget that we have to integrate it in an angle or one app because the rest of the apples singular one. So I feel like I need to tell you that there was this react app that was the PayPal app, and then we had the angular one app. And like the thing that was connecting them was polymer. I don't know. I know that I left and when I came back, it was like, hey, guys, what's up? Oh, look, we made polymer. And I was like, why? OK, so after that, I eventually went on the NP's and create packages and stuff and like, realized how the world works. But you don't know that, like, this is not that weird. Like, I feel like it happened to a lot of us, mostly the ones that came from Mangler one respect. And I think management and I the same management was the window. So, yeah, so my name is Sarah, sort of, yeah, I'm a developer, I called Sandbox, I am Nikita, I am originally from Portugal, so don't ask questions in Spanish. I will understand them. I may try to speak, but I'll probably say Portuguese water is in the middle of it. Then you'll be like what? That sounds Spanish, but it's not Spanish. That's probably because I'm speaking Portuguese with a Spanish accent, because that's how all of us do it. I apologize in advance. So, yeah, that's kind of what I want to say is react is not hard, but the system itself is very confusing and very big and daunting and. Yeah, yeah. So OK, so we're we're going to do today and have some fun. Yeah. Well the world may be dying somewhere else, but we'll not think about that and we're going to build it up. All right. So this app is going to be incredibly overengineered, but like amazingly open an engineer. So we're going to use routing, we're going to use animations. All of these will be external libraries, state management, NCIS, SJS. So we're going to use all of these things. And I want to say that you don't quite need a state management in this situation. I think you can probably get away with just using context. But I wanted to show you a state management is like there will be a point when you use the context that if your app gets too big. You will lose contact and I don't know, I thought that was funny. I don't write my jokes. They just go mad because I'm so nervous. OK, so let's do it. OK, so what we're going to build is this beautiful and we would have known our musical sandbox. Yeah. So I have an endpoint that has the worst 30 movies. It has I think one hundred, the worst 30 movies. According to MTV, these are the ones that have the least rating according to MTV. Why is this important now? You know, the worst technically the worst movie ever made was disaster movie. That makes sense. So what is this? So this is going to get from a graph to ALIBHAI and it's going to show me a list of movies and it's going to offend some likes you. So then you can like a movie. It's going to give you this little cute animation and it's going to order them by likes. Yeah. So then you can also click one of these and then you'll see this the very back quality of this image and the actual rating, which is honestly 2.0 out of 10, which is really bad. I don't think I've ever seen this movie. OK, yeah. So one thing is that this is not saved in any local stores or anything, so I don't know what I really like this animation. I think it took me longer than literally building anything else of this up. It's this little thing, look at this little thing. OK, so this is what I have right now and I won't be live going a lot because mostly because I don't have time, I guess. But I'll be like I have the app on my site and I'll be copying and pasting whatever makes sense first. So what I have right now is that I have all the pages empty and I already have all the things installed. So let's go over what I have installed. So these three things. But where's the risk groups react and react with grades react up. So then I also have frame motion, instant history, react and react. Dom for react what you need three because you need three frame or motion animation motions we have over my mind react. So this is what I'm going to use for state management. I already have a folder here called Overmind and Stock Components, which is going to use for success. And I also have normalized access, which what it does is basically make everything at the same. So if I do this, then I find a module and that's a good start. It just basically removes like a bunch of margins and stuff. I don't think it's doing anything. But notice it is. You see that. You see that really good. The timber. Yeah. So this is the only thing. So we're done. Normalized job. So let's get started. So the first thing that we need, if you look at the app is that we need to fetch these right. And I want to fetch them using the state management system. So I have some things here and a few things that I have are the queries. So I have word to get all the movies and I have recorded to get one movie. And I have this because I didn't really want to use Apollo. Because even though this app is very overkill, I didn't want to overkill it even more so I wanted to just, like, shed some light on graphics. Well, in this case, which is like it's just a fetch, like technically graffiti is just the pfeg. What sent us a post? That's it. Like, there's no weird magic because what's going to keep track of my cash is going to be Overmind, which is the state management. So I don't need Apollo, I just need a patch. So we're awaiting FEG of the point that I that I have here, which is the end point of the movies. And then I'm pressing ahead or selling at the station and stratifying fine. Whatever I get in here, that's it. And it returns the data so that I can do whatever you want, whatever I want. I mean, you can also do whatever you want is up to you. OK, so let's get started. Right. Let's do this. OK, so let's get started with the index and this is the index of Overmind. So the first thing that we want to do is get all the movies. So let me import the queries. So if I do things like I click things and nothing happens, I can explain. So I have a windows and a Mac and it's very confusing because I couldn't make the keyboard work the same way. And it's just very confusing. So let me import queries. If I mistyping, that has nothing to do with it. That's just how I do things. Vejvoda from. Let me give you Will. OK, so the first thing that I want to do is that I need to create a config for it. So I'm going to export control for it and just needs the state and sorry where you put the blocks and blocks from times like the two dots thing. So your config is going to have straight and actions. So state is the state and actions is anything that can change the state. I don't know the name of it in Redox, but it's like that thing in Texas. What's the name of the thing? And it's like the state. It's like I said, I don't know, redux. I'm sorry I did back in my day. There we go. Beautiful. OK, so we did movies, right? So and it's going to start as an. Right. Cool. You know, we need an action and this is the action that will create the movies, that will get the movie. Sorry. And so I'm going to create an action. And these are all functions and I'm going to create one for movies. And this is going to be async. Right. And then entier, we're going to get the states. So when you create any action, you get specific. There we go. I met someone who was in the audience being you to Mr. Comma together, comma. I know, because I'm not person. Yeah. So you get the states and you also get the all of the actions, whatever you want to do. So let's get to movies and let's say count gr8 equals a wait because this is an I think I can wait for it straighter. So I called a first grader and then I passed the query note, which I guess that the body sorry, the body is squarey equals. Where is that movie. OK, cool. And then this is just return. Let's not return anything, so let's say straight movies equals data from movies, and we can also destructo this and say it and we don't have data. It's kind of mutable, kind of those everything behind the scenes. So you don't have to through the whole operations were added. And let's actually add react router. I think that makes sense. So this part I'm going to copy. So here you go. Reactor Autodom loaded like a good works and we go and buy me a home which doesn't exist yet. Create created. And we go, and I'm going to create this Durants. Which I got this, I promise I got this. This is more like this will be needed in the future. And now at the comment that all these OK expected string got absolutely nothing because this bridge doesn't exist. OK, so Poundstone equals a function braggarts nothing and then explodes default. Oh, there we go. And then we import all the things that I need to import. So I need to import, react and use a friend. And I need to use actually overmind. But I'm not it's not set up yet. So let's do that first now. So it's a lot of back and forth in the beginning until we get all of this stuff set up. But we need a provider. So we need to import to provide like like literally every single library in the world. We need to import a provider. And we also need to enforce the config that comes from overlent, that we created Overmind and we go. So now we need the provider. And this provider message the provider from Overmind, and we also need to create Overmind, which basically you pass at the config and that's it. So you can say const Sprague's or whatever equals Greenidge, Overmind and you press the. And now the value of this provider value equals straight. And that's it. Maybe a home return. Nothing was returned from render or sub. There we go. So now the way you use it reminded a lot of times is that you say Consed Spade's equals use Overmind, but as you can see, this doesn't really exist right now. So let's create this real fast. And this is just one single thing which you can see from here. So like in your index or whatever you want, use overmind equals create a hook and that's it. So when you create a hook in Overmind it gives you the use overmind and this will allow you to say so if I say state equals Overmind. So in words I was doing the windows. Want to use Overmind from. No, overnight, really, you know, if I canceled all over St.. We have a movie scenario zero that something like that is something we're getting somewhere here. And we need to go get movies, OK, so I also knew the actions, so actions and unloads. So the fact I know I said I wasn't going to live here, but I'm failing at that actions that get moving. Also, I want to say that if you use TypeScript. The above our actions that get moving is not a function because it's getting these. And there we go. OK, so now if I roll this page, I should be able to get the movies. I should be able to say straight at the movies, the map. That was pretty, not smart and all. I mean, Jason, lobstering, if I. There we go. And we get all the movie. Jesus Christ, I got really excited there and now we got all the movies. It's not hard. I mean, it's, it's hard, but when you get the hang of it, it gets easier. We also want to and like to do it and started all at zero. So I'm just going to map get a movie and then each of the movie. I want to say that whatever it is, return from it is equal to a movie. And then from there we go and like six zero. I did not work because I'm missing one. There we go. From now on, I read this page we should get. Like likes, which you get like six zero. All good, so I will show you something really cool about Overmind and this one I'm just going to copy and paste because otherwise I am going to forget one of these comics. So I incurred the wrath of it as well. And I'm going to go over what this magic is. So let me come here and actually map overorder movies, which I'm going to give you the same thing. But the magic of this is that when you create something like this, a derived function derives, I know, English right or the right function. What it does is that against the state you currently have and create something else. So if you want to sort something, if you want to say that, does this sound like I want to get all the movies ordered all the time, you don't have to do it in your view. You can save it in your state. And when this movie is updated, this will update automatically. It's really nice. Like you'll get access to this sandbox. OK, so let's actually create the homepage. And this is going to yeah. Let's go to the homepage and this is going to make us create some components. So the first component I need is this main component. So this is where we're going to start using strong components. So all that I'm saying is like display, this is flex set and have a mix with six hundred. For some reason I want 200 and we're going to have an aside and that's about it. So in here, what I want to do is I want to four main. Is this going to do it. Yes it did. It did. It reimported it. It imported it as beautiful and I still screwed up with it. Oh yes. OK, let me check something. Yes. See. Oh that's why I wanted six hundred so that I could be you could be like physical. OK, so yeah that's done. We need some global state though so let's add that so that it looks prettier when you load it. So you're going to global states with some components by creating great global state, which this comes from. So I'm going to use a lot of imports and this is going to be normalize. So I don't really need normalize here anymore. And this is a component, so we can just mount this component. So I added that it's like I prepared. OK, so that looks better. I mean, it doesn't look good, but it looks better. So we can keep going out. Would say the next step is to when you load the page. There is no looting or anything, so let's create offensive looting. I think that's important. That's my definition of important. So we have a in here which just has to reverse and then there's a fancy animation. Don't think I did this because I copy this out of the Internet. If you see a saluting, you get that. And in here, I can say, if not straight, that order movies, darling. Yes, I think that's a return to the main and then the be. And this is actually interesting thing that's so beautiful, TypeScript. Here we go now we have a loading, OK, we're getting places, let's add some more stuff. So in the homepage, I'm going to add movies component. Which is not going to make sense right now, but I promise you it will make sense in the future. So this is just going to be a you and when I said I put out. So I don't know how to go up on your keyboard things. I just feel like everything can go up or down. Zippers reports now from subcomponent. And we have this movie thing. And so me is going to get movies and I'm going to close this movie. I hope to learn something. And what I want to do now is show this. We go, OK, cool, so this just shows, if not or not. Please show me the voting if not going to the movies. So let's create this movie component, which is just the general components that will show the movie itself. So I'm going to come here and I'm going to copy and paste this one because. So now. Now, I did not important that I know I did and. Oh, no, oh no. We have issue export default movies. You may have to render method of movie. I don't like I don't like having these issues. Like this does not make me happy. Because you need to understand that as soon as someone was doing a conference as any problems they immediately have never seen react in your life. What is this? What is this? I don't know what this is. This doesn't make any sense. OK. Oh, I think the problem is this. We don't have this yet. Is probably the problem. Yeah, and then we go. That was the problem. OK, OK, but we do have a problem here. I mean, we do have the problem. We need to create the, like, movie action. OK, so let's go to Overmind, which is all the way over here and create a like movie. And we go to my trusty sidekick. At least I'm not lying to you, which would be like magical if you just showed up, like, that's how I code, you know, you just shows up. It's like magic. Yeah. So what the hell am I doing here? So we have an action that also gets the state. And then as a second parameter, it gets anything that I pass to do so and just gets upset that we get as a prop. So if I come here to the home, you can see that I spread all the props and I give it a key and that's it. And let me close the loading and dismay and we get the silver mines. And so we say state dot movies, movies. OK, there we go. Because there was a map and if the movie ID that we're mapping over has the same idea as the one, I sent that one to the. So now we just need to add the like button. This one is more us. Then we go see Policía says, and now we need the star, which is that for the animation that took me forever because I can get a motion crystal components. I have a broken sandbox in the process. And I was like, why is my sandbox broken up? Turns out you can use the existing style components with fragments. But to me, the error was that motion wasn't defined. So it's like, right. OK, so there's also another thing here is that in the like button, if I come here, we check if it has lights. So let me remove this for now. So I'm just going to do this and this and I'm going to add one comment. Pirillo, this page, we should see the movies and I should and I repeat should be able to like a movie. There we go. Did you see that? There's an animation. It's so pretty. I forgot one thing. I mean, it's not important at all, but it's a page one here. Worst movies ever made. And I'm going to to one that is not a close one. Oh, yeah, so that cannot be in the main because, I mean, it's like, OK, that we go through so many times that happens to me like I'm just going to put this in here. Oh, no, that's a compliment. I can. It's going to break my entire app, so I'm going to add an H1 here that's basically just I to the center. And so this is which one really do it? That's a reflection. It did OK, like a movie, like movie what? Yes, that was a good 10 bucks, but I mean, we'll have to fix it, but that's a problem for futures. OK, so we need to check if it has legs, right? So that's the basically the only thing we need here right now. So I'm going to leave this disabled state that has legs is not a function. So what are what is my idea here? So my idea is to disable it if it has any lights. So what I want to do is create another DoRight state that will check if there are lights there and if there are which to be true or false. So let me just find the page. And so I'm sure. Right. OK. And this is the right state. And this is where. It gets confusing and I'll give you that one very easily. So, like, I don't know, but when you pass a value to any, it's not this one, is it? Not this one. Yeah. When you passively do any derived property, it actually gets passed as a second function, so like the function returns a function, just go to the docks and copy the example and change it. That's what I did. And then I say like movies that finds movie, a movie that I'd when to find the movie where the movie that ID is equal to the ID that I just passed and return if the likes are different than zero. So if the legs are different than zero, which gives me one and disables the button. One thing is that I use this because sort by default is mutable and you can move. You can't move the state. You're like you have to use an action. So it gives you an error saying that you can move the state. So this will create a copy of that. Right. And then you can sort it. There is no like nondestructive way of doing sorts in JavaScript, JavaScript, JavaScript. That's all I got to say. OK, so we've done it. We got three movies. That's it. So now we just have to make a new page. We're almost there. Almost there. We're going to do it. We're going to do this, and no one is going to have a panic attack or panic attacks. OK, so we need to break this new A. So the first thing they're going to do is remove this beautiful and important movie from like with my my mouse that can go fast or slow. I don't know why anyone would want your mouse to go, like, incredibly, almost unbelievably slow moving. I'll give you an error because the movie is basically nothing. And now we can see from here that this will be movie I.D. and this is the name of the program. So if I need this law, I can then get it as parentheticals lol. I'll show you what I mean. I'll show you what I mean. So I'm going to interact. I me just copy the inputs, react and use Overmind and all of that because there's no point in watching me type in ports I think. I mean I don't think that's a fun part of like watching someone be like import criag from Raag consed movie. Is this backwards and let me return. I love so stop complaining and then export bifold radio if I can type. Here we go. Is it going to work. Yeah, that's right. All good. Right. OK, so now there is this thing called use forams so I can say Consed Wuhl equals use forams like this and if I do a console log of lol. Good one, because that's the idea, but we're going to call it I mean, we can keep it as long. Let's keep it as little as that makes it entertaining, right? Right. What do people call the funniest thing? OK, so let me go back over to the success that I have here for success. And then what I want to do is that I think this is fine. Yeah. Let's go to Overmind and let's get the new one. So I want to create something here, which is like a single page, a single movie. So I'm going to create a single movie is going to be an empty object by default. So I guess I can just copy and paste the things that I have here, because that's fine. So in here, I can just come here and say const. Great, sorry, I think I just had a brain fart because it's over my head and do not return this return girl. Oh, my God, I am so sorry. It's like it it's here. And I'm going to do how I'm going to create this is that I'm going to stay calm. Scary movie. Like I'm running out of time. I have five minutes. So I thought the stock was gonna be like 20 minutes. Glad it wasn't because I would have been a failure equals straight. That single movie. And this is not Heidi anymore. This is all because that's what we decided as a family, remember? And what does this even mean? This means that I'm going to create an object that is going to have the idea of the movie. So like one and then the object. What is the great feeling of listen, like if I just saw the movie in here, because then if I go to the home page and go back to one that's already going to be in state. So it's just a really nice way of doing these things. And I also want to say that if there are no current movies, just show me floating. So like, if this is empty, which is always empty. No. And on whose affect I want to call actions movie actions and pass the law is nothing, though we don't like the idea anymore. OK, let's get this movie and get a movie. It's going to be pretty similar to this one. So great movie. This is going to get the street and this is also going to get to be. And so I want require is where is the movie? And then the variables that I pass are EDEK. Maybe. No. Uh, no, actually, that's it, that's that's actually kind of yeah, no, that's pretty much it. So this doesn't get to things just get something called Movies Biopic, which is the name that the back end has for us. And so what we do is that we say states that singular movie, single movie, and then the ID equals movie. Now movies. This is a singular one. Now. We have this it works. I honestly did not expect this to work. I'll be honest with you right now. It's going to be on us as a family here. I did not expect that to work. I think we're done. Oh, my God. With Friedman, is this. I think we're done. So what I want to show you here is that creating an app with react is not just about react. Also ignore this. It's just asking me like, please include action. I mean, you should Google Chrome. That's important. Role is already include actions, which doesn't make a lot of sense in this case because it's like it's a function. And if it gets rebuilt every time, you just going to keep doing this. And I don't want that. So, yeah, we did this. I am very proud of us. OK, OK, so I'm going to share the sandbox, but what I wanted to show you about this is that most of what we did actually was react. Most of what we did was try to make libraries work with each other and try to find our own paths to make things work. So that's what I want to show, is that react maybe not the hardest thing, but navigating react is hard. So this is the sandbox link. Don't worry. I sent this to the organizers. They'll put it on SLAPP or something because, I mean, you can try to memorize this. You only need to memorize this because the rusticate type, whatever you want to dose themselves, don't tell them what I said. It's a book. Yeah. So the tools that I used were overmanaging. I also showed the slides over my Ge'ez, which is a really nice service idea of what client state tool. It also actually has graphical support, but I thought that was more confusing. So I ended up removing it and just using fudge. I was like a polvo and it was like, no, that's too much. Just over Minecraft rescue. Well, that's too much. I'll just touch it to go back to our roots, stop opponents for promotion, which is what creates the sentiment. I forgot to show you about the animation. Sorry. So you just pass and animate. So you have a motion and then you have the name of whatever thing you're creating. It's kind of like style that some something. So in this case, it's an iceberg. This is basically my initial things and then anime. And what this does is that I say when it's like that, I pass to hit it, go to minus one hundred and the Y and it goes comes back. It automatically does going bad things really nice, so I used to hear and as you can see, I just like to do it and that's it. I liked and liked is said over here in the movie. And what I do is that I set liked and then I set a time out that sets it back to false in five hundred milliseconds. And I was really proud of the person I used is six, because six allows you to do this, that I really like, that you just bypass the component and then in the component, you give it the part, like I prefer this. So I used six in five. You have the root component. It's basically the same thing. This is just syntactic sugar that I like. Yeah, I wrote a book about all the stuff, if you'd be interested in, if you like my sense of yours, you can see this screenshot on the windows. I'm not lying. Yeah, I'm terrible at marketing. But if you like my job and you would like to get my book, there is a discount if you're from Mexico, not only if you're from Mexico, that would have been weird or he'll be like my wife is from there. So everyone get a discount. Thank you for giving me this purchase Ferreti. So if you're from basically not Germany or the US, you will probably get a discount. Thank you so much.