React Props ?

Props Using in Reactjs

_In React (and similar frameworks like Vue or Svelte), props — short for properties — are a way to pass data from a parent component to a child component.

Think of them like function arguments, but for components._

Conceptually

• Parent → Child communication
• Immutable inside the child (the child cannot change them)
• Allow components to be reusable and dynamic

// Parent Component
import Navbar from './assets/Navbar'
import Course from './Course'
import Footer from './Footer'


import './App.css';
import courseImg from './assets/1.jpg';
import coursesImg from './assets/2.jpg';
import coursessImg from './assets/3.jpg';
function App() {
  return (
    <>
      {/* <Navbar /> */}
      <Course name="HTML,Css" price="$100" image={courseImg} description="Html"  show={true}/>
      <Course name="JAVASCRIPT" price="$1100" image={coursesImg} description="javascript"show={true} />
      <Course name="reactjs " price="$120" image={coursessImg} description="REactjs"show={true} />


      {/* <Footer/> */}




    </>
  );
}

export default App;

// Child Component
import coursessImg from './assets/3.jpg'; 
 // 👈 Add this line at the top

function Course(props) {
    if (props.show==true)
    return (
        <div className="card">
            <img src={props.image} alt="" />
            <h4>{props.name}</h4>
            <h5>{props.price}</h5>
            <p>{props.description}</p>
        </div>
    );
}


export default Course;

Here:

_The parent passes a prop called name with the value "Alice".

The child receives it through the props object and uses props.name._

Using Destructuring (a common shorthand)

function Greeting({ name }) {
  return <h1>Hello, {name}!</h1>;
}

This does exactly the same thing — just cleaner.