React Components and Properties

React is basically a JavaScript library which breaks down a very complex UI (user interface) into a component tree. React combines small amounts of HTML, CSS and JavaScript into a single component, so that each of these components has its own styling and functionality and they can be reused as and when required.

React components are just like JavaScript functions which takes an input called as props or properties and return a react element which basically tells what should appear on the screen.

Let’s see an example.

This is a very simple react component, very similar to JavaScript function and it returns a heading.

Now, we can use this custom component in our react code as if it was an HTML element. Do note, it is a convention to name the components in Pascal case. This convention helps the react compiler to differentiate between the react components and the HTML elements that exists in the DOM (Document Object Model).

So what happens behind the scenes is when it encounters this Heading component, it triggers the Heading function and shows the h1 element as an output.

These functions also accept inputs which are known as props or properties.

If we take these react components almost as a HTML element, then the properties can be taken as the attributes.

These props are arguments which are passed to react components and these components receive them as an object.

Let’s see an example.

Here, we’ve passed the props object with a property name.

This code will render Hello Romi on the webpage. When this component is created it will have a property called name which is equal to Romi. Like this we can create more properties to this object, give them different values and pass this object to the component.

These components are known as function components.

Let’s see this with one more example. Suppose we want to create a student ID card. It will have properties like name, roll number, department and an image.

So we can create a component called Student having properties as mentioned above.

Now, we will use this in our react code.

This will create the Student ID card and we can create as many cards as required with different properties.

This was all about the basics of react components and properties.

Hope it helps.

References:

https://www.udemy.com/course/the-complete-web-development-bootcamp/