React props for beginner

What are props?

➜ The word “props” simply means “properties”, and it's works similar to HTML attributes.

➜ props are the read-only component. props can't be changed or edited, Once they are assigned value can't be changed.

➜ we use props to pass data/information of the one component to another component, like from parent component to child component. props are used to improve the functionality of the app.

➜ props is about how data can be shared through the App(parent) component to other nested components. and to render the data whenever we want to show or render information about properties to the app.

Understanding props using simple example

First open your App.js file in your react app and make it as renders "Hello World!" with the heading tag.

Your App.js file should look like this App.js ⬇️⇓

function App() {
  return (
    <div>
       <h1>Hello World!</h1>
    </div>
  );
}

export default App;

Now Lets create the another file in your components directory/folder named "Eagle.js" , The file path will be like components/Eagle.jsx in your code editor.

import Eagle.jsx file in your app component and render.

import React from "react";

function App(){
  return (
  <>
    <h1>Eagles fly Higher</h1>
  <  h1>Eagles are Fearless</h1>
  </>
  )
}

export default App

And make changes as follows in App.js

import React from "react";
import  Eagle  from "../src/components/Eagle.jsx"
import "./style.css";

function App() {
  return (
    <div>
       <h1>Hello World!</h1>
       <Eagle />
    </div>
  );
}

export default App;

output:

Till Now we didn't used props. Let see how it turns out with props.

First thing you have to do is pass the props in Eagle.jsx as the argument as props : -
★ function App(props)

next we have to give the prop variable in the Eagle.jsx file as

★ const High = props.High
★ const Fear = props.Fear

we are declared the props and next thing is we have to use them in our code so, go the heading tag and add
★

Now open you app.js file add the data (information of data props used).

★App.js

<Eagle High="Higher" Fear="Fearless" />

output:

Succesfully we have used props in the app.js to render data.

Learn while doing
Thank you ✿
Have a nice day🚀