Lecture Script

Summary

TypeScript Class Features

Lab Assignment Review

React Fundamentals Introduction

JSX and Components

Vite Project Setup

Upcoming Topics

Action Items

Notes

Transcript

what it might start to look like. So in TypeScript, it really wants you to define the properties or the class numbers at the top with access keywords and their data types. And then you can do assignments inside the constructor. So this is a little different than Ecclescript classes, right? It doesn't have have this type of idea where, I mean it has public members, public and private members now in that restrict classes where you can define numbers like this, but this gives us the, this kind of enforces it.

Uh... And then we also have that with methods and All this stuff is Obviously, TypeScript, so when your code actually gets compiled into JavaScript and runs, none of this stuff is actually preventing anything from being But as you're developing TypeScript will use these as guides and your editor and your phone. just in general to help you understand, like, oh no, you can't, you're extending this class, you cannot.

Yeah. override this, or you cannot access this method. Obviously, there's a private variable. We can only access that from within the class itself. So these are all just things to help TypeScript while you're developing. Parameter properties. You can put access modifiers. in the constructor instead of doing them up top. I kind of like them up top because it's very clear, but if you come in from more of a pure JavaScript way, maybe this makes more sense.

Abstract classes, again, this is... Basically saying, okay, we've got this abstract class called animal. We have this abstract method in there called make sound. Obviously, we have no implementation here. And then if we extend this abstract class later, we have to implement that method inside. Uh,Again, just the, This is just like a slight syntax extension on top of JavaScript classes. So type safety, the access modifiers, the read-only, From the front.

Read-only modifier for properties, being able toUh. Declare and initialize. the variables in the constructor by putting the access modifier on the parameters directly and then the abstract classes. These are all things that are different than how I just did a six-plus. Okay. So that was the last stuff that we didn't get through. Let's take and. Take a couple minutes just to look atTalk about the lab that we were gonna have.

So we had app.js just to remind everyone. That jazz that looked like this. Here we are. index.html that looked like this. And that was working, right? Like, we could open that up and see it run. Uh... A few things that I'll just mention as like gotchas, or not gotchas, but things that could have tripped you up. So the assignment asks you to take and create a B project. from that, a TypeScript-based beat project to take that entire app.js and put it in main.js to start.

And then it gave you the HTML that it wanted you to replace your HTML here. Now, one area that you had to be particular of, and hopefully everybody did,You tripped up for a significant amount of time here. Is if you just dump this, HTML indirectly, you probably have had some problems for a little bit. because One, the script tag at the bottom needed to point to the TypeScript file that was in your source directory, not a JavaScript file or a compiled file in the disk directory or anything like that points to the TypeScript file and you need to have type as moduleIt's your turn.

It did ask also to make a separate NPM script. I'll check. that was running the TypeScript compiler in no emit. So that was one way to check it. That is going to be one way I'm going toCheck these. I'm going to do that and expect to see zero errors. That's like the big check. the main things, doesn't actually process with zero merit. You'll look at some other things too. The other thing you could have checked is if you ran build,OGM run build.

Since build runs the TypeScript compiler, as part of its checking process. It won't build if there's any tension in the arms. So that was another way that you could be checking in as you go. I had to set this up just because I wanted everyone to see. Actually, you can, I think we talked about this last week, you don't actually need to know the flag because the Should have. No mid-set in the PS config.

All of those should have been given to you Uh. a message saying, you know, Well... Down here, when you went to use these variables, it should have been saying, well, element is possibly null. So What I wanted you to do, like, We talked last week, like, the hammer approach is you put any on it. No, that's not good. Okay. But we talked about using a type assertion. And how if you use an as-type assertion with just what it is, Then you're kind of telling TypeScript that you are basically saying it's not-and that's not going to be null, which In this case would be fine because it works but you're opening yourself up to some issues with possible no values so in this case We could type it as this is an input element instead of just an HTML element.

Or no. This is a button element or a null. This is a button element or a null. This is a U in order of this element or that element. Those are all ways you could further type narrow, like assert this to say I know these are gonna be these type of elements or no. And then TypeScript still thinks these could be null, so when you go to use them in different places, Using an if statement to type an arrow.

Would be a good approach. Again, lots of different ways you could do that. You could also do things like If you know This add to do button, if it doesn't exist, the app is completely broken. So instead of writing if add to do button and then inside the if statement, this is what I want you to do, you could have flipped it around and said if not add to do button, throw an error. And then just after that line, just Do the code that you are assuming would exist in the bug design.

But this one... Since the element or the event was being used, you had to type it. So saying that in this case it's a click event, so it's a mouse event, Thank you.

Probably Got away with that, but mouse event would have been the more specific. Now you may say, if I'm on a mobile device and I don't have a mouse, is it still a mouse event? So there is a whole touch event system and even when you're adding event listeners in a web page, you can say, oh, am I listening for a click? or a mouse down, or what am I listening for? There are touch events too. All of the mobile devices with touch screens just to handle backwards compatibility.

I'm going to be trying to go through these in the next week, like this weekend.

Yeah, and I'm gonna, like I said, I'm gonna run the check function. If you didn't put the check function in there, then we would get some points off for that, but then I'll run your build function, because that will be there from B. And if it doesn't compile with no errors, then that's going to be a major part of the deduction. And then I am going to look at the code just to generally go through and see did you use any, did you use not null assertions, did you do any of those things.

But This is like the general default of what Most people would want to be notified of because it's like, I don't want to have stuff unused littered through my phone. Okay. So the other piece was if you're in 542, I asked you to implement an additional method. In the to-do class, that would delete all completed to-dos and then add a button to the HTML page that says delete all completed to-dos, add an event listener and main TS that triggers the functionality, and then type it.

So basically to do that, All you would have really had to do is inside the to-do list class, Take another method. We completed to do's. And Put some kind of logic in there to handle it so the way I implemented itWas, I think, I basically looked at how the other ones were implemented, right? So likeUh... What are What's being used? And I was using filters and stuff like that. So these methods take and they look at the list of to-dos.

I'm going to be looking at these this week, or this weekend. So if you have a concern, why don't you email me before the next day or two and I'll take a look at it. I will consider giving people opportunities to fix certain errors. uh... You remind me of that. So as I'm looking through my kind of like, Judge everybody and say, okay, where does this fall? Okay.

And if I do have that situation, in the past I have let people go back and make some changes on some assignments. Usually don't go back 100% of the points just because for those that, you know. Didn't we do it? I don't want it to be like somewhat of an equitable situation, but But yeah, let me know. On something like this, I'd rather have you understand it and get it right. So just send me a message and as I review them this coming week, weekend, I will...

Like I'm gonna do some demos tonight stuff and get the foundation plan but my plan is to next week's class to have a pretty more in-depth mostly demo based class where we're gonna Build a small app and react and use I don't want to say do it a few different times, because we're not going to do the whole app a couple different times, but like... Do it and then like, swap out pieces of it for like using a reducer versus not or using contacts versus not just to kind of see the different pieces and swap it so I'm gonna hopefully be able to get this so it's all like one like In one night, you can do all those different pieces of the same.

So I'm going to go through some fundamentals tonight. I also am going to quickly, while we have time,I usually did this later in the semester. I'm going to try to start introducing it earlier. Try to, if we have time,We have a brief discussion about tailwind. Because in next week's demo I want to use Tailwind. So I just want to like... Get it in everyone's mind and have you breathe. website for it, read through some of the documentation and just get familiar with what it is.

And they were, the first thing that actually got searched, or searched, shipped was this, one of the search elements in Facebook got turned into this. dynamic component architecture that was being developed, right? So he's working on this as like a tool to solve some of the UI problems within Facebook. Because the code was getting very complex. Especially The big problem was in their ad. And left. Just the UI was becoming a nightmare to maintain.

And T, light. Rich. So it's like how do we build a library that can help with this and make things a lot simpler to build? And that's what was the like, The initiative for doing this. So Between 2011 and 2012,Um. This is getting... Built up within Facebook internally. It's starting to be deployed in different areas of Facebook. Early out in 2011, The newsfeed UI got rewritten to be based in this. And then when Facebook bought Instagram, they went in and redeveloped the UI in Instagram and based it all on this product.

Um. And again, this was all being done as an internal tool within Facebook. So then At the JavaScript conference in 2013, Facebook had a presentation where they announced that this exists. Here's this tool and we are open sourcing. So that's when they got Open source, people started using it outside of Facebook. And Again, the idea was build a highly interactive user interface. that have data that's changing.

So the idea of kind of at a high level came down to We're going to build these components. We're going to give you ways to pass data to these components. And then the components are automatically going to react to data changes. and update themselves in the most efficient way possible. So a lot of work went into this to figure out what is the most efficient way that we can only query and only update the absolute minimum things we need to for this particular piece of data that changed.

So lots of considerations. Alright, so we'll go through these couple slides pretty quick because these are just really high level concepts and we're just going to like... SoThere are few Core concepts that that we'll keep talking about throughout. Our react Discussions? Okay. I kind of bucketed in these four. We have this idea of composition. So the idea is you're going to build components. Components are going to be reused.

They're going to be used inside of other components. So you can start looking at how do you take a page or a UI and break it down into small reusable components. And then if you get really good at it, it's like how do you-bring these components down so they're really reusable. So like, I'm going to make a button component for my app. But that button component takes properties in that says, oh, it's the primary button, or it's the secondary button, or it's got this text on it, or here's the action that it does when it's clicked.

So when we look at the composition architecture, I said we use components inside of others and nest things. For the most part, it's not 100%, but for the most part, Data only flows from parent to child. There are ways to get around that, but for the most part, that's how it goes. So. We have that. We have this idea of explicit mutations. We explicitly tell React when something changes. so that it will then know to re-render So how this is done is kind and how we build our components.

There's going to be a few slides I'm going to tell everyone up front in here where I'm going to tell you an old syntax and a new syntax just so everyone's aware of the existence of both. But the old syntax is kind of like really defunct. Most people are not using it. But you may run into it, so I'm going to just talk about it. But explicit mutations just means When something in data changes, there's a specific way we do it.

so that that triggers React to update. And then... One of the other reasons I like React over some of the other things is it's just pure JavaScript. Type script too, but, yeah.

After break, but we will actually be building class basically. Alright, and then we're going to talk about JSX some more after the break. JSX is just a syntax extension to JavaScript that lets us write our code in a more visually appealing way where we actually write stuff that looks like HTML. All of that gets converted by whatever compiler we're using, or Bundler, into actual React Create element function calls, so like the actual code that gets sent to the browser does not have any of the JSX syntax.

The browser's still not understanding. But the compiler converts it because writing everything out in this create element syntax is very turf. Very well. It's very wordy, very challenging when you have nested components. So doing it in JSX makes that so much easier and cleaner. And when you look at your components, you're like, I know exactly what this is. Okay, so let's take a break. 8:15 will take 10 minutes.

We're going to be focused on using Echoscript modules and building all of the React components as Separately, like components in modules. If we want to build a button component, we're going to make a button component, put it in a button file, And everywhere we want to use that component, we're going to import that one. Now there may be a world where we create a file that contains multiple components in it that are exported, but I tend to like to keep things One to one, just to keep things more organized.

And it is a component is a function or a class which optionally accepts input and returns a React element. We just talked about the element being a fundamental piece.

And in the past, the decision was made by do you want to use state inside your component? Do you want to have your component have some memory of its own? If that was the case, you had to use a class. But in modern versions of React, that's not the case anymore.

And functional components can have their own state. So at this point, there's really no reason to use classes.

And they are not like... Deprecated as in being taken out, but they are not actively encouraged. I think there's only one spot in the library that you start to use a platform. But everywhere else you can do everything with function.

Our function or our class, but our function needs to start with a capital N. And it's just something that the React library wants. So we're creating a component that we're calling HelloHeader. The function takes props. Basically that's every attribute that you put on that component when you use it gets put into that props object. And inside the function all we have to do is return what this is going to look like.

Okay, if you're gonna use that props data, Remember I said it looks like an HTML element with attributes on it? So inside this profile component that was created, If you want to use this name prop, It's just props dot whatever it's called. Inside JSX. You use a single curly brace. to evaluate JavaScript. So once you start, you're writing regular JavaScript. Once you start writing JSX, which is what this looks like, this HTML, In order to do any JavaScript stuff in there, evaluated expressions, anything like that, you have to use the third race as a pandemic, surround.

And again, react is still reactive and interactive on this props data. This name value is a variable. Instead of just a string, so like if it was name equals curly braces and then a JavaScript variable name, any time that JavaScript variable changes, Elsewhere in the code, it's going to trigger a rerender. 40. That's data coming in by props. State is data that your component needs to store itself. So when I generate a V project here in a few minutes, All beat projects react with beat projects create a component with state right out of the main like starter page.

In functional components, we do state with this useState hook.

It's also the way that we're going to do the explicit mutation and tell React we're changing some values in the statement all through this statement.

is Any time you're taking user input from a user, That user input should be in what they call a controlled component, which means that The data is being stored in state in the app somewhere. And the component itself is being updated from the state. It's almost like a circular thing. It's a little crazy when you look at it, but it works.

And the idea there is, It's like if you have an input field that has a string in it, we should never be querying for the HTML element of that input field.

and reading the data that's in it. You should be in your app just saying, what's the value currently in state? You're using the value that's in the JavaScript, and you're letting the framework handle the UI.

components nested inside of other ones using props and state. It's just a bunch of examples of all the different syntaxes. So take a look through this. I feel like as we go through the demo, the really simple demos tonight and then start building next week, that's more valuable to spend time in than looking at these syntax examples.

Take a look at this in between now and next week and just kind of try to absorb some of these examples and we'll see.

It's just structured for React. We've got a bunch of configuration stuff. We don't need to worry about that right now. We're running in the dev mode, so we have the hot reload.

So we have an app JSX that's capitalized. So that tells us that's probably a component. We have this main JSX. And we have our index page. So if we look at our index page, we'll see all we have in our index page is a div with a high E of root. And The script that's being included is the main JSX file. JSX is the syntax that we use for JavaScript files that containJSXO, it's just, Technically we could use JS files, but it's just clearer for everything if we use the JSX extension.

So We know that our entry point of our application is the main JSX file. So if we look at the main JSX file, You see this is a very simple file. All this is...

Is that. This is that react dom create root command that I said is what injects the React component in the page. You see that we say create root, document get element by ID root. So we're getting this empty div here.

So now that is what's triggering the entire app to render. Okay. want to, or at least for our purposes here, care to even edit this file. We're just going to leave this alone. We're going to do everything inside the app.

We got a couple images coming in, those are our logos, and then we're importing in our CSS file, which is just the CSS that's related to that. So because this build system is set up with VEAP, it can import CSS that way. So as you build components, you can build CSS files and import them from those components. Or if you really want to, you can just go back to the index and write all your CSS in one.

So as we build this out, we're making new files for every component we do. Most of this app here Which is not even an app, right?

It's a single page that's got a button that keeps a counter. All of that is actually happening in this app.jsx file, but I would never write all my stuff in one file. It's going to get spread out between many funds. This is just like how beats set you up like, here's your project.

Next week we'll do more. I'm actually not going to write the whole thing from scratch because we won't have time to do it, but I want to give you a little bit of an idea of what I mean by adding additional files.

You have to do it with proper-Okay, so. You see here we have this used state hook. That is... Doing the state. The U-state hook That's part of this React library. That returns to us an array. There are two elements.

And the array includes a variable, that references the value that's stored in state and a function that we can call to change the value that's in state.

ReactJS Overview

React의 등장 배경

개발 과정

실제 서비스 적용