React Fundamentals – Build beautifully fast websites

1. Introduction: Hi, everybody. My name is Andrea. I'm a self told developer, which means that I learned to code with online Resource is like these sculpture course. At the moment I'm working as a full stack developer on the Aigoo Cloud Framework whose Web interface is built with Guess what react in this course, you will know the basics off reactor enough to understand most off everyday code and even build complex a single page applications. The concepts covered makeup for about 90% off my coat, and the only previous knowledge will need to follow the course is a basic understanding off JavaScript. Then you're ready to go at the end of the course. I will leave you with a class project to get your hands dirty of the code. And those are some links to deepen your knowledge. So see you in class. 2. Setting up the project: the first thing we need to do to set up a Loria project is installing nota genius. To do that, just head over to know the GS that are slash and slash download. Here we'll find the installers for various platforms and also instructions. Token store no Js by a package manager if you prefer to This. So after having installed the Noja, yes, we can use the create react up toe to set up our whole reactor website. So just typing your favourite terminal and the X three aid Riak No, followed by the name. We weren't give toe your support. React basics it enter and creator of capital set up the whole thing for you. We can them just city into the folder that the creator act up created and the type Pentiums heart or yarn start. If you use yarn, this will run the development server, which will refresh the react application in real time while we coat. So every time you save a file, the page will get updated without you having to Iran screens or go anything. Just open local Austin column 3000 and you will see your, uh, side as it is in the cold. Now let's have a look at the files that create really top created. Yeah, the folder public. We have the foul index dot html. Something's the HTML. Scalia tum off our application. You will rarely have to edit this file. The only useful bit is the title tag, which you can add it to change the name off your website in the browser, for example, react on the medicals. I also noticed the tag developed with idea route. It's very important to render the react page, so don't delete this. I will show you later where we're gonna use it. The index dot Js creeped in the source folder imports some libraries which are react and react dumb react that defines the page or as a reactive DOMA renders the page. Then we have these import in that starts CSS. We can delete this line because we're not gonna use the index of CSS file. Then we have been put up from, uh which we will see later the file. Then we have to import register service worker, which is useful to offline capabilities for our application. The crucial line is react down the surrender. It renders the up script in the document Don't get element by i d route, which is the Dave with so before in index dot html. And finally register service worker simply registers the service worker, which how was our flying capabilities? We want going toe to tell the offline aspect of just take it for granted. Finally, we have the most important file, which is after Js. It defines our react application structure but we're going to delete it all and build it from scratch. So first thing we have to do is import Maria from three are thanks to this line. We can use that html like notation you So before then we define a function called up which returns for example they have Riak musics was there and we export this function. What react will do is taking this function running it and the rendering What it's returns in the page server example we wrote they've so it will random that the 3. JSX: HTML in Javascript: Let's have a big car. Look at these. HTML like syntax, which is called J s ex. It allows for domestic HTM A like in normal HTML, for example. Here I could that paragraph and after the paragraphs up like and so on and so forth. Also, you see that I saved the file, and if I go in the page, the page updated instantly without me having to refresh any script, you may try to do something like his Laura if Cem and they thought having chew top level blocks off html returned by the function. But if we try to compile that, it fails because react wants toe have just one top. Lello html, uh, target to work around this, we can use the reactor. The fragment Doug. It's not an HTML tag, but the it wraps our various HTML tags and renders them just like with expect. So remember that if you want to have very stocks returned, you use react that fragment Onley if it's the top level, you see that in this Deaver we have two different tags the B and attack bottom, and it's completely fine because they are in top level times in J six. We can also insert some JavaScript code. To do that, we have to use the early brackets this space inside the cold rockets we can write JavaScript of just like we would have in any script. For example, we can see one plus free cool render for just, like expected. Or we can, for example, use a string concatenation, Um, go work. We can also savor some j six in a variable, for example. Cons welcome equals that the opening welcome. And then, to put these snippets off Jess X into our Ritter, we used the corner brackets because putting a JavaScript variable between curly brackets with surrender its content so we can did is and what welcome simply five is a bit I have the late is viable One very useful case in which we use JavaScript inside the JSX is rendering Gaullist, for example. Let's say we have is please containing some numbers and we wanted to render is as an UN ordered police. So in an HTML, we used you well. Plus, you are on the inside. We have do right and how I dug for each off the lists items to do that programmatically we can use the curly brackets, police doctor taking every element and mapping it too. Oh, I am elements slash I remember that you have to use the even I to use the curly brackets to put the element inside the least item because we are returning a J sex value. So even though we are inside these bigger brackets here we open another JSX context. And so we have to use these little curly brackets. Dude, put the element inside the list. If we saved this, we'll see that we have always with all the items I don't We don't have to change the code to change the atom. So if I changed another, though is up. It's in JavaScript. The ward class is are reserved world because we use it to define classes. Jonah scooped clauses, so we cannot use that to define the HTML class off type. Instead, we use class name and then put the value. For example, ABC just like you would with the normal HTML tags. And in your CSS file, you can do dot ABC and it world's just fine. There are other reactor HTML props that behave differently than in standard html the first of which is style. You're used to style being a string in HTML, but in react it's an object. So we have to open the JavaScript context with the throw the brackets and then define an object with other power off current brackets. So you have these double curly brackets syntax. Then we simply use the CSS Brock as a key. For example, corner and the value will be the CSS value. For example, red just saved, and the color is red. You also have to be careful because the naming off the props in React falls Camel case mutation. So, for example, the ground color is written call over with color in upper case. For example, last prop with a strange behavior is on click, which is that being a string is function so you can simply being a function and write the code for whatever you want it. Food from simple. A large I was and one click. I learned it was quick. This props behave differently in J sex, then in html. But there are also new props that Jessica introduces, For example, the key prop. If you go into your local host console, you'll see a warning. Each child in an IRA or a traitor should have a unique key prop. What this means is that when we mapped the old the elements to least items, we created an R a. Off just sex objects and the for performance reasons. React wants us to give a key, brought bleach, runoff them. We can simply use the element as a key. So if we say the warning disappeared 4. React's state: going dynamic: up until now, we Onley created study websites. It's time to get dynamic. The first thing we have to introduce is a new weight. Define Jerry act structure instead off the function up big close up. So let's start by importing component from the reactor library and then redefining these as a class. So class, huh extends component. And then we find a grander function which does exactly the same as the function up that we find before. So you can return me genius sex value from simple hello and it will get rand erred into your page. So what's the difference? Why using a classical? Because we can use state. So in a constructor that is involved when their pages first created, we can define a state. For example, we can find that my name is Andrea. What can we do with these state? For example? Put it inside the deejay sex Is that stayed name? We have Ah hello under you may ask now, so whats the difference from any off the other javascript valuables And it is that react keep struck off and changed the state And whenever it changes, reactor cools the render function again so if we change the state of the page gets updated . Cheyney State. Um, you may, for example. So the timer set out and we will function. Change the stadium after one second. Changes state. You may think that it took 18 inflexible. These that stayed the name because someone else. But we can't do that in react for performance reasons, and it would break the inner workings off the library. So it's that we use function. These don't set state and would pass it the new state. So name someone else fame. And if you go to the page and refresh it, you see how Andhra and after second the function is triggered, it changes the state of we have seize the change and then updates the page. Make the page a little bit more dynamic. We queued this a day off the state as the on click off about possible button change person . Then we just dealing it this time out, and instead we used the on with us. The function is that Spain and the New States off name, for example. Now if we open the page, that is Helen Rapid 1000 change on its own. But when we can change person. Hello. Damage there. Now let's say we want to create a counter, sir. Blitz learners thing up the state. We will put that counter variable which starts at zero, and then we will under it in the run the faction. So it is a state of the thunder and we also want a button which can increase the counter. So baton plus one and then in the on click the button we pass, the function increases the counter. So this Saad state and you may think that it's OK to these down there calm these don't state counter plus one. But because of how this is the set state is implemented. India React Library Doing something like these could Lee to nace teabags that may come out like days or months later, having written the cold from collegians in set states because this is not set state is an a c infamous operation. So two different said states could happen at the same time and conflict instead. What we do is passing the Colback, which takes the old state and uses it to build the new states of counter all state counter plus one. This is bug proof You ever go back, which takes the Old State and returns the new state. So let's check out countless want Those marbles from bus were works. It's mostly. 5. Components: React building blocks: Let's say we created this up, which welcomes me in tree. Different points off the application. If I want to change the welcome as such, I have to type Hello, for example, three different times, which is no idea. React. Of course, Total is on board solved issue. We can creed another function just like we did when we created the up function. We know that the welcome function returns is welcome message and then we can use the function as, um, each TML component. So we just put it like this Free, different points off the application and it works. Hello, under out three times. Now, if I want to switch back to welcome, I just write it in the worker and welcome around, we made it much more efficient to write our code. One little thing you have to pay attention to is that the naming as toe always start with an uppercase letter because otherwise reactor mistakes and Sita for a standard html targa, for example, diva start through the Lorca's letter was off course. Welcome with an Africa's letter. Now you may say OK, but what if I want to welcome dammit instead? Do I have to create another component that will be a waste of time to And of course, no, you don't. We can us props to welcome, just like we passed, for example, style or an on quick toe a div. In this case, we can say, for example, death welcome with us on a month which is under the function welcome receives an object containing all the props passed to it as an argument. Of course, we can use the props to define the J six that the terms. So, for example, drops the name now again, welcome and rare. But if I change the 1st 1 to the RV that, for example becomes welcome David it So we have a more generic component for welcome here. We could also, for example, create upstate name which starts us unwrapped. And then we passed the state the name and then a bottom in the on click and change the state that this is not sex eight to another rain, for example. See, I, um, diving in the bottom. And now when I click the bottom, I am happy that it becomes welcome. David, Remember, Dad, when the state changes, the render function is run again. So the welcome function receives the new props and Rikers, the new JSX. We can also create state ful components by using the class saying, that's for example, we can create a simple timer which has a timer stayed that starts at zero and then is increased by one every second. Then we can use these hanger component in the ups rather function. Um, it works justice. Fat did. 12345 etcetera. But what happens when I click? I am David A. The Orender function off the up is wrong again. So welcome gets its new props and shows Welcome that were there instead of welcome under our But what happens toe the state off timer Glink, You said that the number didn't get the reset to throw. So this state is conserved also when running the render function again. 6. Conditional rendering: to show or not to show: I created this very simple up which uses our welcome component. And then there's a logging and log out button. Gilligan sets the name stated toe Andhra, whereas the lookout buttons That's the name ST No. And the default state is no. So when we open the page for first time, we get a welcome without the name and Onley ones. Well, again, we have our name. We would like to show a different message, not the welcome one. If the name is no and we can dig is ah first way to do that, simply using false statement in the render function. Welcome. So if gross name isn't well, no. And we can return our standard welcome message. Otherwise we return. You are not logged in yet. So now when he opened the page for first time we get the mass such without the our my mistyped Then with looking and get welcome on drab And then we blow gout and we get the other message again. But there is also another way to do that We can keep I were welcome as such the same as before. We can use ordinary operator that is in the code off the art. But I would say these that's paid the name not equal to know question Mark followed I what we want. Rancor. If the bullion statement before is true, so the welcome state. Otherwise we could call such that one to render if the state is nose. The result is just same message of the beginning again. Log out, log in, look out. It's simply a matter off aesthetics and from case to case one will feel better than the other. It's important that you know how to use both. 7. Handling user input: Let's say that we know want to allow the user to choose their Use me to do that. We need an allows user, right? Oh, is anybody day on? I can write my youth name. How do we read from reactor? What the user has tied deep Most straightforward way to that is to create a new variable in the ST Paul, for example input, which turned itself as a just right. And we say that the input value is state input value. So this state the input name. Now, if we go in the Pentagon, also fighting if you try to buy in the keyboard nothing happens because the input value is forced to be the same us the include name in the state. Now we have to handle the changes. So on change we can us corporate function, just like when we handled the on click get to the event and you say is the that state and said the Bible in putting eat that are get value, which is the value that the user is trying to type. So now when we go back and try to die, but we can. But we also have the value saved in the state. So when we want to look in, we simply replace the string. Andhra, we've this eight input name, which is what the user has died. And also it would reset input, name, do an empty string. So now I can, for example, son in there and again and I'm lovin And then someone else you looked in. 8. The React Data Flow: I created a slightly modified version off the logging log out up that we saw in the last lesson. So we have this welcome component which renders the welcome already. You are not logged in message then with the logging former, which handles all the input, the on change and the bottom for belonging and the log out. And finally we have the up component which wraps the welcome and the looking form component . The issue here is that welcome needs a name, but the name is stored in the state off the logging for not off the up. So how can we pass the state off the former to the up in the reactor? We cannot us props or state up from a lower component like Logan form one upper component like up. The only thing that we can do is do least the state up. So we recognize that name is a prop needed also by welcome not only logging form, so we put it in the state, are component. Is the name on? No. Now the issue becomes how do we update the state off the up when the battle's inside, the form are clicked to do that we pass a cool back prob for example. We give the name change me and it's a function that takes a new name and runs these the sad state name colon new name. Then in the local form, we can invoke that function when we want to date to the name so we can do these crops Change name passing the new name which is in this case, these that states that important me We don't need toe update the state that in the long inform anymore because it won't be needed And we can do the same for the log out button Simply we bust no as a new name. Now the state in the up is updated by invoking the goal back change name from inside Defour component So we can simply pass the upstate that Teoh the welcome component And now we start off us not logged in. But I can my log in and become long in and I can't do my log out. These lifting the state up and then passing callbacks down is a floor that you will use all the time in reactor. It's only present 9. Build and deploy the website: to publish your website online. There are two main steps that you have to take. The first is building an optimized the deployment version so that you simply have to pm, run, built or if you use yarn down build, we will find in the big folder website ready for deployment from my tests I use Sarge. It's very simple tease you just typed and the ex search It asks you where it can find the website that you want to publish. So you just the build folder e creeds random domain for you. If you go premium, you can also choose the domain then better and you deploy the website and it's riding for example Mine is Moti i dot surge dot Shh. So if we but know d I got Serge Sage, we find I work website. 10. Class Project: watch the whole class, so it's your turn to call now. The project that I give you is building an online bookshelf that is, You will create a website in which the users can add the books that they've read or they want read and give them a rating. Let's narrow it down. You need to show the full list of the books when the user opens the page and show some extra information. When he clicks on one off them, you need to have a form where the user can not. The book and every book must have a title and over I want read or Red Tuck and then optional rating. Finally, you must store the books locally. That is, if I user adds a book, then closes the page when he opens the website again, the book must still be there. This last request probably frightened your a little bit because I didn't teach you how to do that. But the point is that in the rial life coding, you never know everything about what you have to do. It's a crucial skill being able to learn and find in the Internet resources about your cask . Don't worry for these one time I will give you a hint. So the first thing I suggest you to do is to store the book data in Jason that is in object in your state. And second, to save data locally on the user's phone or PC, you can use the local storage JavaScript A B I. You can learn more about it in the mdn. We and finally, you can see the data about the book in the local storage using J Zune dot string. If I and retrieve ET using Jason the pass that was all I wish you good luck and they hope to see many off your good projects, Zoom.