INIT

Episode 11: Let's Get Down To Business

Published: Tue, Jul 18, 2023

(Auto-Generated) Episode Transcript:

Seth Whiting: Hey everybody. I am Seth Whiting, and I'm a developer from Portland, Maine, and I've been coding for about 10 years now. And I am

Jacob Pacheco. I am a barber from Augusta, Maine, and I've been coding for about, oh no, ive forgotten. Give me a second.

Last week it was 10. Am I,

Jake Pacheco: am I at 11? Yeah. Okay. Yeah, I was like, I was like, I think it's 10 or 11.

Yeah, 11 then. Yeah. Sorry guys. Yeah. 10 11 weeks now. Yeah. And I'm just, you know, doing, doing my darnest.

Seth Whiting: So you've officially passed me in weeks versus years. Yeah. Hey, pretty big deal. Za. It's, it's, it's, it's the little wins. Yeah. But, well, yeah. What did you get up to this week? I

Jake Pacheco: set up a few things actually.

Basically been working on setting up the beginning stages of my app. I ended up in, instead of using what, what was the one that you had

Seth Whiting: said to use originally? Create React app. Yeah, create

Jake Pacheco: React app. I ended up using v it was just highly

Seth Whiting: recommended.

Jake Pacheco: Yeah, it's kind of a, you know, it's simpler anyways but a lot of people had recommended it online and stuff and I was like, Hey, Seth, what about this?

And he is like, I heard of this, so yeah. I was like, yeah, why, why not try it, I guess. So I set it up with ve and set up all of the other acronym things that I cannot quite remember now. I remember yarn, I remember. What, what were the, some of the other ones that Node you had had me set up last time we had talked Yeah.

Node.

Seth Whiting: And along with, I think along with Node comes npm or is it vice Versa? And

Jake Pacheco: well yeah. Yeah. Along with Node comes npm. Yeah. Because it had me do it after I tried to do it the other way around and it didn't work and I was like, why? Yeah. And then I installed Node and then did NPM and it worked.

So yeah. The setup was pretty straightforward. I did have to reach out to Seth to be like is some of this not installed like as like an application on your computer, but instead installed like to whatever project you're running? Mm-hmm.

Seth Whiting: And you had

Jake Pacheco: said like, no, it's installed to your computer, which makes sense, but also, Like, it's almost like its own thing.

It feels like, because yes, my computer has it. You can't like just click on something and open up. Just that it doesn't seem like anyways, or I haven't found out a way to do that. So basically in your command line, you have to like make it so it works in your file or in your application that you're building.

Is that, is that somewhat accurate? It seems like, like with Node N P M and yeah, just V in general. It's kind of like something that's initialized through building your app or

Seth Whiting: makes it so you can actually

Jake Pacheco: do that. I don't know.

Seth Whiting: That's what it seems like to me anyway. This is this goes back to a conversation that we had on a previous episode.

I forget which episode. Mm-hmm. But there's the concept of a graphical user interface and that's like what, what most applications that you download are like, you open them up and you have like a window open and mm-hmm. You know, you click around on things and, and whatnot. These are command line interfaces.

So there, it's an application that you download to your computer, just like, just like the gooey applications, the graphical user ones. But instead of interfacing with them in a graphical way, you interface with them on the command line. So it's a command line interface. So in order to do something with these programs that you just downloaded, you just type like V or install whatever.

A actually V is the one that I'm like not familiar with, but npm Yeah. V i, I think you, the, the command was like npm. Yeah. Like run beat or something like that. I don't know. Yeah. It's

Jake Pacheco: something like that. But you, you, you don't have to be perfect with that anyways, cuz you don't. Yeah, I don't, and I can't remember.

Yeah. But, but yeah, it, it, but I, yeah, so it's, it's, yeah, like, like I said, I mean, I think in layman's terms, what I said makes sense, but it's also like that's truly just in layman's terms, like, I, I don't, you know what I mean? Cause I have never used something that wasn't a graphical interface other than I guess when I was working on like, Android phones again, like when you would do stuff, you'd do stuff just in the command line, Uhhuh yeah.

And you'd have to have like your batch files or whatever to mm-hmm. Kind of pull up from. So it's kind of similar to that, but, but I guess

Seth Whiting: it didn't click

Jake Pacheco: immediately that like, Oh, so my computer just has this ability to create these types of things now. You know what I mean? Mm-hmm. Like, that's, that's what that all did for me.

Is it what it seems like anyways? Yeah. Yeah. At least when I created it and stuff, and it created a whole app folder for me with a bunch of stuff that I don't, you know, really understand. You know, Uhhuh it has node modules, then it has

Seth Whiting: public,

Jake Pacheco: which has vet in it. Uhhuh has a bunch of other stuff.

Source wait,

Seth Whiting: so your public folder has VT in it?

Jake Pacheco: Yeah. In my app folder. Yeah. So like for the app, it's, it's like the keeper app. You click that Uhhuh, and then it has node modules. And in the node modules it has, I mean, just so many things. Yeah. Yeah. And then it has public, and in public it has v. Which is an HTML document.

Seth Whiting: It says so is it v dot html? Yeah. Yeah.

Jake Pacheco: I, or that's, that's why I assume because it's coming up as a, as an HTML document or Microsoft Edge. Okay. Yeah. That would HTML

Seth Whiting: document makes sense then.

Jake Pacheco: Well, I think it's because when you first open up, like your actual link using this I noticed like.

Seth Whiting: The url like we've done

Jake Pacheco: Yeah.

The URL that we will open in our browser to see our app that we're building or whatever, or our webpage we're building. When you open that, it actually has like, its own like graphical thing that it does Uhhuh like to show off like v plus, like react or something and it has like two logos for them and stuff, so I assume that's just their extra thing that they have.

Mm-hmm. But yeah, then you have source, you have get ignore or Yeah. Mm-hmm. Get ignore, index package, package log, bunch of stuff. Like I said,

Seth Whiting: I, I don't really understand all of this quite yet.

Jake Pacheco: Yeah. But I'm sure you'll help me with that. The node modules. I was wondering about that. Like what? Yeah, that's a good question.

Cause there's, there's just a ton of them and I, I, I've. I'm,

Seth Whiting: it's beyond me, right. You know? Yeah. The node modules are where all of your like third party packages live. Yeah. And you, you install them by typing, like NPM install or yarn install or just yarn sometimes. And basically it'll check your package J s o N file.

Mm-hmm. If, if you see that in your, in your thing, that's, that's what it's referencing. And it'll say, okay, these are all the packages that we want to work with, and these are all like the version numbers of each package. And so it just reaches out and grabs all of those things, downloads them, and shoves them into your node modules folder.

Hmm. And if you see ones in your node modules folder that are not in your package, J S O N. It's because those packages have their own package, J S O N, and it kind of follows the whole tree down, like all the like interesting roots and branches or whatever for all like your packages and then your packages, packages.

And then sometimes your packages, packages, packages. And so each of them, each of those node modules, like they're not usually huge and they are never they're never, you're not supposed to. It's a bad idea to include them with the rest of your project when you like save it. So that's what your git ignore file is doing.

So if you look in your GI ignore file, it almost always has node modules ignored so that when, when you save it via git, like when you You'll usually do it like a get commit and then a get push that's going to save all of your code in its current state and then push it all up to the cloud so that if you ever need to access it on a different computer or access an old version, cuz like you just like royally screwed up your whole code base and you're like, I just want to get back to where I was like a week ago.

Yeah. Then you can roll back and you never, you never usually push up your node modules to that because you have a reference to them and package json anyway. Okay. So whenever you need them, you can just run an NPM install, you know, so like mm-hmm. If you download your code base onto a new computer, you can just run npm install on that new computer and then all those packages will, will show up again.

Oh, that's cool. Yeah.

Jake Pacheco: Interesting. So what exactly do these packages

Seth Whiting: do? So one of them would be React and mm-hmm. That's like your whole JavaScript framework. Mm-hmm. And React, I'm sure has like a bunch of dependencies like a bunch of its own packages. Yeah. And then Vve itself might be a package probably, I, I would assume.

And then there would be like I mean, you, there, there's a whole registry out there called, what is it called? I think it's just called the NPM registry. Yeah. And basically there's like a, a whole like catalog of like thousands of packages available. And so ones that you could install are just like, Ones that make it really easy to work with dates, because those are like a notoriously hard thing to, to work with.

And there are a bunch of packages out there that make it a lot easier. And then ones that like you could install something for like a Google Analytics thing or like Firebase has a bunch of packages like Firebase that we were talking about. Like their, their SDK is available as a node module.

So like to include Firebase in your project, you're just do npm install firebase and, and then you'd have access to it. Huh. So, yeah. Interesting.

Jake Pacheco: Yeah.

Seth Whiting: Yeah.

Jake Pacheco: Yeah. It's when you first get all that set up originally, it's Somewhat overwhelming in just a sense of like, you're like, okay, now where do I start?

Just because it's like, right, right. How do you even, you know what I mean? Like you're looking at,

Seth Whiting: you know, it's, yeah. Yeah. It's a lot. Yeah. Yeah. But yeah, and a big question I'm sure that you have is like, if I were to like, put something into my application, like where do I even put it? Yeah, yeah, that's what I mean.

And usually there's like a source folder. S rrc. Yeah. Yeah. That's, that's where your, your your code is going to go. Okay. And then that gets compiled and put into the public folder. Okay. Or sorry let me think here. It it might go into like a build folder when it's all said and done. And the, the public folder is just for like, Your main HT m l page and a couple other things.

But basically you'll, you'll very rarely touch the public folder. You're gonna be working in the source folder pretty much, you know, 99.9% of the time. Huh?

Jake Pacheco: Yeah, cuz I see here it says like, you know, app as a CSS source file app as a JavaScript source file Index as a CSS and Maine as a JavaScript.

Mm-hmm. Yeah. So I guess, I don't know. I mean, you know, the questions are overflowing a little bit. Like where do you even start? Yeah. You know what I mean? Yeah. Would I just, you know, like I, I've opened this up in my Visual Studio code mm-hmm. And and it has, you know, I, I mean, I'm looking at the same thing just in a different.

Organized fashion. Mm-hmm. And, you know my app css, like, would I be adjusting that pretty much entirely? Like for, to make it actually look the way I want it to look? My JavaScript already has a ton of JavaScript in here,

Seth Whiting: you know what I mean? Yeah. Is that,

Jake Pacheco: is that normal?

You

Seth Whiting: know? So it's just a JavaScript file, like your main JavaScript file or something.

And yeah. So I have,

Jake Pacheco: I have my

Seth Whiting: main, hold on one second. Sorry. Sorry. Before you answer. Yeah, no worries. Let me just pause real quick. Yep. Sherry's calling me from inside the house, so it's from inside the house.

Hey,

nice. Jake. Can you see? Hey, he's in a swing that we just got for Joey. Oh, nice. That's

Jake Pacheco: sick. Every

Seth Whiting: time. Every time. I'm like, I just got a bike. Forvie. I just got swing for Joey. Yeah. Hey, you

Jake Pacheco: got good kids. Spoil

Seth Whiting: a little bit. Why not?

Jake Pacheco: It's

Seth Whiting: leaves unattended. This is what I do away.

I'll, I'll leave. Keep recording here. That who hasn't started the laundry yet? Winnie? Yes. That bitch. Winnie, I'm play takes two by myself. Is that possible? That's so sad. Why you do the laundry? Yeah. Gonna give with be one, one controller. Okay. Sounds good. All right. All right. Let me talk to you later. Bye.

All right. It takes two by yourself. Sounds sad. It takes one now. That can only be one.

All righty. I'm gonna start recording again. Okay. I just kept it going, but what was the question that I just asked? Yeah, so

Jake Pacheco: Basically I have two JavaScript files in this folder. One of them is App jsx and one's main jsx.

Oh, okay. The main Jot Jsx yeah, main jsx. Yeah. Yeah. Has a lot less written in it. Just Yeah. Import, react from React import, react on from React on, yeah. All that stuff. And then the app jsx has like

Seth Whiting: just quite a bit of stuff going on. Yeah, yeah. Yeah. Cool. Okay. So the, those are technically JavaScript files, but mm-hmm.

They're sort of also the equivalent for React. They're also like your HTML files. Yeah. I'm

Jake Pacheco: seeing divs in them and stuff, and I'm like,

Seth Whiting: yeah. Yeah. Okay. Yeah, so that's, that's kind of like what I was saying with React is like in React, you don't like enhance your. HTML with JavaScript, you just shove your HTML inside of your JavaScript and like, it kind of like processes it and then spits out HTML when it's all done.

So interesting. Yeah. So you still write html, but you write it within your JavaScript so that you can inject like variables into your H T M L huh. And stuff. So like if you, if you have a if you have like a list of reptiles, you could, in your, in your J S X file, you'd return like a map. So the map function.

So instead of using like a four loop Yeah. Or for each, there's a, there's such a, a loop as a map. And you use those a lot in, in react. So you would have like a div, and then inside of that div you would open some curly braces and just put reptiles map. And then, then that map you would have like another div that would, that would have like your reptiles name in it.

And then, and then when you have like closed that map function and closed the, the curly braces, when it outputs onto the page, it's going to loop through all of your reptiles and output all of their names, huh? Like in, in like their own divs. So like anything inside of that map function is going to appear however many times.

You know, however many reptiles you have, it's going to show up like its own block for each of those reptiles. Yeah, that's

Jake Pacheco: interesting. So it's almost, at least how I'm understanding a little bit right now, is it's almost like

I don't, I, I don't really know how to properly explain it, but I'm gonna try, everyone, I try to watch Jake try to explain things he doesn't understand. It's almost like ai another layer of like, programming because it's like, like, or React adds that because it's like, you know, before when I was just making a basic webpage, it was like I'd have my c s s file, my my JavaScript file, and then I'd have my H T M L, this kind of scraps the whole idea of my H T M L file and just makes it all in the JavaScript, which is.

Interesting. I didn't, so

Seth Whiting: it's, yeah,

Jake Pacheco: I, I, I guess I didn't, it's kind of, I, I'm having the same epiphany as like, like understanding the differences between the different languages. Mm-hmm. Like this almost feels like it's own separate, like thing is just react. Mm-hmm. And it's like, oh yeah. And you get to just write in JavaScript slash

Seth Whiting: html.

Yeah. So that's what JSX is yeah. Is like JavaScript slash html. So with, with React, like w previously when you were working with loops in JavaScript, you were looping through things and just returning like values, like Yeah. Yeah. Returning, like, you know if you're looping through an array of like strings, you know, you would return like a string, like a string for each, like.

Animal. Animal. Yeah. In the barnyard or whatever. Like you. Yeah. Like cow cat. Yeah. Cause cats are on all farms. There's, there's farm cats. That is the

Jake Pacheco: thing.

Seth Whiting: They take care of the rodents. I'm just like embarrassed that I chose that as the second animal on a farm.

Jake Pacheco: It's a really big thing. In, in, in actual farms.

I've, I've, yeah. It's a thing. I was raised around farms, Seth, I,

Seth Whiting: oh, there you go. And then like, pig sheep, whatever. Thena, Sona buts. Yeah. So instead of, instead of returning strings, you're returning html, like you're returning whole chunks of like markup, like HTML code, huh? Yeah.

Jake Pacheco: That's, Kind of a mind beep to me, just cuz like that's, yeah, I, I, I guess I didn't realize it would all be written just in one, one thingy.

Yeah. That's kind of cool though.

Seth Whiting: Yeah, so that, that saves you from like, instead of writing like open div, open paragraph, like description of reptile and then like writing that same chunk, but replacing, yeah, the words replacing, you know, the, the words in that description thing. For each reptile you can just have a, an like an a, an array of descriptions and then for each description type out the whole HTML block around that description.

And you know, for like, for all of those reptiles, you can just write one block of code and it will loop through and, you know, print out each, each of those. That's really cool. Yeah. Yeah. That seems,

Jake Pacheco: seems much simpler.

Seth Whiting: Every framework does this. Mm-hmm. Like what I'm talking about. Just in, in their own way.

Yeah. And react, like the way that React does it is just a lot of developers prefer to do it this way as opposed to Yeah. Like the, the Angular way or like the View way or, mm-hmm. Although a lot of people are kind of like migrating towards, like spelt mm-hmm. Which is an, like an up and coming framework, but just because developers love it so much.

The thing about it though is that not a lot of companies have like caught on. Like not a lot of companies are as dispel because React is so ubiquitous that they're like, yeah, well we're gonna find React developers pretty much guaranteed. Yeah. So we're react finding someone

Jake Pacheco: who's working with

Seth Whiting: felt maybe a little more

Jake Pacheco: rare.

Yeah. Currently. Yeah.

Seth Whiting: Yeah. Yeah. Hmm.

Jake Pacheco: Interesting. So I guess my first question is, when I'm going in here and like starting to work on must stuff, would I be editing at all in the

Seth Whiting: main J S X file? I would assume so. So like, I, I work a lot with Next and I've worked with Create React app. I haven't actually worked on a, a v project before.

Yeah. Fun fact about Vet though is like, they do like a developer survey every year for like the whole JavaScript community and like, I've never answered it, but like a lot of people respond to it. And vet in particular was like one of everybody's like, favorite things to work with last year and this year.

So anyway but I, I just have never like, had a chance to work with it really. So all of that is to say like, I don't know exactly how they set things up and how they name things. I know that when you work with like a, a, I think a next app and a Create React app on that like welcome page that you're talking about, like when you opened it up in a browser, it had like react plus V or whatever.

Yeah, yeah. On the other ones that I have worked with, they usually say like, open up your app Jsx file to edit this page. Okay, cool. I don't know if it says that on there.

Jake Pacheco: But I mean, it would, to me it would make sense because my app, GSX file is the one that has all of the code that's already written Yeah.

That has like links and stuff in it, so. Okay. Yeah. It would make sense to edit that, and that would be the page that I'd be editing. Right,

Seth Whiting: right. All right. It's probably it interesting.

Jake Pacheco: Yeah. Cause I, it's funny because I was setting it up, or I was going to try to set it up with the Create React app.

Mm-hmm. And what, what is it, what's it, what are these called? Like create React app versus v?

Seth Whiting: Yeah. So I'm sure that there's a name for them, but like, what I would call them is just like boilerplate, like starter app, templates. Yeah. Sort of like templates, but it's, it's more like, They give you access to templates, so like you can work with like TypeScript if you want to, and they just kind of like set you up with it.

It's, it's sort of just like a scaffolding application that like sets you up with a starter project in, in React or, yeah. Yeah. I think that's what they, they even let you, they ch they let you choose between Yeah. React and like, view and a couple others. Yeah. They

Jake Pacheco: gave me a bunch of options. Yeah. Which is kind of cool.

Seth Whiting: Cool. I was like, cool. I was like, that's, that's kinda nice.

Jake Pacheco: Yeah. And, and then I showed you the other thing that said like what was it? It was JavaScript and then TypeScript and then, yeah, a bunch of other stuff. It's like s

Seth Whiting: S bx, s something BX or something. Something like that. Yeah. Was it? Yeah.

Feel like I Google it. We're coders. No, it's just like something, something that V in particular uses to make things a lot faster. Okay. Yeah. And, but oh, S W C S W C. Yeah.

Jake Pacheco: Yeah. But yeah, so basically what happened was I was like I was like, create React app. I went there and I was like, okay, how do I download this?

And I'm like, looking around. Mm-hmm. And they had like a bunch of, I guess, modules you could download and stuff on there. Is that where I was, that had like a ton of modules or something? Maybe

Seth Whiting: they, they had, it

Jake Pacheco: could've been like a bunch of different projects people were working on and like, it is what it seemed like, and you could download a bunch of different ones.

Seth Whiting: You can like start with a project that's like set up in a way that like people like have made available for, for other people to use. And I think like some of them probably come with like certain packages installed. Mm-hmm. So like some of them might be, Better for starting out if you're like making a project related to, like, video stuff?

Yeah. Or something that might be better for starting out with like a, a social media thing or, you know, whatever. Yeah, yeah. I'm not that, I'm not totally sure, but I, I think that's kind of,

Jake Pacheco: yeah. I mean, it seems like it makes sense now that I know what this is at all. But when I was doing that, I like kind of just couldn't figure out how to just make it so I could just install, create, react app.

Mm-hmm. Like, it just wasn't, I, I tried typing into my, like my terminal a few times and stuff, or PowerShell is what I was using and I, and like it wasn't working. I was like, what, what the heck? So then like, I Google it and go to YouTube videos and every single YouTube video is like, stop using this, use this.

And that's how I got to beat. So it was like, like literally, Couldn't find one that was just about installing just this. So I was like, well, I, I guess I can learn how to do V So Yeah.

Seth Whiting: And honestly, like I know so little about v that like I knew that people loved it. Yeah. But like, I didn't know that it was a replacement for create React app.

Like, to be honest, like I didn't even know. Yeah. But like, I, yeah, it, it makes sense. And yeah. You know, like I said, I hear good things, so like, you're, you're not on the wrong track. Yeah. Yeah.

Jake Pacheco: I might not be on the right one, but I'm not on the wrong. I'm on the track next to the other track that I was supposed to be on, but we're both, we'll go in the same direction.

Yeah. So I guess one question is like, how do I, I, I, I don't know where to start. Yeah. I'm like, Like, how do you, how do you start, you know? Yeah. Like you just start writing random stuff and hope that it comes out the way you wanted

Seth Whiting: it. Like, you know what I mean? So like, when you, when you started it, what, what do you see as your URL in your browser?

Like, is it running right now?

Jake Pacheco: Gimme a second here. I need to find my, my actual u r l.

Seth Whiting: Where would I find this, Seth? I had it before. So I think a lot of the time when you set up the project, you will run a command, like V start or something like that. And if you go into package, do json n I'll be able to tell you.

If you go to scripts, there should be one. Mm-hmm. Called like start or something like that. Yeah. Lemme see here. Actually, you would probably run yarn Start or, yeah. Dev. So do you see in your package do j s o N, like the names of the scripts that are available? It's usually towards the top. There's like a block called scripts, and then within that block there's like a couple different, let's see here, ones one is usually like build and one is usually like start and one's like test usually.

And it should, it should be right at the top. You said it's the scripts like block is usually toward the top. Okay. It's not like the very top, but it's usually toward the top. Yeah. I'm seeing like,

no, this is dead air, url. I think I might have found it. No, no. So it wouldn't be in the url. No,

Jake Pacheco: it'd be, that's, that's, this is like, I'm in like funding or something. This is modules, node modules is a lot

Seth Whiting: of modules. So Oh, oh, packaged js. O n is usually in the, the base of your project. Like not any other folder.

Yeah.

Jake Pacheco: Okay. Let me see here then. Oh, yeah, I think I found it. Yeah. All righty. Well, this looks much shorter and easier to read. Yeah, still it has like scripts and then has

Seth Whiting: Yeah. Bills, dependencies yep. And then dependencies. So if you go to scripts mm-hmm. Is there one called Start?

Jake Pacheco: No.

There's dev, build and

Seth Whiting: Preview. Okay. So run Yarn Dev in your command line. Just make sure that you're in the, in the the, your project folder. Okay. And then run yarn dev. Okay. Geez. Dropping knowledge

Jake Pacheco: on me, Seth? Let me see here. Open and terminal. Yarn it. Wait, yarn what?

Seth Whiting: Dev? D e v.

Nope.

Nothing. Did, did it say anything or did it just didn't, yeah.

Jake Pacheco: Yeah. It says yarn the turn. Yarn is not recognized as Okay. As the name of a, yeah. Okay.

Seth Whiting: Cmdlet. So you function. So yarn is not globally installed on your computer yet. Okay. So try npm Run Dev. Run Dev.

Jake Pacheco: Yep. It's doing something. Yeah. All right.

Yeah, it says. Local, local host 51 73. Is that it?

Seth Whiting: Yeah. A lot of the time it will automatically open your browser.

Jake Pacheco: Yeah, I think it probably didn't because I don't have PowerShell set as my what's it called?

Seth Whiting: Your, like default or something?

Jake Pacheco: Yeah, yeah. And it automatically opened PowerShell in my thing, so I just used it.

Seth Whiting: Un memento. No worries. It, but like, if, if you, if it says like, something is running on local host and then Yeah. Pull in. Yeah. Some number here, it's, mm-hmm. Yeah,

Jake Pacheco: I, I got the HTML up now.

Seth Whiting: Okay. Okay. So what does your URL say?

Jake Pacheco: Local host 5 1

Seth Whiting: 73. Okay, cool. Yeah. So that now you see your the, the like, React plus beat, like welcome page Yeah.

Kind of thing. Okay. Yeah. Yeah. So if you go to your app, JS, o n, yep. Or sorry, not JSON app. Jsx. Yeah. And do you see any text that matches the text on the page app jsx? Let me see

Jake Pacheco: here. I mean, yeah, that's what I was saying is like, I see like, I mean the HTML links would make sense because like it's a React link and a V link.

Mm-hmm. Mm-hmm. But let me see, count is zero. Yep. I see all the count stuff. Set count, all of that stuff.

Seth Whiting: Mm-hmm. So is there any, any like actual text in there that's showing up on the page, or is it all just like image based? Yeah.

Jake Pacheco: Yep. Yep. There's like click on V and react logos to no more. Okay. Which is probably something I should have done.

So, but, but yeah, I see that.

Seth Whiting: So change that text to whatever you want. All righty.

Jake Pacheco: So it's the same as I'm as I would be and then Control S, right? Yeah. Control S. Yep. And then reload.

Seth Whiting: Actually, you, you shouldn't need to reload. Yep. Oh really? Yeah. Try it again. Just like change it to something. Save it and go back.

Jake Pacheco: Oh wow. That's cool. So. I mean, that's a, that's a nifty little thing cuz I, I had to reload it when I was building my HTMLs earlier before, yeah,

Seth Whiting: yeah, yeah. So that's called hot reloading. It's something that pretty much every modern framework will give you. So, so yeah, now you're all set up to just like, change stuff and see it immediately.

Sweet. So yeah. So yeah. Now you're, now you're set up. Yeah, I think so normally you, you usually wouldn't make all of your changes in the app do js x file. Yeah. You would usually make components in like a source slash components directory. So like a make a, a folder within the source folder called components, and then. You would link those components into App dot jsx and Okay.

You would, you would import them just like you're importing React. Mm-hmm. So you, you export them from your component files and then import them into your app jsx file. And, and then, you know, within, with within the components, you can import other components into those components, which then get imported into App Dutch as X you know, it's just sort of like a big tree again, just kind of like Yeah.

It all branches out. And then that one central kind of like station is that J S X file. So yeah, you, you could theoretically write everything in that file, but it would be like, you know, however many thousand lines long. Yeah, a lot. Yeah. Each component, like typically you, you. The whole react is good for splitting things up into their sort of like elemental components.

Mm-hmm. And then just like importing them wherever you, wherever you want throughout your, your application. And generally you don't really want to be working with components that are more than like, I would say like 400 lines. Like if they get over that you should probably rethink it. Like split, split some stuff up.

Yeah. And like definitely if you are ever writing code in one file that you know you're going to need in another file at some point mm-hmm. You wanna split that up into like a third, third file, you know what I'm saying? Ok. And then just, yeah. Yeah. It, both those other

Jake Pacheco: ones, Is that just, just basically for simplicity and debugging or what, what's the, what's the

Seth Whiting: reason for that?

Yes, I guess, and basically if it, if, if you have a component within a component and that same component is also within another component, then if, if the, so, and let me kind of like clarify what I'm talking about here. So if you have a component for like a button component. Mm-hmm. So you can just have a button be its own file and yeah.

That button, you can pass it variables by way of what's called props. And so you could pass that button like a. Label. So like this button says, click me on this page, but it says like, save on this other page. But it's the same code. You know, you're just writing, you're just, it's just a button. And yeah, you, you want it to look the same everywhere, throughout your entire application.

So yeah, you want it to be, you know, in, in one file. You want it to do a certain thing in another file. You want it to do a certain thing, and you can, you can pass like the function that you want it to perform. But all of that is to say, if you decide that you want that button, like the corners, you want them to be more round throughout your entire application.

You only need to update that in one place. Yeah,

Jake Pacheco: that makes sense. You're not just rewriting and rewriting the sa like the same code over and over again for the same exact. Exactly. Yeah, that makes sense. Okay. All righty. Yeah, I was, I wasn't sure if you were just kind like separating 'em, so you're like, oh, well, like, like this is messing up, so it must be a part of this, or something like that.

Uhhuh, although I guess it, it does kind of two birds with one stone with that, because it's like, it does kind of make it easier to find where a problem might be if you know it's on this page and you know, it's with this button on this page, it's like, well, the button's fine, right? Nothing's wrong with our button.

Yeah. It's, it's clearly a part of this

Seth Whiting: file or whatever, uhhuh, and you could have a component for like, like a table. Like on, on the, the, the project that I'm working on right now, like at my full-time job, like we, we have a component for table for tables in our application, and all of our tables look the same way because they're all literally the same code, you know?

Hmm. And if, if anything is like, broken in that table, like the, like it doesn't look right. Like we, we want the, the border on the top row to be, you know, we only want the border on the top row, but it's showing up everywhere. All we need to do is go into that one table file or that one table component file and change it so that the borders are only on the, the top row and Huh.

But we have tables in like, you know, five different pages of our application and it's, it, it's growing as well, so like, yeah. It will eventually be in like a dozen pages of our application. Yeah. It's really nice that we only need to work with tables in one of those files.

Jake Pacheco: Yeah. Yeah. You can commit it to one file and it commits to all of the other pages.

Yeah.

Seth Whiting: Yeah. Yeah. That's, that's cool. That's interesting. Yeah.

Jake Pacheco: So I guess to attach that to what we've been talking about with my application and stuff. So I have like my main calendar that I have that shows like, you know, maybe a dropdown menu or whatever of like my animals. Yep. And I check off like, yeah, all these ones, eight.

Then could I make it so that calendar is adjustable and it will save, like, that'll be like one file that will then be uploaded or moved over or whatever. To all of the other pages. I have their own separate calendars. And because that's updated with it, it would update over here, or would that be a completely different function?

You know what I mean?

Seth Whiting: Yeah. I think I, it sounds like you're talking about, you know, a very similar thing to what I'm talking about,

Jake Pacheco: like Yeah, that's what I'm wondering is, is is that pretty much how that would work usually, do you think? Yeah. Or, yeah. Yeah. Yeah. Huh. Yeah. Interesting. So you could, you could have it, so you could adjust one of your tables, for instance, like make it so it's adjustable on your app, and then like it will update the rest of the tables because it's coming from the same source file kind of a thing.

Seth Whiting: Yeah. Yeah. And like you, you could say like, okay, for, for this particular page, we actually do want borders on all of the rows. Mm-hmm. Not just the top row, like the, what I was talking about earlier. And in order to do that, you could just pass a prop that says like, you could ca, you can call the prop whatever you want, which is, it's just a variable that you're passing to a component.

Yeah. So you could say basically on, on your, what are called parent components. So like on your page, like on page one, you want all of the borders. On page two, you don't. So on page two you would have like your table component and you wouldn't pass it anything. But on page one you would have a table component that says like, you, you could call it like bordered or something like that.

Mm-hmm. And you could just say bordered equals true. Yeah. And then in your table component you could say, Basically like if bordered equals true, include borders on all of the rows, Uhhuh, that's cool. If otherwise, just included on the top row. Yeah, yeah, yeah. That makes sense.

Jake Pacheco: So I mean that, that would then also give the ability for me on this app, like to make it so I'm sure there's a way that it could select whatever animal I did check off or didn't check off or whatever, and just have it apply to only one animal, one animal's calendar or whatever.

Mm-hmm. Yeah. It sounds like that's, yeah, I mean that's, that's how I would kind of use this. I'd, I'd assume, I mean. Mm-hmm. Right. Yeah. Yeah. Huh.

Seth Whiting: Interesting. And yeah, and that's just like very common. Things to do and react like you, you will definitely run into that and you'll run into it like very, very often and mm-hmm.

You'll run into other stuff just as often. Like, I haven't talked too much about, you know, what you can do with React. And also like, th this is like sort of not necessarily just applicable to React, but like, just Yeah. JavaScript frameworks. But, you know, this is, in this podcast we're talking about React, so, yeah.

Yeah. So very quickly, I'm sure like, as you get into actually writing this, this code, you'll mm-hmm. Probably think back and be like, oh, this is, you know, probably what we were talking about. Yeah, yeah, yeah. I, I'm sure that it's not completely. Solid in your mind, but like once you, once you actually start writing the code, it'll, it'll make sense.

And, and yeah. Click like, this is what we were talking about. So, yeah.

Jake Pacheco: Does it change how I write CSS or anything like that?

Seth Whiting: Like yes. Or actually specifically that?

Jake Pacheco: Yeah, I was curious about that. Yeah. If it, if it

Seth Whiting: changes how I write that stuff. Yeah. Good question. So CSS, in React, you, you can write just straight up CSS and mm-hmm.

In your, in your source, does it have, like, in your source folder, does it have any like actual c s s files in there? Yeah. Yep. It

Jake Pacheco: has it, it has two, it has app css, which is yeah. Now that we, now we find out it's our main thing that we're seeing on our page right now. Yeah. And then it has index css, which is another thing with

Seth Whiting: even more code, I guess.

Yeah. That, that probably has like what's called like c s s reset stuff in there. Mm-hmm. Because by default, every, every browser for some reason just like injects some, like, margin around the page and some like, padding and it's like, what? I didn't, I didn't want that messing with my stuff. Yeah. Pretty much every like, JavaScript framework, they will either have it for you or like recommend that you import a C S S reset file, which is just like, mm-hmm.

Start with no padding, start with no margin, start with no extra stuff. And, you know, then things will behave more like what you're writing them to behave like. So, yeah. So yeah. So in your vet project, you're set up to use straight up css, which is good. Mm-hmm. There's stuff that you can do within your JavaScript within your, like J S X I should say, that you write CSS in a more javascripty way.

And what I mean by that is basically it kind of boils down to instead of what's called kebab case, so in in CSS you usually write things in what's called kebab case, where it's lowercase words with dashes in between the words. If, if there are multiple words, yeah. Yeah. In JavaScript, you, it's more common to write in what's called camel case.

Yeah. Which is the first word is lowercase. Every word after that has a capital first letter. Yeah. And so basically you're, you're writing the same words that you would write in css. You're just writing them in, in Camel case, so like, font size. Yeah. And instead of writing like 16 pixels, you can just write 16, like the, the number 16.

And it'll just know, like of course you're talking about pixels. Like that's cool. Yeah.

Jake Pacheco: That's pretty sweet. And, and that kind of I kind of like that anyways. Just cuz. If you start with JavaScript and then you learn css mm-hmm. Or anything else, like you, you're kind of used to writing in Camel case, so then you like go to do it and then you have random Yeah.

You know, you're like, it's not, yeah. Yeah. Yeah. So I kind of like to Ian just write it in Camel case it's kinda

Seth Whiting: nifty. Yeah. So that's, that's what's called CSS N js. Mm-hmm. Which is very, you know, semantic like appropriate. Mm-hmm. Yeah. And with that you can do some pretty cool things where like you could have a variable that, like you could have a button that's like an incremental button where like it just says like incre, you know, add one kind of thing.

Yeah. And every time you click that button, it will update a variable called count or whatever. And. You can then take count and put it into your c s s and make your font size equal to count. So, huh. If you click that button, the font size of that button can get bigger and bigger and bigger and bigger, you know, every time you click it.

Yeah. If you wanted to. Yeah. Like

Jake Pacheco: yeah. For some reason.

Seth Whiting: Yeah, yeah, yeah. So you can, you can, you can do a lot of stuff with that. You can do things where like you can, you can do this in, in CSS anyway, like more easily. Mm-hmm. But if you wanted to, you could say like, if, if the, the row of this table is odd, make it white.

If it's even make it like slightly gray, you know, so that you kind of like split up the rows. I wouldn't, yeah. I wouldn't necessarily recommend doing that with JavaScript because you can do it with CSS and like we talked about in the last. Episode, like if you can do it in css, you probably should do it in css.

Yeah. But, but if

Jake Pacheco: we're doing it, if we're doing it in our CSS file, then we're doing it in css. Right? Like even if it's Camel case or anything like that, or how's

Seth Whiting: that work? Yes. If you're, if you're, so what I'm talking about right now, like the CSS and js, you would actually be writing in your app Jsx file.

Okay. Oh,

or

Jake Pacheco: whatever. Oh, okay. I get what you're saying now. Yeah. You're talking about the app jsx file file. Okay. Yep. Yep. Sorry.

Seth Whiting: Yeah. Or any other for a second. Yeah, yeah, yeah. Well, I mean, that's, that's my bad for, for not being totally clear upfront. So yeah. In your component files you can write css. In like a javascripty way.

If you're in a CSS file, you need to write it CSS way or else it's not gonna, it's not gonna interpret it correctly. Okay.

Jake Pacheco: Alrightyy. But you have the ability to write it in your J S X file if you want, and you just do it in Camel case, and you can shorthand a few more things, but it's gonna take more thinking power from the system and therefore might make your thing a little bit

Seth Whiting: slower.

Yeah. I, which is why you wanna do it. It would definitely be like negligible, like, yeah. You, you wouldn't notice that it's slower. But I think, I think just like, as a general rule of thumb, if you can do it in css, you should. And yeah. Also, that being said, the, the c s s that you write in your j your JavaScript files will be interpreted as c s s when it's all said and done.

Like Yeah. It, it, it will be compiled to c s s. Yeah. Makes sense. So anything that you write in the, the, like, The JavaScript part, like basically the, the thing, the, the thing that I'm like all jumbled up about right now is the whole alternating rose thing. Mm-hmm. You, you can do that in CSS with one line, and in JavaScript you could do it in one line, but it would be a much longer line.

Yep. In CSS you can just say nth of type odd and it will affect all of the odd rows. Yeah. And then you could do even, and it would affect all the, even rows. Yeah. And then JavaScript, you'd have to say like, this is kind of getting in the weeds, but you'd have to say like, I, if the index modular two equals equals, equals zero, that means that it's even, and modular is sort of like dividing, but it gives you the remainder of that division.

So like, it's totally, don't worry about it. Like Yeah, I'm not gonna remember that it's in the weeds and don't Yeah, definitely don't worry about it. But you, you'll rarely run into the case that you made a modular. And you usually, if you are, it's because you're running into something where like, do is, is this thing that I'm working with odd or even, and it would be like, if it's something unrelated to the c s s, you know?

Yeah. Yeah. But anyway so yeah, so,

Jake Pacheco: so basically in summation about what you were talking before is it takes computational power in order to compile. And if you write just a c s s and a JavaScript separately, then it only has to kind of do it once to put it all together. It doesn't have to like decode and then put it all together kind of a thing.

I

Seth Whiting: don't, I don't think that honestly, like I don't think you should com worry about the compile, like Yeah. Nom

Jake Pacheco: just at all. I'm just, I I'm, I'm just, I'm just stating it as a, kind of a backing to what you were saying about like, if you can write it in css. Write it in css. Yeah.

Seth Whiting: Then

Jake Pacheco: I get what you're saying, but the reason for it, you know what

Seth Whiting: I mean?

Like, actually, so in, in most projects that I work on mm-hmm. I feel like I haven't written in an actual CSS file in a long time because I've just been working with CSS and js. Yeah. So like, I like. Working with CSS and JS for like, all of your styling is fine. Yeah. It's, it's not, it's not necessary. I'm not saying like, if you can write it in a CSS file, you should write it in a CSS file.

Yeah. I'm saying instead of doing some JavaScript like mass function

Jake Pacheco: to make something happen.

Seth Whiting: Yeah, yeah. To make something happen. Okay. When you can do it in CSS more easily, you know, and yeah, I would do it in the css, whether it's the CSS file or the CSS and js.

Jake Pacheco: Okay. Matter. I get what you're saying. So I thought you were saying like, don't

Seth Whiting: like time, don't write CSS and js.

Jake Pacheco: That's what I, that's what I thought you were saying. Right. So I get what you're saying. That makes sense. Okay. Okay. So you're saying, yeah, it's fine to write CSS and JS does the same thing basically, but it's, it's more the don't. Use a JavaScript function when you could easily use a CSS function Yes.

Seth Whiting: Or whatever, however you wanna say that. Like, don't, don't solve a problem with JavaScript when you could easily solve it with css. Exactly. Yeah. Okay.

Jake Pacheco: Hey, yep. Yeah, that makes sense now. Okay, cool. Because I was like, man, I got all excited about writing in Camel Case and stuff and css, and now he just took it away from me.

Yeah. No, no, no. I get what you're saying now. Okay,

Seth Whiting: cool. Sweet. Yeah, and I think that, so I, I think it might be the case that c s s and JS is a bit more limited than like writing straight up css. Like you might not necessarily have access to all of the stuff that you can do in css. Yeah. In particular, like more, more of like the, some of the more like recent additions to c s s.

I think might not necessarily be available in CSS and js, but like 99% of the stuff that you ever need CSS for, you could write in CSS and js. And, and honestly, like I said, like I haven't written like actual like CSS in a CSS file in a while just because I haven't needed to. I've, I can just use CSS and js.

Hmm.

Jake Pacheco: So essentially then with React, you can write your css, html, and JavaScript all in the same file and Yeah. Yeah. You're just writing your stuff at that point. Yeah. That's

Seth Whiting: Huh. Yeah.

Jake Pacheco: That's wild. I, I, I, I hadn't realized that that's like all that a framework could do, or a part of what a framework could do is like, I guess you had just.

Write it all at once. Yeah. That's pretty sweet. Yeah, I currently, I'm definitely feeling like I, I just need to learn more. I, I like about like, I mean C C S S and HT m l i I, I, I do not know a lot with it, but I, I, I kind of have a firmer grasp on those than I do JavaScript, which I think is natural cuz JavaScript's just such a massive thing.

Mm-hmm. But it's just kind of re reaffirming my suspicion of like, oh, Jake, you need to like, continue to learn a lot about JavaScript just in, I mean, even when we're talking, like, you know, a lot of times when you're talking, explaining something to me, I'm like, how is this applicable to what I'm doing?

Mm-hmm. And like, trying to like sort that out. Yeah. I mean, in the last podcast about that whole like, Getting things from chat G p T and then like have data logging it and all that stuff. And then just now with what you were talking about before, it's

Seth Whiting: like

Jake Pacheco: there's just so much I don't know yet. Yeah.

You know, and it's like, like I look at a JavaScript file right now, or that J s X file and I'm like, oh man, there's a lot. Yeah. And like I said, like you don't know where to start and it's like, I, I just want the knowledge of where the heck to start. Mm-hmm. And I'm trying to, I'm trying to figure out if the best way to do that is to just keep studying aimlessly or just start like kind of asking chat G B T and asking you mm-hmm.

Questions about like, Hey, how, how do I like. Start creating this calendar or something? Yeah. Or how do I like, wait, just cuz just finding a starting point is, is a, a tricky one. Kind

Seth Whiting: of, you know. Yeah. Honestly, I think I would say just go back to Code Academy and do like the Intro to React thing. Yeah.

Yeah. And like as you're going, go back to your V project and be like, okay, how can I take what I just learned and kind of like sprint it in here. Yeah, yeah. Yeah.

Jake Pacheco: That makes sense. Yeah. Yeah, I'll definitely do that. I also just downloaded AI, a book. One of our clients he is a backend engineer.

Mm-hmm. And he is mostly working with like Python and stuff. Mm-hmm. So I'm not sure much of the book that he Like referred me to yeah, like, will have to do with this stuff, but it's called I think it's called like clean code. Yeah, I've heard of

Seth Whiting: that.

Jake Pacheco: Yeah. And he said it was really good.

Yeah. Yeah. He said it was really good. And, and basically I downloaded the the audiobook version of it, and I have the P D F also, so. Okay. I'm gonna I, I think that it's mainly what, like a algorithms and just writing like code in an organized and clean fashion so you're not just muddied up with too many things going on.

Is that mm-hmm. Kind of what that's about? Do you know? I,

Seth Whiting: yeah. I feel like I s I, I have the book. Mm-hmm. And I feel like I started reading it. And I, I, it, it was like years ago, so I don't super remember. Yeah. But I, I can also tell you like, you don't need to read that book, like no order is that just like back backend stuff.

Anyways, I think it's, it's, I feel like it's more like when you have, when you have written an actual code base Yeah. Then you can go back and read that book and be like, could I have written this better kind of thing. Yeah, yeah, yeah. You know? Yeah. That's kind

Jake Pacheco: of, I, I listened to like the, the intro on the way home and I was like, yeah, this is deeper than I am at right now.

By far. Yeah. Like this is, it's definitely, it's about writing clean code, not just writing code.

Seth Whiting: I, right. Yeah. I It's, it's not necessarily like a beginner's. Yeah. Yeah. It seemed that way. It's not like this is how you write code. It's like this is mm-hmm. How you like craft code, you know, if you already know how to write code, this is how to like craft

Jake Pacheco: when.

When they started talking about smells, I was like, yeah, okay. No. I'm like, this is like, I don't even know what the heck. So yeah, yeah. But downloaded that, so have that, but fortunately it was free. So, Hey, who hoopla?

Seth Whiting: Who? Mustang, but

Jake Pacheco: who? Mustang.

Seth Whiting: Shout out to

Jake Pacheco: who? Bean z. Zach Galvan. Yeah. Is

Seth Whiting: that joke?

Perry Green? Yeah. Perry Green's acting course. Yeah. That's

Jake Pacheco: hilarious. If you don't know what we're talking about, then you No, you should, you should be here. But yeah, so I'm definitely gonna go to code code Academy. I always wanna say Code Academy, which seems right but is wrong. But I'm gonna go to that and do some react stuff.

And I, I might actually switch back also a little bit to the Angela use thing cuz it has a whole chapter on React stuff, so that might be a little bit helpful too.

Seth Whiting: Yeah, you could just, just skip ahead to that if you wanted to. Probably,

Jake Pacheco: yeah, that's, and they said that in the program or whatever.

They're like, yeah, just skip to what you wanna know or whatever. Mm-hmm. So I think that might be a good idea too. But yeah, lately it's, it's, it's definitely been you know, base amount Everest, you know, it's like, yeah. Oh man. And, and the closer you get to it, the bigger it

Seth Whiting: gets, you know what I mean?

Yeah. I mean definitely like setting up like a beat project when you haven't like written a react component ever before. It's probably like, holy crap, like, what did I get into? Yeah. But like, really it's like a bunch of files that you will never use and then like one folder that you. We'll use. Yes. Okay.

Yeah. Well that,

Jake Pacheco: that, that helps out though. Like that, that makes me feel a little bit better about it. Yeah. Just cuz it seems so much right

Seth Whiting: now, you know? Yeah, like you, you might update like your package do js o n mm-hmm. And then just your source folder, that's pretty much like what your, your day-to-day is gonna be.

Yeah. Yeah. Sweet.

Jake Pacheco: So yeah, I mean that's where we're at right now and my, like we said, I'm just gonna keep learning via Yeah, just keep swimming buddy. I love that movie anyways, but, yeah, just gonna keep swimming and and keep trying to coat as much as I can right now. You know this. Yeah.

Sun's finally out. So

Seth Whiting: Definitely. Just like when you, when you do like the Intro to React thing on Code Academy, I think, I think things will start to like, kind of like fall into place a bit more conceptually and Cool. Like, you know, you're trying to write a React project and you've never written anything in reactive work.

Yeah. And like, you don't dunno, you know where to start. That's like a good place to start. So SW

Jake Pacheco: swinging for the fences over here, so Yeah. Yeah. Try,

Seth Whiting: try my best. Yeah. So like, if they, like, by the end of it, I'm sure they'll tell you like how to like import, like export a component and import it into another component.

Yeah. And then like loop, loop over, you know, H T M L and you know, have that like Yeah. Show up in your, on your page. Like those, those are like the things that you will do the most. And I'm sure that they'll probably have you do like state stateful variables, like mm-hmm. Things that can change, like based on like interaction of the user.

Yep. Yeah, it like once you, once you go through that course, I'm sure you'll be at a place where you can, like you, you'll probably be like, okay, here's how I go about laying out, you know, this page that I'm Yeah. Thinking of in my head, you know? Yeah. Yeah. Sweet.

Jake Pacheco: Well, I'm excited to get started with it.

Cool, cool. It's yeah, like, I, like I always say, it's always, I always get so excited at the end of these podcasts. I'm like, yeah, I just want cold all night. But I have work in the morning, but I, but yeah. So. As always. Thank you very much, Seth. And

Seth Whiting: yeah, of course. And thank you for,

Jake Pacheco: For listening. E everyone or anyone who is listening and we, yeah.

Hope to hear from anyone if they have any questions or anything. Yeah. Or just wanna check in or want to, if, if you have any questions that we can talk about on the podcast too, that's always great. Though,

Seth Whiting: yeah. I think this is good. Yeah. Hopefully if, if people are like following along with you and doing the same stuff like this, this is, I I feel like this is kind of getting pretty, like pretty interesting.

Like stuff is actually happening, you know? Yeah. Yeah. We're, it's good. We're getting somewhere. It's not, this is an exciting moment, definitely. In your journey. Definitely. Awesome.

Jake Pacheco: Yeah. Well thanks again, Seth, as always. I appreciate it. Yeah. Thanks listeners. I hope you have a great week.