A Quick Guide to Components

Before going into greater detail i’ll give you a very basic definition of a component. A component is just a javascript function which accepts our data through props and returns a React element. This comes in handy because it allows for code to be easily reused. Components are easy to read and therefore easier to debug. Since only one prop is being passed it is easy to follow along. There are three easy rules to remember when it comes to components.

1. A component must return JSX.

2. A component takes in one argument called “props”, which is an object.

“Props which stands for properties, are like function arguments, and you send them into the component as attributes.” https://www.w3schools.com/react/react_props.asp

3. A component must start with a capital letter.

A Component Example

In the below example we have a basic function. With the code provided we have already satisfied the first rule that a component must return JSX. In the below example we can see that our Card function will return JSX. The JSX being the two <div> and the code between the two divs which are the two headers the <h1> and the <h2>.

In order to satisfy rule number 2 we can only call in one argument and name it prop. As we can see below we have changed the Card function from having two arguments to now only having one! Now in order to have that new function work we must also assign keys to our Card element below. By wrapping it in curly braces and assigning the greeting and sub-header keys we are now changing it from 2 arguments to 1 object. “Hello from JSX!” and “Time to learn” are now the values assigned to the keys. Same goes for the line right below. The third step is to assign props.greeting and props.subheader to our <h1> and <h2> respectively. If we were to console.log this function we would see that it will return our greeting and sub-headers.

Last but not least we can now also change up our syntax to JSX. Notice how below Card is no longer wrapped in curly brackets but rather in a greater than sign and then closed off as well. This resembles our HTML syntax. The third rule has now also been satisfied since we have used the word card with a capitalized C inside the greater than sign.

Helpful sources

If you are still having a hard time understanding thats alright. Below will be six sources that you can use to fully grasp this concept. If you feel you understand components you can move on to an in more depth explanation written by a fellow classmate of mine: https://medium.com/@sanohoang/react-to-learning-79b4ed53ed69

1. https://programmingwithmosh.com/react/react-functional-components/
2. https://www.w3schools.com/react/react_components.asp#:~:text=Components%20are%20independent%20and%20reusable,will%20concentrate%20on%20Function%20components.
3. https://react.dev/learn/your-first-component
4. https://learning.flatironschool.com/courses/6273/modules/items/544430
5. https://learning.flatironschool.com/courses/6273/pages/video-components-and-props?module_item_id=544432
6. https://legacy.reactjs.org/docs/components-and-props.html