Overview of React Components

Stephen Grider
A free video tutorial from Stephen Grider
Engineering Architect
4.7 instructor rating • 30 courses • 878,529 students

Learn more from the full course

The Complete React Native + Hooks Course

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

38:07:52 of on-demand video • Updated September 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 Ezat subdirectory inside my code editor. Inside there is the screens directory. Inside the screens directory. I'm going to make a new file called Component's Screen Jase's. 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, not just file, we're going to create something called a react component. The goal of a component is to show some amount of content to the user. We place these different 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 two, we're going to create the component itself, a component. Right now, we're going to use this definition. A component is a function that returns. Something called JSM is some special syntax that looks kind of like HTML will expand on exactly what is later on. But right now, just understand that it is this just stuff that really tells Riak 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 CSFs 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 to libraries that we need to create a component. So I'm going to import react from react. And I'll import text. And stylesheet from Riak 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 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 library has a ton of code inside of it that knows how to make different components work together. The Riak 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 Riak 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, in time, you'll come to learn these rules on your own. OK, 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. 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 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 keyword function or an arrow function. I just like to use Erra 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 joy and as a reminder, sex looks a lot like HTML and it tells Riak 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 looking stuff is just this tells Riak 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 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 have 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. OK, so we've now created our first component right here. Now, the part three that were 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 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 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. 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 that 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 will 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 equals then some curly braces and I'll say styles that text style like so. OK, 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 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 Riak 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.