Build a Simple React JavaScript Interactive Interactive Random Quote Generator: A Beginner’s Guide

Written by

learnmodernjavascript

in

Ever find yourself scrolling through social media, encountering a quote that perfectly encapsulates your current mood, or perhaps ignites a spark of inspiration? Quotes have a unique power – they can motivate, entertain, and provide a fresh perspective. In this tutorial, we’re going to build a Random Quote Generator using React.js, a popular JavaScript library for building user interfaces. This project isn’t just about creating a functional application; it’s about solidifying your understanding of React concepts, such as state management, component composition, and handling API requests.

Why Build a Random Quote Generator?

This project is an excellent starting point for beginners and intermediate developers alike. Here’s why:

  • Practical Application: You’ll learn how to fetch data from an external API (in this case, a quote API) and display it dynamically.
  • State Management: You’ll get hands-on experience managing the state of your application, specifically the displayed quote and author.
  • Component Composition: You’ll practice breaking down your UI into reusable components, making your code cleaner and more maintainable.
  • API Interaction: Understanding how to interact with APIs is a fundamental skill for any web developer.
  • Fun and Engaging: It’s a relatively simple project that produces a visually appealing and interactive result.

Prerequisites

Before we dive in, ensure you have the following:

  • Basic HTML, CSS, and JavaScript knowledge: You should be familiar with the fundamentals of these languages.
  • Node.js and npm (or yarn) installed: These are required to manage your project’s dependencies and run the development server.
  • A code editor: Choose your favorite editor, such as VS Code, Sublime Text, or Atom.

Setting Up the React Project

Let’s get started by creating a new React project using Create React App. Open your terminal and run the following command:

npx create-react-app random-quote-generator

This command sets up a new React project with all the necessary configurations. Once the installation is complete, navigate into your project directory:

cd random-quote-generator

Now, start the development server:

npm start

This will open your app in your default web browser, usually at http://localhost:3000/.

Project Structure and Component Breakdown

Let’s plan our project structure. We’ll have a few key components:

  • App.js: The main component. It will fetch the quotes and manage the overall state.
  • QuoteBox.js (or QuoteBox component): This component will display the quote text, author, and a button to generate a new quote.

Building the QuoteBox Component

First, let’s create the QuoteBox component. Inside the src folder, create a new file named QuoteBox.js. Paste the following code:

import React from 'react';

function QuoteBox({ quote, author, onNewQuote }) {
  return (
    <div id="quote-box">
      <p id="text">{quote}</p>
      <p id="author">- {author}</p>
      <button id="new-quote" onClick={onNewQuote}>New Quote</button>
    </div>
  );
}

export default QuoteBox;

Let’s break down this code:

  • Import React: We import the React library to use its features.
  • Functional Component: QuoteBox is a functional component. It takes props (short for properties) as an argument.
  • Props: The component receives three props: quote (the quote text), author (the author of the quote), and onNewQuote (a function to fetch a new quote).
  • JSX: The component returns JSX (JavaScript XML), which looks like HTML but is transformed into React elements.
  • Elements: We have a div with the id “quote-box”, a p element with the id “text” displaying the quote, another p element with the id “author” displaying the author, and a button with the id “new-quote” that triggers the onNewQuote function when clicked.

Building the App Component (App.js)

Now, let’s modify App.js to fetch the quotes and render the QuoteBox component.

Replace the content of src/App.js with the following code:

import React, { useState, useEffect } from 'react';
import QuoteBox from './QuoteBox';
import './App.css'; // Import your CSS file

function App() {
  const [quote, setQuote] = useState('');
  const [author, setAuthor] = useState('');

  useEffect(() => {
    fetchQuote();
  }, []); // Empty dependency array ensures this runs only once on component mount

  const fetchQuote = async () => {
    try {
      const response = await fetch('https://api.quotable.com/random'); // Replace with your API endpoint
      const data = await response.json();
      setQuote(data.content);
      setAuthor(data.author);
    } catch (error) {
      console.error('Error fetching quote:', error);
      setQuote('Failed to fetch quote.');
      setAuthor('Unknown');
    }
  };

  return (
    <div className="App">
      <QuoteBox quote={quote} author={author} onNewQuote={fetchQuote} />
    </div>
  );
}

export default App;

Let’s break down the App.js code:

  • Import Statements: We import useState and useEffect from React, QuoteBox from our component file, and the App.css file.
  • State Variables:
    • quote: Stores the current quote string.
    • author: Stores the author of the current quote.
  • useEffect Hook:
    • This hook runs after the component renders.
    • The empty dependency array [] ensures that the fetchQuote function runs only once when the component mounts (i.e., when the app first loads).
  • fetchQuote Function:
    • This asynchronous function fetches a random quote from the quote API. We’re using https://api.quotable.com/random as our API. You can replace this with any other quote API if you prefer.
    • It uses the fetch API to make a request.
    • It parses the response as JSON.
    • It updates the quote and author state variables with the fetched data.
    • It includes a try...catch block to handle potential errors during the API request. If an error occurs, it displays an error message.
  • JSX:
    • The component renders a QuoteBox component and passes the quote, author, and fetchQuote function as props.

Styling with CSS (App.css)

To make the app visually appealing, let’s add some CSS styles. Create a file named src/App.css and add the following styles:

.App {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: #f0f0f0;
  font-family: sans-serif;
}

#quote-box {
  background-color: #fff;
  border-radius: 10px;
  padding: 30px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  text-align: center;
  width: 80%;
  max-width: 600px;
}

#text {
  font-size: 1.5rem;
  margin-bottom: 20px;
}

#author {
  font-style: italic;
  font-size: 1rem;
  margin-bottom: 20px;
}

#new-quote {
  background-color: #3498db;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 1rem;
}

#new-quote:hover {
  background-color: #2980b9;
}

These styles center the quote box, add some padding, and style the text and button. Feel free to customize these styles to match your preferences.

Running the Application

Save all the files and run your React app using npm start in your terminal. You should see a random quote displayed on the page, along with the author and a button to get a new quote.

Common Mistakes and How to Fix Them

Here are some common mistakes and how to avoid or fix them:

  • CORS Errors: If you encounter CORS (Cross-Origin Resource Sharing) errors, it means the API you are trying to access has restrictions on which domains can access its data. This is a common issue when developing locally. The simplest solution is to use a CORS proxy. There are several online CORS proxies available. You can try using a proxy like https://cors-anywhere.herokuapp.com/ (be aware that Heroku’s free tier can be unreliable). To use it, prepend the proxy URL to your API endpoint in the fetchQuote function, like so: fetch('https://cors-anywhere.herokuapp.com/https://api.quotable.com/random'). For production, consider using a server-side proxy or an API that supports CORS.
  • Incorrect API Endpoint: Double-check the API endpoint URL. Typos or incorrect URLs will prevent your app from fetching data.
  • Uncaught Errors in `fetchQuote()`: Make sure you handle errors in your `fetchQuote` function using a `try…catch` block. This prevents the app from crashing if the API request fails. Provide a user-friendly error message.
  • Not Importing Components: Ensure you correctly import the QuoteBox component in App.js and that the path to the component file is correct.
  • Incorrect State Updates: When updating state using setQuote() and setAuthor(), ensure you are passing the correct data from the API response.
  • Missing Dependency Array in `useEffect()`: Remember the empty dependency array [] in the useEffect hook to make the API call only once when the component mounts. If you omit it, the fetchQuote function might run repeatedly, potentially overwhelming the API and causing performance issues.

Key Takeaways

  • Component-Based Architecture: React encourages breaking down your UI into reusable components.
  • State Management: Understanding how to manage state is crucial for building interactive applications.
  • API Interaction: Fetching data from external APIs is a fundamental skill for modern web development.
  • Error Handling: Always handle potential errors in your API requests to provide a better user experience.
  • useEffect Hook: The useEffect hook is essential for managing side effects, such as API calls, in functional components.

SEO Best Practices

To improve the search engine optimization (SEO) of your React quote generator, consider the following:

  • Descriptive Title: Choose a clear and concise title for your project (e.g., “React Random Quote Generator – A Beginner’s Guide”).
  • Meta Description: Write a compelling meta description (within 160 characters) that summarizes your project and its benefits. Example: “Learn to build a dynamic random quote generator with React.js. This beginner-friendly tutorial covers API calls, state management, and component composition.”
  • Keywords: Naturally incorporate relevant keywords throughout your code, comments, and documentation. Examples: “React,” “JavaScript,” “quote generator,” “API,” “beginner tutorial.”
  • Semantic HTML: Use semantic HTML elements (e.g., <article>, <aside>, <nav>) to structure your content.
  • Image Optimization: Optimize any images used in your project for web performance (e.g., compress images, use appropriate formats like WebP).
  • Mobile Responsiveness: Ensure your app is responsive and looks good on all devices.
  • Fast Loading Speed: Minimize the size of your JavaScript bundles and CSS files. Consider code splitting and lazy loading.
  • Clear Code Comments: Add comments to your code to explain what it does and why.
  • Regular Updates: Keep your project updated with the latest React versions and best practices.

FAQ

Here are some frequently asked questions about building a Random Quote Generator with React:

  1. Where can I find a good quote API? There are many free quote APIs available. I used https://api.quotable.com/random in this tutorial, but others include the ZenQuotes API.
  2. How can I style the app? You can use CSS (as shown in this tutorial), styled-components, or any other CSS-in-JS library.
  3. How can I add social sharing buttons? You can integrate social sharing buttons using third-party libraries or by creating share links for various social media platforms.
  4. How can I make the app more responsive? Use CSS media queries to adjust the layout and styles for different screen sizes.
  5. Can I use this project for my portfolio? Absolutely! It’s a great project to showcase your React skills.

This tutorial provides a solid foundation for building a Random Quote Generator with React. You can expand upon this project by adding features such as a button to tweet the quote, a like button to save favorite quotes, or the ability to filter quotes by category. The possibilities are endless. The key is to practice, experiment, and keep learning. As you delve deeper into React, you’ll discover new ways to structure your code, optimize performance, and create even more engaging user interfaces. Remember that the journey of a thousand lines of code begins with a single step: in this case, a single quote.

More posts