This course has been updated! We now recommend you take the Complete Intro to React, v8 course.
Transcript from the "App Function & Editor Ligatures" Lesson
[00:00:00]
>> Brian Holt: So now that we have react, react dom being loaded, we have our style coming in, let's go ahead, and actually, write some react code. What does React do for us? What is the fundamental paradigm of React? The fundamental paradigm of React is that you make components, right?
[00:00:17] And you use those components to make other components. Which then you use to make other components, which then you use to make applications. It's just smaller components that get built up to bigger and bigger components, until your biggest component is your entire application. So you're writing this code, that kind of, it mimics the markup that you want to show up on the page, and then, as you kind of modify the state over time, react changes the bare minimum amount of the browser dom to actually achieve your application.
[00:00:45] So it ends up being really performant, because it's minimizing how much updating your doing to the dom. So what I wanna do right now, is I wanna make you a first component for React, okay? So we're gonna make one called App.
>> Brian Holt: Okay, I'll scroll that up so you can see that.
[00:01:04] So const App equals, and we're gonna make this an arrow function.
>> Brian Holt: This is something that probably bears mentioning, you see this little arrow thing right here? This is called a font ligature, this is actually an equal science and angle bracket next to each other, so if I put a space between them, you can see it.
[00:01:28] But if I put them together, my font combines them into one thing, so it's a little bit easier to read.
>> Brian Holt: So that's another cool thing that VS Code can do for you, I know Sublime now does it, as well. The font is called Dank Mono, it's dank.sh, I think.
[00:01:49] This one is 50 bucks, but it is worth it, I would say. If you want that one that is free that does the same thing, there's one called Fira Code, which is one that I used for a long time, looks like that. So you install that, and then, with VSCode, you have to enable font ligatures.
[00:02:12] The reason why I'm showing you this, is because, inevitably, afterwards I always get asked this question, what's your font, what's your theme? It's Monaci is the theme, and font family, Dank Mono, and here, you have to enable font ligatures right there.
>> Brian Holt: All right, so in case you're wondering, that's what the arrow sign actually is, it's equals, and the angle bracket next to each other, one that you'll also see in here is double equals.
[00:02:42] It just makes a really long equal sign, and if I put three, it makes one with three lines. If you see one of those in the future, I'll try and call them out as I do it. I like it, cuz it just kinda combines the things in my mind, I don't have to think about three equals signs.
[00:02:55] I just see one icon. And it's pretty. I think, that's really key part of here, is that I find it very pretty. Okay, enough of pretty things [LAUGH]. So we've made an error function here, this is the same as just writing. It's really similar to writing something like this, function like that.
[00:03:16] But an error function is just a little bit shorter. It's right, this just a new way of writing JavaScript.