React.js: Grundlagen

Hallo, mein Name ist Tony und ich bin dabei. Diese Lektionen werden wir uns ansehen. Welche Klassenkomponenten gibt es, ihre Struktur und ihren Lebenszyklus? Funktionen, Requisiten, Verwaltung und Nutzung. Sowie staatliche Verwaltung und Nutzung. In dieser Lektion werfen wir einen Blick darauf, was eine React-Komponente ist. wie sie verwendet werden und wie sie uns beim Schreiben helfen können eine Anwendung schnell und effizient sanft. Nun ist eine Komponente ein Teil davon. Clientseitiger Code, der einem Standard sehr ähnlich ist JavaScript-Funktion mit einem deutlichen Unterschied Eine Komponente gibt immer HTML zurück. Das ist ein Muss, denn das ist ein visuelles Element, das unser Benutzer darstellt Ich werde es sehen und mit ihm interagieren. Beim Aufbau einer Komponente ist es am besten, sie so zu strukturieren so dass es in sich geschlossen ist und keine hat Abhängigkeiten von allem anderen in der Anwendung. Das bedeutet, dass wir es unabhängig überall einsetzen können, wo wir wollen in unserer Anwendung, ohne unbeabsichtigt zu erstellen Konsequenzen, die explizit oder implizit entstehen Abhängigkeiten. Werfen wir einen Blick darauf, wie React-Komponenten aussehen. Lassen Sie uns unsere Anwendung hier starten, indem wir einen NPM-Start ausführen Befehl und unsere Bewerbung. 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.