What Is Component And Props In React

What is a component in Reat?

The component is a building block of React and It's nothing but a javascript function and should follow camel casing.

In React, a component is a piece of reusable UI code that can be rendered to the screen. It typically represents a small, self-contained part of a user interface and can accept data as input (props) and manage its own state. Components can be combined to build more complex UI, and they can also be nested inside other components. Components can be written as functions or classes and are responsible for rendering a portion of the UI based on the data passed to them. They are an essential part of React and help make it easy to create and manage complex user interfaces.

import React from 'react';
import ReactDOM from 'react-dom/client';
function Home() {
    return <h2>Hi, I am a Home Component!</h2>;
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Home/>);

What is Props in React?

In React, props (short for properties) are inputs to a component. They are a way to pass data from a parent component to its children. A component can receive props as arguments and use them to render dynamic content. Props are passed to a component as an object and are read-only, meaning that the component cannot modify its props.

import React from 'react';
function Greet(props) {
    return <h1>Hello, {props.name}</h1>;
}
export default Greet;

Here, props.name is a prop that is passed to the Greet component. It can be used to render dynamic content based on the value of the name prop. When this component is used in another component, it might look like this,

import React from 'react';
import Greet from './Greet';
function App() {
  return <Greet name="John" />;
}
export default App;

In this example, the App component passes the name prop with the value "John" to the Greet component, which then renders the following HTML:

<h1>Hello, John</h1>

Thanks for reading my article I hope it speaks about the basics of component and props. Thanks