Components and Props

In React, components are the building blocks of a UI. They are independent and reusable pieces of code that can be composed together to create complex user interfaces.

A component can be either a functional component or a class component. Functional components are simple functions that accept props as arguments and return the JSX (JavaScript XML) code for rendering. Class components are ES6 classes that extend the React.Component class and have a render method that returns the JSX code.

Props are used to pass data from a parent component to a child component. They are essentially function arguments for components. Props are read-only and should not be modified within the component. To use props, they are passed as attributes to the component when it is used.

Here's an example of a functional component called Greeting that accepts a name prop and displays a greeting message:

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

To use the Greeting component, you can pass the name prop with a value when it is used, like this:

1const App = () => {
2  return <Greeting name="John" />;
3};

In this example, the App component is using the Greeting component and passing the name prop with the value "John".

1console.log("Understanding components and passing data through props");

xxxxxxxxxx

// In React, components are the building blocks of a UI

​

// Here's an example of a functional component

function Greeting(props) {

  return <h1>Hello, {props.name}!</h1>;

}

​

// Here's how you can use the component

const App = () => {

  return <Greeting name="John" />;

};