basic-react.md

Step 1: Basic Functional Component

Create a Message component that takes a text prop and displays it inside a <p> element.

// Message.js
import React from "react";

const Message = (props) => {
  return <p>{props.text}</p>;
};

export default Message;

Now, use this component in App.js:

import React from "react";
import Message from "./Message";

function App() {
  return (
    <div>
      <h1>My First React App</h1>
      <Message text="Hello, welcome to the world of React!" />
    </div>
  );
}

export default App;

Once done, you should see the message displayed on the page.

---

Step 2: Passing Props to Child Components

Create a UserCard component that takes name, age, and location props and displays them inside a styled card.

// UserCard.js
import React from "react";

const UserCard = (props) => {
  return (
    <div style={{ border: "1px solid black", padding: "10px", margin: "10px" }}>
      <h2>{props.name}</h2>
      <p>Age: {props.age}</p>
      <p>Location: {props.location}</p>
    </div>
  );
};

export default UserCard;

Now, modify your App.js to include the UserCard:

import React from "react";
import UserCard from "./UserCard";

function App() {
  return (
    <div>
      <h1>User Cards</h1>
      <UserCard name="Alice" age={28} location="New York" />
      <UserCard name="Bob" age={35} location="San Francisco" />
    </div>
  );
}

export default App;

You should now see two user cards with the names, ages, and locations displayed.

---

Step 3: Rendering Lists from Props

Create a ShoppingList component that takes an array of items as a prop and displays each item in an unordered list (<ul>).

// ShoppingList.js
import React from "react";

const ShoppingList = (props) => {
  return (
    <div>
      <h3>Shopping List</h3>
      <ul>
        {props.items.map((item, index) => (
          <li key={index}>{item}</li>
        ))}
      </ul>
    </div>
  );
};

export default ShoppingList;

Update your App.js to pass an array of items to ShoppingList:

import React from "react";
import ShoppingList from "./ShoppingList";

function App() {
  const items = ["Apples", "Bananas", "Oranges", "Grapes"];

  return (
    <div>
      <h1>My Shopping List</h1>
      <ShoppingList items={items} />
    </div>
  );
}

export default App;

Now, you should see the list of items rendered in an unordered list.

---

Step 4: Using Children to Compose Components

In React, props.children allows components to display whatever is passed between their opening and closing tags.

Create a Card component that renders children inside a styled container.

// Card.js
import React from "react";

const Card = (props) => {
  return (
    <div style={{ border: "1px solid #ddd", padding: "20px", borderRadius: "5px" }}>
      {props.children}
    </div>
  );
};

export default Card;

Now, update your App.js to use this Card component and pass some content as children:

import React from "react";
import Card from "./Card";

function App() {
  return (
    <div>
      <h1>Cards with Content</h1>
      <Card>
        <h2>This is a Card Title</h2>
        <p>This is some content inside the card.</p>
      </Card>
      <Card>
        <h2>Another Card Title</h2>
        <p>Here is some more content inside a different card.</p>
      </Card>
    </div>
  );
}

export default App;

You should now see two styled cards with different content inside them.

---

Step 5: Handling Events in Stateless Components

Create a Button component that accepts a label and an onClick prop. The onClick prop will be passed from the parent, and the button will trigger it when clicked.

// Button.js
import React from "react";

const Button = (props) => {
  return <button onClick={props.onClick}>{props.label}</button>;
};

export default Button;

Now, in App.js, pass an event handler to the Button component:

import React from "react";
import Button from "./Button";

function App() {
  const handleClick = () => {
    alert("Button clicked!");
  };

  return (
    <div>
      <h1>Button Component Example</h1>
      <Button label="Click Me" onClick={handleClick} />
    </div>
  );
}

export default App;

When you click the button, you should see an alert box pop up.

---

Step 6: Conditional Rendering

Create a Greeting component that takes a isLoggedIn prop. If isLoggedIn is true, display "Welcome back!" Otherwise, display "Please log in."

// Greeting.js
import React from "react";

const Greeting = (props) => {
  return <h2>{props.isLoggedIn ? "Welcome back!" : "Please log in."}</h2>;
};

export default Greeting;

Update App.js to pass a isLoggedIn prop to Greeting:

import React from "react";
import Greeting from "./Greeting";

function App() {
  return (
    <div>
      <h1>Conditional Rendering Example</h1>
      <Greeting isLoggedIn={true} />
      <Greeting isLoggedIn={false} />
    </div>
  );
}

export default App;