Solo Project 1

Building the Meme Generator Application

This guide will walk you through building a Meme Generator Application using React. We will structure our project with a parent component (App.jsx) and two child components (Header.jsx and MainMeme.jsx). Styling will be implemented using the Bootstrap package.

Step 1: Project Setup

1. Initialize the React Project:

   npm create vite@latest
   >react-scrimba-meme-app
   >React
   >JavaScript
   
   cd meme-generator

2. Open code . and open terminal. Then Install Bootstrap:

   npm install bootstrap

   Add the following import to src/index.css to include Bootstrap:

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

3. Project Structure: Create a components folder inside the src directory to house Header.jsx and MainMeme.jsx.

Step 2: Implement App.jsx

The App.jsx component will act as the parent component.

• import bootstrap package :

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

import React from 'react';
import Header from './components/Header';
import MainMeme from './components/MainMeme';
import 'bootstrap/dist/css/bootstrap.min.css'

function App() {
  return (
    <div>
      <Header />
      <MainMeme />
    </div>
  );
}

export default App;

Step 3: Implement Header.jsx

The Header.jsx component contains a header with an icon on the left and a title on the right.

import React from 'react';
import './Header.css'; // Optional: Create this file for additional custom styles.

function Header() {
  return (
    <header className="d-flex justify-content-between align-items-center bg-primary text-white p-3">
      <img src="https://via.placeholder.com/40" alt="Meme icon" className="rounded-circle" />
      <h1 className="m-0 text-center">Meme Generator</h1>
    </header>
  );
}

export default Header;

High Level Overview on Functional Programming

The image highlights three core principles of functional programming: Pure Functions, Immutability, and Avoiding Side Effects. These principles are highly relevant to React development and contribute significantly to building predictable, testable, and maintainable components. Let's explore how they apply in the context of React:

Functional Programming Overview in React

Functional programming is a programming paradigm that treats computation as the evaluation of mathematical functions and avoids changing-state and mutable data. 1 In React, this translates to writing components as pure functions that receive data (props) and return a UI representation (JSX).

1. Pure Functions

• Definition: A pure function always returns the same output for the same input and has no side effects.

• In React: React components can be written as pure functions. They receive props as input and return JSX as output. The output depends solely on the input props.

  JavaScript(JSX)

  // Pure function component
  function MyComponent(props) {
    return <div>Hello, {props.name}!</div>;
  }

• Benefits:

  • Predictability: Given the same props, the component will always render the same output.

  • Testability: Easier to test because the output is predictable and doesn't depend on external factors.

  • Performance optimization: React can optimize rendering by memoizing pure components.

2. Immutability

• Definition: Immutability means that once an object is created, its state cannot be changed. Instead of modifying an existing object, you create a new object with the desired changes.

• In React: It's crucial to treat component state as immutable. Use methods like setState (in class components) or the state updater function returned by useState (in functional components with hooks) to create new state objects instead of directly modifying the existing state.

  JavaScript

  import React, { useState } from 'react';
  
  function MyComponent() {
    const [user, setUser] = useState({ name: 'Alice' });
  
    const updateName = () => {
      // Correct: Create a new object
      setUser({ ...user, name: 'Bob' });
  
      // Incorrect: Directly mutating the state (Avoid this)
      // user.name = 'Bob'; 
      // setUser(user);
    };
  
    return (
      <div>
        <p>Name: {user.name}</p>
        <button onClick={updateName}>Change Name</button>
      </div>
    );
  }

• Benefits:

  • Predictable state changes: Easier to track how state changes over time.

  • Improved performance: React can perform efficient updates by comparing references of objects. If the reference is the same, React knows that the component doesn’t need to re-render.

  • Simplified debugging: Easier to reason about the flow of data and identify the source of bugs.

3. Avoiding Side Effects

• Definition: A side effect is any operation that affects something outside the scope of the function being executed. Examples include making API calls, directly manipulating the DOM, using timers, or modifying global variables.

• In React: Side effects should be managed within lifecycle methods (in class components) or using the useEffect hook (in functional components). This keeps side effects isolated and makes components more predictable.

  JavaScript

  import React, { useState, useEffect } from 'react';
  
  function MyComponent() {
    const [data, setData] = useState(null);
  
    useEffect(() => {
      // This is where you would perform side effects like fetching data
      fetch('/api/data')
        .then(res => res.json())
        .then(setData);
  
      // Cleanup function (important for avoiding memory leaks)
      return () => {
      // Any cleanup logic, like unsubscribing from timers or event listeners
      };
    }, []); // The empty dependency array ensures this runs only once on mount and unmount
  
    if (!data) {
      return <p>Loading...</p>;
    }
  
    return <p>Data: {data.value}</p>;
  }

• Benefits:

  • Improved maintainability: Easier to understand and reason about the component's behavior.

  • Better testability: Easier to mock or control external dependencies during testing.

  • Reduced bugs: Minimizes unintended interactions between different parts of the application.

In summary: By adhering to the principles of functional programming, React developers can create components that are more predictable, easier to test, and simpler to maintain. This approach leads to more robust and scalable applications.

Step 4: Implement MainMeme.jsx

Meme Generator - Fetching Data from API

The MainMeme.jsx component handles the meme generation functionality. Refer to the provided MainMeme.jsx for layout configuration.

import React, { useState, useEffect } from 'react';
import './MainMeme.css';

export default function MainMeme() {
  const [meme, setMeme] = useState({
    topText: '',
    bottomText: '',
    randomImage: 'http://i.imgflip.com/1bij.jpg'
  });

  const [allMemes, setAllMemes] = useState([]);

  useEffect(() => {
    fetch("https://api.imgflip.com/get_memes")
      .then((response) => response.json())
      .then((data) => setAllMemes(data.data.memes));
  }, []);

  const handleChange = (event) => {
    const { name, value } = event.target;
    setMeme((prevMeme) => ({
      ...prevMeme,
      [name]: value
    }));
  };

  const getMemeImage = () => {
    const randomIndex = Math.floor(Math.random() * allMemes.length);
    const randomMeme = allMemes[randomIndex]?.url;
    if (randomMeme) {
      setMeme((prevMeme) => ({ ...prevMeme, randomImage: randomMeme }));
    }
  };

  return (
    <main className="container mt-5">
      <div className="form-group">
        <label htmlFor="topText">Top Text</label>
        <input
          type="text"
          className="form-control"
          id="topText"
          placeholder="Enter top text"
          name="topText"
          value={meme.topText}
          onChange={handleChange}
        />
      </div>

      <div className="form-group">
        <label htmlFor="bottomText">Bottom Text</label>
        <input
          type="text"
          className="form-control"
          id="bottomText"
          placeholder="Enter bottom text"
          name="bottomText"
          value={meme.bottomText}
          onChange={handleChange}
        />
      </div>

      <div className="meme mt-5 text-center">
        <button className="btn btn-primary mb-3" onClick={getMemeImage}>
          Get a new meme image 🖼
        </button>
        <div className="position-relative">
        <img src={meme.randomImage} className="img-fluid" alt="Meme" />
        <h2 className="top-text text-white position-absolute w-100 text-center">{meme.topText}</h2>
        <h2 className="bottom-text text-white position-absolute">{meme.bottomText}</h2>
      </div>
      </div>
    </main>
  );
}

Step 5: Add Styling

Create MainMeme.css to position the top and bottom text on the image:

.meme {
  position: relative;
  display: inline-block;
}

.top-text {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 24px;
  font-weight: bold;
  text-shadow: 2px 2px 4px black;
}

.bottom-text {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 24px;
  font-weight: bold;
  text-shadow: 2px 2px 4px black;
}

Step 6: Run the Application

1. Start the application:

   npm run dev

2. Open http://localhost:5173 to see the Meme Generator in action.

Congratulations! You have built a functional meme generator app using React.