Overview of React Components

A free video tutorial from Stephen Grider
Engineering Architect
Rating: 4.7 out of 5Instructor rating
36 courses
1,372,564 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:06:05 of on-demand video • Updated February 2024

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 [CC]
Instructor: In this video, we're going to get a little bit more familiar with the React library itself. To get started, I'm gonna find my SRC directory inside my code editor. Inside there is the screens directory. Inside the screens directory, I'm gonna make a new file called ComponentsScreen.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 ComponentsScreen.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 gonna have the same four 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 gonna write out a little bit of code to import some libraries that we need to actually create a component. In part two, we're gonna create the component itself. A component for right now we're gonna use this definition. A component is a function that returns something called JSX. JSX is some special syntax that looks kind of like HTML. We'll expand on exactly what JSX is later on, but for right now just understand that it is this JSX 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 style sheet. This style sheet works in a similar fashion to how a style sheet or CSS works inside the browser. It is used to add some styling or a 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 gonna write out some code inside of here. You're going to get very familiar with this code very quickly 'cause we're gonna write it all out a incredible number of times. All right, so inside of here I'm gonna 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 wanna 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 gonna 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 JSX. So right here, I'm gonna create a new function using the const keyword. I'll call it ComponentsScreen. So that's the name of my component. I'm 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 JSX, and as a reminder, JSX 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 JSX. 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 for 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 gonna go through, we're gonna create something called a style sheet. Remember, a style sheet is just like a style sheet 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 style sheet and we're going to try to create a new style that is going to change the font size of that text element. So to do so, I'll write out const styles = 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 gonna create right here, I'm gonna create a new style property called textStyle 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 textStyle. Now just because I call this textStyle 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 for right now, let's just add in a little bit of code. Inside of this textStyle object, I'm going to assign a fontSize property of 30 like so. After that, we're then going to take the style that is generated by the StyleSheet.create function and assign to the style's 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.textStyle like so. Okay, so that's a very manual step that we have to go through anytime 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 created down there, but for 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 that 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 ComponentsScreen like so. And that's pretty much it. So we've now created our first component file. Now if 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.