React - Level 4 - React State and Events - Build Your Own Fun Mad Libs Game with React

[akash-coded]

Title: Build Your Own Fun Mad Libs Game with React!

---

Hey there, creative coder!

Ready to combine your newfound React skills with some essential JavaScript concepts to create something fun? Today, we'll build a Mad Libs game! If you're not familiar, Mad Libs is a word game where you fill in blanks with words to create a funny story.

This exercise will reinforce your understanding of components, props, and introduce you to handling user input, using arrays, loops, and functions in React.

---

🌟 Exercise Overview

Objective: Create an interactive Mad Libs game using React components and various JavaScript concepts.

What You'll Learn:

• Handling user input in React.
• Using state to manage data.
• Manipulating arrays and objects.
• Using array methods like map().
• Implementing event handlers.
• Conditional rendering.
• JavaScript ES6 features like destructuring and arrow functions.

---

🛠️ Let's Get Started!

Step 1: Set Up Your React App

If you haven't already, set up a new React app:

npx create-react-app mad-libs
cd mad-libs
npm start

This will start the development server and open your app in the browser.

---

Step 2: Plan Your Components

We'll create the following components:

1. App - The main parent component.
2. WordInput - A component for each word input.
3. Story - A component to display the final story.

---

Step 3: Define the Story Template

In App.js, define a story template with placeholders. We'll use an array of objects to store the words and their types.

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

function App() {
  const [words, setWords] = useState([
    { key: 'adjective1', label: 'Adjective', value: '' },
    { key: 'noun1', label: 'Noun', value: '' },
    { key: 'verb1', label: 'Verb', value: '' },
    // Add more words as needed
  ]);

  const storyTemplate = `Once upon a time, there was a very _____ {adjective1} _____ {noun1} who loved to _____ {verb1}.`;

  // Function to update word values
  const handleWordChange = (key, value) => {
    setWords(words.map(word => word.key === key ? { ...word, value } : word));
  };

  return (
    <div className="App">
      <h1>Mad Libs Game</h1>
      {/* Render WordInput components */}
      {words.map(word => (
        <WordInput
          key={word.key}
          label={word.label}
          value={word.value}
          onChange={value => handleWordChange(word.key, value)}
        />
      ))}
      {/* Render Story component */}
      <Story words={words} template={storyTemplate} />
    </div>
  );
}

export default App;

---

Step 4: Create the WordInput Component

Create a new file called WordInput.js in the src folder.

import React from 'react';

function WordInput(props) {
  return (
    <div>
      <label>
        {props.label}: 
        <input
          type="text"
          value={props.value}
          onChange={e => props.onChange(e.target.value)}
        />
      </label>
    </div>
  );
}

export default WordInput;

Concepts Used:

• Props: Passing data and functions to child components.
• Event Handling: Handling the onChange event to capture user input.
• Arrow Functions: Using concise syntax for functions.

---

Step 5: Create the Story Component

Create a new file called Story.js in the src folder.

import React from 'react';

function Story(props) {
  // Function to replace placeholders with user input
  const generateStory = () => {
    let story = props.template;
    props.words.forEach(word => {
      const regex = new RegExp(`{${word.key}}`, 'g');
      story = story.replace(regex, word.value || `(${word.label})`);
    });
    return story;
  };

  return (
    <div>
      <h2>Your Story:</h2>
      <p>{generateStory()}</p>
    </div>
  );
}

export default Story;

Concepts Used:

• Functions: Creating a function to process and manipulate strings.
• String Manipulation: Using replace() and regular expressions.
• Conditional Rendering: Displaying placeholders if inputs are empty.

---

Step 6: Add More Words and Complexity

In App.js, you can add more words to the words state array.

const [words, setWords] = useState([
  { key: 'adjective1', label: 'Adjective', value: '' },
  { key: 'noun1', label: 'Noun', value: '' },
  { key: 'verb1', label: 'Verb', value: '' },
  { key: 'adverb1', label: 'Adverb', value: '' },
  { key: 'adjective2', label: 'Another Adjective', value: '' },
  { key: 'noun2', label: 'Another Noun', value: '' },
]);

Update the storyTemplate accordingly:

const storyTemplate = `Once upon a time, there was a very {adjective1} {noun1} who loved to {verb1} {adverb1}. Every day, the {noun1} would {verb1} to the {adjective2} {noun2}.`;

---

Step 7: Add a Reset Button

Let's add a button to reset the game.

In App.js, add the following function:

const resetGame = () => {
  setWords(words.map(word => ({ ...word, value: '' })));
};

Add the button in the return statement:

<button onClick={resetGame}>Reset</button>

Concepts Used:

• Event Handling: Handling button clicks.
• Array Methods: Using map() to update state.
• Spread Operator: Copying objects.

---

Step 8: Style Your App

Update App.css to make your game visually appealing.

.App {
  text-align: center;
  padding: 20px;
}

label {
  display: block;
  margin: 10px 0;
}

input {
  margin-left: 10px;
}

button {
  margin-top: 20px;
  padding: 10px 20px;
}

h2 {
  margin-top: 30px;
}

---

🎉 Run Your App

Save all your files and ensure your development server is running (npm start). Check your app in the browser. You should see input fields to enter words and the generated story updating as you type.

---

🔄 Recap and Concepts

• State Management (useState): Keeping track of user input and updating the UI accordingly.
• Props and Child Components: Passing data and functions between components.
• Event Handling: Capturing user input and button clicks.
• Array Methods:
  • map(): Iterating over arrays to render components or update state.
  • forEach(): Processing each element in an array.
• String Manipulation: Using template literals and the replace() function.
• Destructuring and Spread Operator (...): Copying and updating objects and arrays.

---

🧩 Deep Dive into JavaScript Concepts

1. The map() Function

• Used to create a new array by applying a function to each element of an existing array.
• Commonly used in React to render lists of components.

Example:

const numbers = [1, 2, 3];
const doubled = numbers.map(n => n * 2); // [2, 4, 6]

2. The Spread Operator ...

• Used to copy arrays or objects.
• Helps avoid mutating the original data.

Example:

const original = { a: 1, b: 2 };
const copy = { ...original, b: 3 }; // { a: 1, b: 3 }

3. Destructuring

• Allows unpacking values from arrays or properties from objects into distinct variables.

Example:

const { a, b } = { a: 1, b: 2 };
console.log(a); // 1

4. Arrow Functions

• A shorter syntax for writing functions.
• Does not have its own this or arguments.

Example:

const add = (x, y) => x + y;

5. Regular Expressions (RegEx)

• Patterns used to match character combinations in strings.
• Used with methods like match(), replace(), test().

Example:

const regex = /cat/g;
'concatenate'.replace(regex, 'dog'); // 'condogendogene'

6. Event Handling in React

• Handling events like clicks, changes, submits.
• Event handlers are passed as props and named using camelCase.

Example:

<button onClick={handleClick}>Click Me</button>

7. Conditional Rendering

• Rendering components or elements based on conditions.

Example:

{isLoggedIn ? <LogoutButton /> : <LoginButton />}

---

🌟 Extra Challenges

1. Validate User Input:

   • Ensure that the user fills in all the inputs before displaying the full story.
   • Hint: Use conditional rendering to display a message if inputs are missing.

2. Add Multiple Stories:

   • Allow the user to select from different story templates.
   • Hint: Store multiple templates in an array and let the user choose.

3. Animate the Story:

   • Add CSS animations to make the story appear letter by letter.
   • Hint: Use CSS transitions or JavaScript intervals.

4. Use Advanced String Manipulation:

   • Highlight the user-inputted words in the final story.
   • Hint: Wrap the words in <span> tags and apply styles.

5. Implement a Timer:

   • Challenge the user to fill in all the words within a certain time limit.
   • Hint: Use setInterval() or setTimeout() functions.

6. Convert to a Multi-Page App:

   • Use React Router to navigate between the input page and the story page.
   • Hint: Install react-router-dom and set up routes.

7. Persist Data:

   • Save the user's inputs to local storage so they can return to their story later.
   • Hint: Use localStorage.setItem() and localStorage.getItem().

---

Understanding More Advanced Concepts

1. State Management with useState

• The useState hook allows you to add state to functional components.
• Calling setState triggers a re-render of the component.

Example:

const [count, setCount] = useState(0);

2. Handling Forms in React

• Controlled components have their state controlled by React.
• The value of the input is set by the component's state.

Example:

<input type="text" value={value} onChange={handleChange} />

3. Functional Programming Concepts

• Immutability: Avoid changing existing data structures.
• Pure functions: Functions that don't have side effects.

---

🧩 Fill-in-the-Blanks Solutions

Step 3: App.js

No blanks were given in this step, but here's the code with comments explaining key parts.

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

function App() {
  // Initialize state with an array of word objects
  const [words, setWords] = useState([
    { key: 'adjective1', label: 'Adjective', value: '' },
    // ... more words
  ]);

  // Template for the story with placeholders
  const storyTemplate = `Once upon a time, there was a very {adjective1} {noun1}...`;

  // Function to update word values
  const handleWordChange = (key, value) => {
    setWords(words.map(word => word.key === key ? { ...word, value } : word));
  };

  return (
    <div className="App">
      <h1>Mad Libs Game</h1>
      {/* Render WordInput components */}
      {words.map(word => (
        <WordInput
          key={word.key}
          label={word.label}
          value={word.value}
          onChange={value => handleWordChange(word.key, value)}
        />
      ))}
      {/* Render Story component */}
      <Story words={words} template={storyTemplate} />
      <button onClick={resetGame}>Reset</button>
    </div>
  );
}

export default App;

Step 4: WordInput.js

No blanks were given, but key concepts are:

• Using props to access label, value, and onChange.
• Handling the input's onChange event.

Step 5: Story.js

Again, no blanks were given, but important parts include:

• The generateStory function replaces placeholders with user input.
• Using props.template and props.words.

---

🎉 Congratulations!

You've built an interactive Mad Libs game using React! You've incorporated various JavaScript concepts and React principles:

• Components and Props: Structuring your app into reusable pieces.
• State Management: Keeping track of user inputs.
• Event Handling: Responding to user actions.
• Array and Object Manipulation: Updating state immutably.
• String Manipulation and Templates: Generating dynamic content.

---

Keep Exploring and Have Fun!

The possibilities are endless with what you can build using React and JavaScript. Keep experimenting, challenge yourself with the extra tasks, and most importantly, have fun while coding!

---

Happy Coding!

---