React.js: Fundamentals

Transcript of the free preview lesson. Remaining lessons unlock with the full course.

Hello, my name is Tony and in. These lessons we will take a look. At what class components are, their structure and lifecycle functions, props, management and use. As well as state management and use. In this lesson we will take a look what a React component is, how they are used and how they can be helpful to us in writing an application quickly and efficient gently. Now, a component is a piece of. Client side code that is very similar to a standard JavaScript function with one distinct difference being that a component will always return HTML. That is a must because that is a visual piece that our user is going to see and interact with. When building a component it is best to structure it in such a way so that it is self contained and doesn't have any interdependencies on anything else in the application. That means that we can use it independently anywhere we want in our application without creating unintended consequences that come from explicit or implicit dependencies. Let's take a look at what React components look like. Let's start our application here by running an NPM start command and our application. Is going to start on port 3000. For this portion. I went ahead and I actually created the components ahead of time to save. Us a little bit of time and just vary from watching me type. So let's drop a class component into. Our interface and see what it looks like. You can see what this is is. Basically a color picker and when we change our color we can see that in real time everything gets updated on. The screen and the user can see it in the browser. Our class example looks like this. So. All React class components extend React component which is an entity that is created and maintained by the React group. So as such it comes with certain lifecycle function available to it. We will go over all of those later. For now we're just taking a look at what a component is and familiarizing. Ourselves with its nature. Now this function you can see is the only function that is truly required because that is what's going to return the HTML or the visual representation for. Our component which is what the user. Is going to see and interact with. As we mentioned earlier. Now let's take a look at what. A functional component looks like. Let's drop it into our application as well. It we can see that visually and. Functionally it is not any different than our class based component. It looks, feels and functions in a completely similar way. But when it comes to its implementation. It does vary a great bit. You can see that it doesn't really extend anything and React is not really. Mentioned anywhere in here except for inside. Of this component that uses some special functions that are distributed by the React group. But we'll go over those later, let's. Not worry about those too. Much for now, but we will see. That, we see that this is just a regular JavaScript object and here of. Course is its HTML portion, which is identical to our class based portion. And this is what the user sees and interacts with. But as you can see, this makes a good candidate for a component because it passes. Another one of our criteria that we've. Set earlier is that it's completely self contained and not dependent on anything else in the application, meaning we can use it by itself in conjunction with other things anywhere else in the application without creating any kind of unintended consequences that come from implicit or explicit dependencies. In our next lesson, we will take. A look at how JSX is different. From regular HTML and how it is used in the context of a react application. Thanks for watching.