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

Initialize the React Project:

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

cd meme-generator

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';
```
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;
}