Introduction:

Welcome to my beginner-friendly guide to React components and props! In this blog, we'll explore the fundamental concepts behind React and how components and props work. Whether you're new to web development or looking to enhance your understanding of React, this article is here to help you get started. So, let's dive in!

1. React Components:

• React components are independent and reusable building blocks of a web application's user interface.

• A component is just a Javascript function that returns some sort of UI or some JSX.

• The code becomes more modular and straightforward to maintain because it contains certain functionality and structure.

• Components can be as simple as a button or as complex as an entire page.

• You can efficiently maintain and update different areas of your application by disassembling the user interface into smaller components.

1. Creating a React Component:

There are two types of components.

• Function-based components

• Class-based components.

Note: Component's name must start with uppercase letter.

Function-based components:

In function, it's simpler; we just need to return the HTML, like this:

const User= () => {
  return 
    <div>
       <h1>Sandip</h1>
    </div>
};

Class-based components:

Before making class-based components, we need to inherit functions from React.Component and this can be done with extends, like this:

class User extends React.Component {
  render() {
    return <h1>Hello, Sandip!</h1>;
  }
}

Note: It also requires a render method which returns HTML.

Rendering a Component:

We made a component; now we want to render or use it. The syntax for using a component is:

<ComponentName />

React Props:

As mentioned earlier, we can import the same component into different files and use it, but maybe in different files some changes to the component are needed. For that, we can use props.

• Props are arguments passed into React components.

• Props are passed to components via HTML attributes.

• Props stands for properties.

• Props are like function arguments in JavaScript and attributes in HTML.

Passing Data with Props:

//we will use function based component

const User = (props)=>{
  return(
    <div>
      <h1>{props.name}</h1>
    </div>
  )
}

Using Props in Components:

function App() {
  return (
      <div>
        <User name="Sandip" />
      </div>
  )
}

For a better understanding of how we can use components and props watch this example of user data.

function App() {
  return (
    <>
      <div>
        <User name="Sandip" age={25} email="sandip@gmail.com"/>
        <User name="Jack" age={26} email="jack@gmail.com"/>
        <User name="Devid" age={27} email="david@gmail.com"/>
      </div>
    </>
  )
}

const User = (props)=>{
  return(
    <div>
      <h1>{props.name}</h1>
      <h1>{props.age}</h1>
      <h1>{props.email}</h1>
    </div>
  )
}

export default App

The output of the above example will be like this:

Sandip
25
sandip@gmail.com
Jack
26
jack@gmail.com
David
27
david@gmail.com

Conclusion:

Congratulations on gaining knowledge of React properties and components! Using React, you now have a strong foundation for creating dynamic online applications. Keep in mind that props enable customizing and data passing across components while components serve as the building blocks. You may design strong and engaging user interfaces by skillfully implementing these ideas. To fully utilize React, continue to explore and play with it. Greetings from the code!