First steps with React.js

1. Intro: everyone. I'm Julian. Have a fun time with the looker inference. I've been walking in freely and since the beginning of the year 2017 and now I have been contacted by sketcher that come to make a first online class. And I'm really excited to show you my progress. My first online test would be with reacted chase. It's a good framework to do from 10 work. We will see more in detail what we can do. The online class will contain a class project just like almost every other course on skill share. And we will be doing it all along during the course. If you follow the course, normally you should be able to complete this class project without any mistakes. Anyway, if you want to send to me your class project really in creature to do it so that I can takes your mistakes on maybe give you some points of improvement or something like that, it will really make you feel like you have progressed because you would have feedback on your work. And I really, really enjoy it. If she was standing back to me because it will show me that I have made a good club. As you can see, I'm using it to tell in six in my crew. They also have my personal computer right here. I will not be using it for this class. Have we been using the Mac? But this is not military. I will explain to you everything to get started with react. I hope you will enjoy the schools. Have a good time. Guys keep on working. 2. What is React.js?: And when we come to this calf about to re actually it first step with three actually reacted for murder with creative my Facebook in 2013. It aims at creating single page with applications, and it uses a virtual door, which makes wondering very fast what other strength of reacts. It encourages you to use component, which are very simple. Piece off each day. My coat it use it JSX as a template, insistent Michelle as it toe complex. Gwendolyn condition just quit, and it uses its veteran. So what we learned in this course we will see how to stop working when I went to work for the reactor includes Mulch A S and P M and the Creator. Yet up to then we will see integrate our first component making basic render it on the page . Then we bring the second component, which will be a button. And when we were in the return the first compartment. After this we learn how to communicate between components. But you think the properties after communicating between components for you, I understand how to interact within the company. But it's in the state. And to finish it, really, you see assistance to make out. I feel prettier. This course will also include a class project which will consist will be like a simple chicken cut. We'll have to use both properties and state, and you will have to send a coat to me so that I can commit it. 3. Setting up the environment: everyone we're going to start. Our real actually is class. First of all, we're going to him, so every two would. We will need to start our first react up. So first we're going to don't know no chairs on your Web browser and head of it a notorious that work. Then head over to the Dough notes section good to the current tub and the intellect to answer queries pointing to your operating Tuesday. Mike it. It would be my question starter. You can use Windows installer leanings, binaries. I will not covers installation on Lenox because UNIX users should be able to insult invent off now that the back area didn't told they're going to open it. This packet released on Notorious and NPM en PM's in note package. Military. It would be useful to installing other packages such as React, for example, continue. Come to new, accept the license and then just finished installation. Do not check out anything. It will be installed and we'll work out of the box. The check. If your installation has been successful Evident Terminal and type node Dash V This will give. Maybe it and I put a little bit different than this, but it should be at least 8.9 point one. By the time of recording, The video division of note is 8.9 point one. That's a check. If NPM isn't thought it should, 5.5 point one maybe can be different now. They're going to insert a very convenient to their apples. Get started our first react up. This will help us have a development of it which recover. First we loading CSS freeloading and live with it. Maybe a recovered in another class. How to get your first an own development ever. But this is a very complicated topic, and let's focus on the more important for now, the code in your terminal type NPM. Install Dashti to instead of globally so that you can use it. Other regular shall come and the name of the packages create react up. As you can see, the package has been known locally. Now I'm going toe use it create react that the first argument of this command will be the name of your project to forget them before they're going to type. Our first project has bean installed. They probably have a different are put in mind because I have installed Young, which is a different packet of military footnote. It rips you installed packages fester. No, let's go into our Scotia directorial, which is where the project Please open your code editor my credit or is sublime text looking with anything you like? I told me the cool choice for react. So as you can see, there are many complicating things in this directory, but we're going to use it a simple way for now in your terminal. Or you can type in PM run. Start for short NPM stock, which does the same thing as you can see. It opens a new tab in my Web browser because it lunch is the development ever, but also loads the first page. Welcome to react to get started it it SRC adult yes and safe to reload. Let's listen to the way both guys open. Abdo changes. You can see it's a little bit complicated, but we're just going to try out development over from there. It's not something like that. Move the window to see the effect file. My brother has reloaded and our headed his life. I did not feel the way for the myself. It has 32 itself. The first part of its class is over. I will get you back in the second point to start understanding how react works. 4. Introduction to Components: Hey, everyone, if you're watching the video, you should not have a competing tradition of reactor Notorious working. And so you should know that react O. J s works with components. So in this listen, we're going to learn and understand. Component is basically something you would have to re use and something you can split in your do component to have something more usable and more testable this way. For competent Rex, you will not break you onto your website. If they can example of something I have them. Is the website types of or bish still was language talk As we continue very basic example, this green bar right here could be called a header, for example and it is basically react component and you click on the taps. It opens new pages and update you his doing here your continual for that. So basically this is a component, the whole thing, the component and even a single letter. A single later and character from the component. The filters right here are component as well. The thing you have to Alistair is that components do not have access to extra your environment. They need to communicate with finals or even to order component. We will see how it works in, Ah, another lesson. So now how those were candor component aware Component is basically GSX on part of code. So let's open up our So now we have ours can trade directly, the one that was created earlier that's opened a saucy directory in two, like a patraeus so you can see it. Is it across? Basically, it's six close, which would be translated later into basic biscuit. Integrated extends component and component is react. Cross. It basically has everything you need to to using your component. The render method is what showed the component. Hurry to use visual. Have it returned. Metered, which windows? Everything you need in your component. So you use GSX. It's a little bit different than HTM are because, as you can see, for example, right here we do not white close. He calls have better. What close name? Because her header where we with Christ land Because the keyboard close is with the key word in your sex so we'll need you need to have ah class name attribute. There's a list off attribute you need to use with react instead off regular attribute. Ah, the one I can think of, for example, is ah html four. For a label like, for example, label html four any of your time t 80 you will have a complete least on what you can use as a tribute on official react documentation. There's a quite literally east, but you get used to it. And also, if your Web development server is correctly configured, we actually warn you about using incorrect attribute names. Okay, So are you excited to see you with a component ease? Now you know a little bit how it works. Now we're going to create our first component in the next lesson. I see you later. Bye. 5. First App Component: had everyone treating him that you're watching the video you should have watched apart to off our first steps with reactor. Yes, close. And in this class we're going to see how to make our first component when do it on the page and we will see what has been done. The festival here I have my sublime text window with our project open. First of all, you're going to go in adultery. Yes, we move everything and to defend singing indexed O J s. So, first of all, in app, Thaci s who are going toe import everything we will need to create our first component. So we're going to import, react and component from react. The syntax right here is equivalent to import react. We act that component. And actually, I could even white react dot component directly. Well, first simplicity reasons. We're going to import component at the Singleton. Then we're going to create our class. That's called it up as it is an apt or chairs close up extends component. So this is simple, Opie. We're going to extend. We're close from component. Then if you remember correctly in the previous part we have seen have to wonder something on the page. It's in the render metal. Let's create a window method. Remember, it has to return some share sex, some kind off dynamic. HTML. Let's create a weight on time and we're using parentis is to make a record cleaner. So basically, we're going to write a simple H one. Harry Lee's Our Hello World component. Let's save everything Now we're going end, Doctor Chaos going to import. React once again Then we're important to wonder from reactor method. So they're going to do Wender up. We can you gsx right here? Yeah, and regulate to render it in document. Get element by 80 that. Okay, so if we do with don't you see something that's for me? What is up? Why is it different? It's not defined anywhere. I just found out. So that's the kind of virgin we're going to import it as well. Import up from Tote Slash. Happy to what? What she is packager will know. It's hard to do in that shares, Okay, so let's try to run our development Web server and see what happens, as usually fill up in my Web browser. We're going to see Yes, there's a never export default and brought it up with not found it up. Module up. We're going to listen to this hour and do something like export default at let's say, Oh, I get container in less a domain. A man actually before got to create or element. So since it did not an element, we're going to use something that they're going to use. Dutchman, That body it works. Ah, component is wondered. So as you can see, we have created component their leaves in a single module. Che s model. Then we have imported this component in our base file. Then we have window date on the page. You could also women with this line and actually write export default class. It does attempted. See, it works again. So now we have created our first component. Next listen, we will create the second component, and then we get them to interact with each other by 6. Components communication (Props): have everyone treating here and welcome to part four off first steps with Reactor as close . She remember correctly on the part three of this class we have to know to create our first component, and I have 200 on the page. Now we're going to see how to create a second component and get it to interact with off up component, as is your Let's hope it up our texted eTour And after traders, we had two stays. Hello, world. Let's just use a Deve and let's fight here import button from but Favor Basic. Now we're going to use the button component, which we will create in a few moments, just like we used apt component in our base fight. So let's white button. We're going to say label it cools and the world, and we're going to clothe the tide. You have to remember that in JSX, Moto clipping tags are very commonly used. Let's say this file now. If you remember, we have to create our button component. Let's create a new fight. It's called it. But then the tree is just like for the app confident can import, displaying again, and it's create our cost sport default Close button extents compartment. So they're going to white. Wender, we turn and it is going to be a very basic HTML button talk button. Better. So now what do we wait? Another button she remember We have declared here, but label it crawls. Handler words. So how do we get this labor but going to have to use the properties of the reaction point Property that react component are fetched in the props property of the class. We're going to extract it, Const. Hopes equals this. So it's going to use props but can do even better. Council able equal, different pops. We're going to use the label in the props and now we're going to use it like this. This is going to write button, then our label and then closing Tibetan tie. Let's see how it works. Here we are. We have a button component. You can click it. That's nothing would happen. Richard the Battat. Now you're going to see that we can do almost anything in the props. Let's see, we're going to use this indentation to have very clean called equal. And now what do you want to do on a on a quick. We're going to you The function. Let's say this the boat clean and we're going to declare something here. Something equals the function. Simple function window dot Alert. I was correct. They could have to use anonymous fusion here, but we're going to use this something very clean. No. What do we do? Remember, we can use defending of pups. One click, and now they're going to say on quick equalled one click. Okay. How it works. One click I was quick. This component is known walking and can interact with a present component. You can maybe do something like that. Something on here. Let's say, for example, um, they I was clicked. Plus Okay, lets say you No, look, we're going to do this dot on click 10th in year one click. He calls this that perhaps that on click we're going to say on click today. See, you can pass arguments to any function you put in the properties. So this the property spot in the next part of into the state how to interact with the component itself 7. Using State: Hi, everyone. Welcome to about five of these first day for three. Actually, it's close, if you remember correctly in the previous step, we have seen how to create a second component and give it to interact without first component. Now we're going to interact with the component itself by using. The state should remember the introduction video correctly, state emphatically an object that reaction observed to win the thing everything it needs. So how do we quickly estate? Let's open our I thought she has fired. The state is declared in the constructor of the components. It's a constrictor, perhaps properties, and it's called super pups. So that re actually initialize the properties politically, a class member state equals. And then we have a step object that different infinite show to From now it's force. Okay, have creating a state member. How do we use it? Now remember, it's a little bit like props. That's why Const show Dave. He calls these that state Now We have fetched hours. Showed you a member of the state. How do we use it? Something like this show, Dave. And there I am, the Deer Show. Oh, hi. Cool from that. Normally there should not be rented. Love there. How do we have Data State? Now they're going to you. The set State metal. Look at that. Instead of sharing in the let's, we're going to update toasted. She's not saved ST. And the first perimeter is an object. It will be the state to update. So we're going toe date showed, If that's quite true. No, we're seeing reactive Data state and a date Only one part. They showed it because in the state to be updated Just want to update showed it. Okay, lets it. Now let's try to kick on the button. Okay. On the deep to show a height. But if we click again Did he steal here? I wanted to hide. Do I do that basically by talking the state. Look at this. If I write, did not state that showed there It could be thinking that will not change since it will always fit your thing value, which is fourth at the beginning. But if I do this, we took all the state Now on the first click that is shown that they can click the Davis hidden, which is what we want now. I just take this opportunity to show you something with react. You can use always to wind or something. Look, that worm up to step three. It's a dark map, Deb. And then we wonder something in this spot right here. What a one Wonder what window it, but and top Cool. Now we can do something. Ready, bitch. Interest. Er current tub Right here. So we have declared a new member of a state. Put it here. Current death. No. And it's what it here to get it back. Cool. Now how do we interact with it? Basically like a but on click. And let's call this that said Children, Doug, time I'm creating here in anonymous function. The record, my said current admitted. That's created, Smith said. Corrente. Tab, what am I doing? I'm doing the same thing at the both. I'm updating the state. Look, that said State current Tad tough. And now I am updating on Lee the current. That member of the thing I'm not updating showed you and with the Brookly show David, not the dating current. So let's take a look. A word under did to show or hide, and here that nothing, because you that to up three warm. What if I had the defecate? The top one is to you here as we wanted because we have only a dated show The state member have not abated enough to get for this part of. I stated no over the night that we will see how to create something a little bit more interesting and make it fit prayer here by using C styles. 8. Adding CSS styles: Hey, everyone will come to plastic on the last part of this react Js class 1st 8 with reactor. Yet in the previous part we have seen nothing to act within our own component. Now we're going to make it feel prettier by using CSS styles. No, as you wonder react allows you to create beautiful educations. But now applications looks kind off. Yeah, ugly. So we're going to add CSS touch to it. But how do we do? See assessing the reactor. We cannot use a stack tight inside. I would share six. It's not beautiful. Actually, most off react users use in light styles. Yup. Basic in lights dice instead of using close is like normally you would do with HTML. We mostly use inland starts tags because it allows you to be to have more control over what you started. Do this right now. Okay, let's create a style value. Now we're going to say, like for example, Tab, This will be the top bar itself. Like on color. They're going to say not great. Some voters may be one pick, so but I'm going to use black. Okay, so now how do we use it first of all of this, Dave tight. This will be the top bar. Now we're going toe where it started, equals dies. Tubs to see this Brooke have created over Taba that doesn't like gray by ground one pixel black border. We can do a little bit more That's in dental court properly. Let's say start calls style tub singler because it would be a single time. Take a look at this. I can't. Kohler. We're going to use actual gray border one pixel solely black again. But this time we're going to say border bottom zero. You can use actually anything in CSS. But you just have to use camel cares instead of hyphen case. How do I use something like work it transform? Actually, you can use weapon transform like this. Just put it in the street. So how does it look now of creating a new CSS part for taps? Cool. You can do maybe a little bit more margin. Zero parting zero nights would be very concentrated. Cool. That's a little bit too Compress it in it. That's what I got. Step cool. Now we have a cool tub. Are right here. Maybe you can had a little bit more padding right here again. Put in 10 and we don't want petting. Other bottom putting zero. Cool. What? The bottle looks pretty efficient now, doesn't it? It looks vertical, and we can also make it a little bit better. Yes, we have a current tab in the state. We can use it to add more style. Okay, so we're going to create a new entry for a CSS subject that's coated comenta. It's going to have a yellow bag on color. It's not pretty, but it's for the example. So if you remember correctly, this the jealous kept object waiter. So how do we create a new object? We're going to use the assignment. Thought of the object. Close Objected. A sign. I'm subject Tyler Tab, and we're going to say style, not current tab. Okay, now all the taps have the current taps died. How do we take this simple user current of property which come from the state? Remember, with the current of you, this stuff then I just died That current up shell script object while the wife at an empty chair. A script object. See, Now none of our taps have the current type started. Let's kick this look current selected. We can do it something in a little bit more interesting. Like color blue his blue. Now you know how to create a very simple react application. You think properties state and CSS style. This is all you need to create a very simple application. Now I will create another course a little bit more advanced into react. Have a good fun. And don't forget to send me your class project. You will find a description below goodbye.