Overview of React Components

A free video tutorial from Stephen Grider
Engineering Architect
Rating: 4.7 out of 5Instructor rating
31 courses
1,126,154 students
Overview of React Components

Learn more from the full course

The Complete React Native + Hooks Course

Understand React Native with Hooks, Context, and React Navigation.

38:07:49 of on-demand video • Updated September 2022

Create real-world native apps using React Native
Make truly reusable components that look great
Understand the terminology and concepts of Redux
Prototype and deploy your own applications to the Apple and Google Play Stores
Get up to speed with React design principles and methodologies
Discover mobile design patterns used by experienced engineers
English [Auto]
In this video, we're going to get a little bit more familiar with the React library itself. To get started, I'm going to find my Z directory inside my code editor. Inside there is the screens directory. Inside the screen directory, I'm going to make a new file called Components Screen JS. You'll notice that at the very top of my code editor right here, I have some breadcrumbs. You can use this little list right here to always tell what file I'm working on inside of our project directory. So inside of this component screen JS file, we're going to create something called a React component. The goal of a React component is to show some amount of content to the user. We place these different react components that we create inside of different files inside of our project directory. In general, every different component file we create is going to have the same for different parts. We're going to write out these same four different parts a incredible number of times throughout this course. So you're going to memorize these four different parts very quickly. In part one, we're always going to write out a little bit of code to import some libraries that we need to actually create a component. In part two, we're going to create the component itself, a component for right now, we're going to use this definition. A component is a function that returns something called Gsx. Gsx is some special syntax that looks kind of like HTML. We'll expand on exactly what Gsx is later on, but right now just understand that it is this gsx stuff that really tells React Native what we want to show on the screen of our mobile device. In part three, we're going to create something called a stylesheet. This stylesheet works in a similar fashion to how a stylesheet or CSS works inside the browser. It is used to add some styling or layout to the component that we created during part two. And then finally in part four, we're going to export the component that we created during part two so we can use it somewhere else inside of our project. So let's try to create our own component inside this file that we just created a second ago. So we're going to write out some code inside of here. You're going to get very familiar with this code very quickly, because we're going to write out write it all out a incredible number of times. All right. So inside of here, I'm going to first import two libraries that we need to create a component. So I'm going to import React from React. And then I'll import text. And stylesheet from React Native like. So now there's three things I want to mention very quickly about these two lines of code. First off, you'll notice that as soon as I write these two lines, they kind of fade out from view. That's just because I've not actually referenced the variables that I just imported. If I actually hover over these lines, it'll say that I declared this variable, but I never actually used it inside this file, and that's why it fades out. If I make use of that variable, it's then going to light up right away. So if you ever see a line of code inside of my editor, that is kind of faded. That just means that we have not made use of it yet. Next up, you'll notice that we've imported something from a library called React and something from a library called React Native. These really are two separate and very different libraries. The React library is all about how different components work together. So usually when we create an application, we're going to assemble many different components to actually build our app. The React library has a ton of code inside of it that knows how to make different components work together. The React Native Library, on the other hand, knows how to take some information from those components and use it to actually show some content on the mobile device. So each library has its own separate job. The other thing or last thing third thing that you'll notice about these two lines is that on the first line, we added in no curly braces, but on the second one, we did add in some curly braces. So the difference here is that on the first line, we are importing the entire React library into this file. On the second line, we are importing two very small pieces of the React Native Library. So these curly braces means that we want to import just one or more very small parts out of a given library. And like I said, in this case, we want to import two different things one thing called text and another one called stylesheet. In general throughout this course, I'm going to tell you exactly when we need to use curly braces and when we don't. And over time, you'll come to learn these rules on your own. Okay. So that's part one. We've now imported some libraries that we're going to use to create a component. So now in step two or part two, we're going to actually create our component, and that is a function that's going to return some amount of X. So right here I'm going to create a new function using the const keyword, I'll call it components screen. So that's the name of my component. And then going to assign it a function like so. Throughout this course. For all of our different components, I'm going to generally be using arrow functions, but you could just as well use a keyword function instead. There's no effective difference for most of the work that we're going to be doing between using a keyword function or an arrow function. I just like to use arrow functions because they stylistically look a little bit nicer to me. So then inside of here, as we just mentioned, our function is going to return some amount of gsx. And as a reminder, gsx looks a lot like HTML and it tells React Native what we want to show on the screen of our device. So in this case, I'm going to return. A text element like so. So this HTML looking stuff is gsx. This tells React native that we want to show some amount of text to the user. The text that we want to show will be placed in between those two tags. So maybe right now I'll print out something like this is the components screen like so. And then I'll add on a semicolon to the very end of the line. The semicolon is not strictly required, but in general I add in semicolons everywhere that you're supposed to add them in, even though for React it doesn't technically make a difference. We could leave that off and leave off the semicolon at the end of the function as well. Okay. So we've now created our first component right here. Now the part three that we're going to go through, we're going to create something called a stylesheet. Remember, a stylesheet is just like a stylesheet inside the browser. It is used to apply some amount of styling to our component that we just created. So in our case, we're going to create a stylesheet and we're going to try to create a new style that's going to change the font size of that text element. So to do so, I'll write out const styles equals stylesheet create and I'll pass in an object like so. Inside this object, we're going to eventually define a bunch of different groups of styles. For the first one that we're going to create right here, I'm going to create a new style property called Text Style. Like so. So you can think of this as creating a grouping of different styling rules that we're going to apply to a name called Text Style. Now, just because I call this textile doesn't mean that it's going to automatically be applied to that text element. Instead, there's a very manual process we have to go through where we're going to use these different styles we create to apply them to different elements that we create inside of our component. We'll go into great detail in that later on, but right now, let's just add in a little bit of code. Inside of this textile object, I'm going to assign a font size property of 30 like so. After that, we're then going to take the style that is generated by the stylesheet, create function and assigned to the Styles object, and we're going to apply it to that text element. So this is the very manual step that I just mentioned. So right here inside that text element, I'll say style, then it equals, then some curly braces and I'll say styles dot text style like so. Okay. So that's a very manual step that we have to go through. Any time we want to wire up some styling, we'll talk more about exactly what the relationship is between that code right there and the object we create down there. But right now, let's just finish up our component file. So now for part four, we're going to export the component we just created so we can use it somewhere else inside of our project. So to do so at the very bottom of the file, I will write out export default and then the name of our component that we created right here. So export default components screen like so. And that's pretty much it. So we've now created our first component file. Now we flip back over to our device. You'll notice that nothing on the screen over here has changed. So just because we created a component file doesn't mean that anything about our project is going to change right away. Instead, we have to make sure that we tell React Native that we want to show this component on the screen somehow. So let's take a quick pause right here and we'll tackle that in the next video.