React: Introduction to Components and Props. A React component is a JavaScript function that uses HTML markup syntax through JSX. They are one of the core concepts of React to create reusable UI elements. For this setup on the left side of the screen, I am running the Cloud Academy Lab environment. On the right side of the screen, I have the corresponding React development server. For this demonstration, I'm going to create a button component, and to begin, I need to start by creating a component file. Inside of the components folder, I will create a file. This file will be named Button.jsx. Before going forward, I like to point out a couple of items. First, for this component, I used the JSX file extension. This isn't required. 

You can use JS as the file extension. Even though not mandatory, using the JSX extension instead of the JS extension helps avoid confusion between utility files and components. Second, React components are functions. To work as a component, they must be capitalized in name and the naming convention for their corresponding files is also capitalized. Now in this file, I will create the component: function Button ( ) { }  and inside of the {return}. I'm using Tailwind CSS for this demonstration, so I will paste in a premade button. Now down below, in order to be able to use this component, I need to export it: export default Button. Now, going to the app JSX file, which is the main point of entry for this React application, I'm going to import the button. 

After the CSS import line, I will type import Button from the relative path of the button component. Now that I've imported the button component, I can use it. So, after the H1 element, I will insert the button. I will begin by creating an < Button / >. And while this has the appearance of HTML markup, it is in fact JSX and on the right half of the screen, there is a button below Cloud Academy Labs. Now, one of the main purposes of a React component is to be reusable. So, what if I wanted to add a second button? I can just copy and paste the button below the existing one. Now on the right side, there are two buttons on the screen. While successful, this does present a problem. The text is the same on both buttons. How do I make the text unique for each button?

For this, I need to use props. React components use props to communicate. This is a special object that allows you to pass through data downward from a parent component, in this case, the App component to a child component, in this case, the Button component. Props are written like HTML attributes. I will create a new prop called text. For the  1st button, < Button text = "Home" / >. For the 2nd component, < Button text = "About" /  > and other data types can be used instead of strings, such as arrays and objects. Now that I've created the props for the Button component, I need to change the Button component in order to access the props. The passing of props is automatic. In order to access it, I need to add it as an argument to the Button component. Going back to the Button component, function Button (props). And now I have access to the special props object that React uses to pass down read-only data. 

In order to access it, I need to use a JSX expression. I will replace the word Button with { } and inside of the {props.text}. Now on the right side of the screen, each button has its own unique text and this is a common use case for props. Now, there is a special prop that I'm going to introduce known as children. Children can be data or components that is nested in between another JSX element. For demonstration purposes, I'm going to add a empty paragraph inside of the button component. Now, there's an error and this error is intentional because I want to demonstrate this. Adjacent JSX elements must be wrapped in an enclosing tag. React only understands how to return one element. So, when this was a button by itself, that was okay. Once I added the paragraph, this created the issue. So, in order to resolve this issue, I need to wrap these two elements into a div or a reactive fragment. 

And I will go ahead and do that, and now the error is gone. So, I will return back to the app file. I will change each button component from a self-closing element to an element with an opening and closing tag. Earlier, I stated that children is either data or a component nested inside of a JSX element. The reason why I converted the button component from self-closing to an opening closing element is because children have to be between the opening and closing tag. In between the opening and closing Home button, I will add the text visit our homepage. And for the About button, I will add the text learn who we are. Now, each text is accessible from the children property of the props object. Going back to the Button component, inside of the paragraph element, I will add a JSX expression {props.children}. Now to the right, underneath each button is a paragraph with the corresponding text. And that's it. Thanks for watching at Cloud Academy.