🔧 Learning React: Function Components, JSX & Props

Before you start reading just know that we're learning how function Components use JSX and props and not how JSX and Prop fully work. I'll talk more about what they do in later blogs when we know more about components but for now this is just for how their used in function components.

Function Components

Function components are components that return JSX and can turn it into a individual React Elements. Their used to render HTML into our website whenever needed. To add the running code (the code that'll be rendered) you'll need to use return followed by seperate parentheses. In the parentheses you'll put the markup code, and to call the function you'll use JSX markup < />.

const Welcome = () => {
return (<h1>Welcome two react part two!</h1>);
}
//Calling the function with JSX markup
root.render(<Welcome />);

JSX & Props

JSX is a Javascript syntax extension used to create or call a variable in between brackets to output its value, like the {age} in the example below. Their also mainly used for calling function components with the JSX markup < />. We can also make attributes for our components that change our variables value, we do this by using Props.

Props, short for properties, are used to access variables using JSX attributes. To use them in a function there should be a props parameter, next you make a variable that has the value of props. followed by the name of it. You can add props from different variables as well, but we mostly just make our own prop for our variable. Next we set the true value of the prop by making as JSX attribute of the variable (or prop) name.

For example, we made a variable called age that contained a prop about age. We called the prop into the return value using JSX syntax and then we set the value using a JSX attribute.

const Birthday = (props) => {
var age = props.age;
return (<h1>Congrats, you're now {age} years old!</h1>);
}
//Set the age's value with a JSX attribute and props
root.render(<Birthday age="19" />);
//It'll render the age JSX as 19 years old!

I'll talk more about props in my blog about class components. If you have any questions please comment them. Have a great day/night 👋.