Thread by @tejinder_id

⚡️ Day 80 ⚡️

⚡️ Let us discuss Components and Props in React.

⚡️ We will discuss each with examples.

A thread 🧵

#100DaysOfCode

{1/7}

What is a Component?

--> components are like JavaScript functions.

--> As function accepts parameters in JavaScript in the same way Component accepts props(properties) in React.

--> Components Return React elements describing what should appear on the screen.

{2/7}
--> Let us take an example.

function Greeting(props) {
return <h1>Hello, {props.name}</h1>;
}
--> If you compare it with the JavaScript function then it is same.

--> In the above example, the Component is returning the JSX expression (markup + JS).

{3/7}
--> We can define Components in two ways in React.

1. Function Components.
2. Class Components.

--> We saw the example of function component i.e

function Greeting(props) {
return <h1>Hello, {props.name}</h1>;
}

{4/7}
--> Now we will discuss how to define components using class.

e.g (see the snippet)

--> If you compare function and class-based components they both are doing exactly the same work.

{5/7}

What are the Props?

“props”(which stands for properties), like in function we pass the parameters in the same way in React we pass the props.

-> e.g

const element = <Greeting name="Tejinder"/>;

This is nothing but a JSX expression in which the Greeting is a component.

{6/7}
--> name is an attribute and "Tejinder" is the value of the attribute.

--> when React see this expression then it passes the props as an object.

--> For e.g -

props = {name: "Tejinder"}

{7/7}
--> Let us take an to see components , props and rendering.

See the snippet.

If you like this make sure to:

Follow me @tejinder_id for web development-related tweets.

Thank you so much for staying to the end of this thread.