Overview of React Components

Stephen Grider
A free video tutorial from Stephen Grider
Engineering Architect
4.7 instructor rating • 29 courses • 779,193 students

Learn more from the full course

The Complete React Native + Hooks Course [2020 Edition]

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

38:07:53 of on-demand video • Updated April 2021

  • 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 S.R. C directory inside my code editor. Inside there is the screen's directory inside the screen directory. I'm gonna make a new file called components screen dot J.S. you'll notice that at the very top. 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 not J.S. 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 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 going to write out a little bit of code to import some libraries that we need to actually create a component in Part 2. 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 J.S. X J.S. x is some special syntax that looks kind of like h team l will expand on exactly what J ASX is later on there for right now just understand that it is this j a sex stuff that really tells React Native what we want to show on the screen of our mobile device in Part 3 we're going to create something called a style sheet this style sheet works in a similar fashion to how a style sheet or CSX works inside the browser it is used to add some styling or layout to a component that we created during part 2 and then finally in Part 4 we're going to export the component that we created during part 2 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 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 to libraries that we need to create a component. So I'm going to import react from react and I'll import text and style sheet 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 reference 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 has 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 style sheet in general throughout this course I'm going to tell you exactly when we need to use curly braces and when we don't in no 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 J.S. X so right here I'm going to create a new function using the const keyword I'll call it components screen. 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 aero 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 curious 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 J.S. X and as a reminder J S x looks a lot like each team l. 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 each team also looking stuff is J.S. X. This tells react native that we want to show some amount of text to the user the text that we want to show we 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 3 they're going to go through we're going to 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's going to change the font size of that text element so to do so I'll write out const styles equals style sheet dot 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 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 for 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 style she does 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 not 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 it's now four 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 exports 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 put 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.