Lesson 3 - RandomQuote App

Goal : Illustrate how to use useState by creating RandomQuote App

1. Set up a new React project

1. Create the project: Run the following command in your terminal:

   npx create-react-app random-quote-app
   cd random-quote-app

2. Install Bootstrap: Install Bootstrap for styling:

   npm install bootstrap

   Import Bootstrap CSS in your index.js:

   import 'bootstrap/dist/css/bootstrap.min.css';

---

2. Structure the components

• In src folder- App.jsx (Parent Component): Manages the state and passes props to RandomQuote.

• In src/components folder - RandomQuote.jsx (Child Component): Displays the quote and handles button clicks.

---

3. Implement the components

App.jsx

• Initializes state with a default quote.

• Defines an array of quotes.

• Creates a getRandomQuote function to generate a random index and update the quote state.

• Renders the RandomQuote component, passing the quote and getRandomQuote function as props.

• use two useState for updating the state of current quote and text color:

import React, { useState } from 'react';
import RandomQuote from './RandomQuote';

const quotes = [
  { author: "Albert Einstein", content: "Life is like riding a bicycle. To keep your balance you must keep moving." },
  { author: "Maya Angelou", content: "You will face many defeats in life, but never let yourself be defeated." },
  { author: "Oscar Wilde", content: "Be yourself; everyone else is already taken." },
  { author: "Mark Twain", content: "The secret of getting ahead is getting started." },
  {author: "Dennis Prager", content:"Goodness is about character - integrity, honesty, kindness, generosity, moral courage, and the like. More than anything else, it is about how we treat other people." },
];

function App() {
  const [quote, setQuote] = useState(quotes[0]);
  const [color, setColor] = useState('#17a2b8');

  const getRandomQuote = () => {
    const randomIndex = Math.floor(Math.random() * quotes.length);
    const randomColor = `#${Math.floor(Math.random() * 16777215).toString(16)}`;
    setQuote(quotes[randomIndex]);
    setColor(randomColor);
  };

  return (
    <div className="d-flex flex-column align-items-center justify-content-center vh-100" style={{ backgroundColor: color, color: 'white' }}>
      <RandomQuote
        quote={quote}
        color={color}
        onChangeQuote={getRandomQuote}
      />
    </div>
  );
}

export default App;

Key Points

• The useState hook is used to manage the current quote.

• Props (quote, color and onChangeQuote) are passed from the parent component to the child component.

• The getRandomQuote prop is used to update the state in the parent component.

• Bootstrap is used for basic styling (you can customize it further).

---

RandomQuote.jsx

• Receives quote, color and onChangeQuote as props.

• Displays the quote within a Bootstrap card.

• Renders a button that, when clicked, triggers the onChangeQuote function passed from the parent component.

import React from 'react';

function RandomQuote({ quote, color, onChangeQuote }) {
  return (
    <div className="p-4 bg-white rounded shadow text-center" style={{ color: color }}>
      <p className="mb-3" style={{ fontSize: '1.5rem' }}>"{quote.content}"</p>
      <p className="mb-4 fw-bold fst-italic">- {quote.author}</p>
      <button className="btn btn-primary" onClick={onChangeQuote}>
        Get New Quote
      </button>
    </div>
  );
}

export default RandomQuote;

---

4. Test the App

1. Start the development server:

   npm run dev

2. Open the browser and view your app. When you click the "Get New Quote" button, a random quote with a new background color will appear.

---

5. Optional Enhancements

• Add animations: Use CSS or libraries like react-transition-group to add fade effects when changing quotes.

• Persist state: Use localStorage to remember the last quote displayed.

• API Integration: Replace the static array with an API call to fetch quotes dynamically.

This structure provides a reusable child component and showcases the flow of data between the parent and child using props and state.