Creating and Deploying a React App with Random Quote Generator: A Step-by-Step Guide

React is a popular JavaScript library that allows you to build interactive and responsive user interfaces. In this article, we will go over how to make a React app that uses a JSON file as a source to display random quotes every time the user refreshes the page.

Before we get started, make sure you have Node.js and npm installed on your machine.

Step 1: Set up the project

Open your terminal and create a new directory for your project by running:

mkdir react-random-quote-generator

Navigate to the directory by running:

cd react-random-quote-generator

Then, create a new React app by running:

npx create-react-app .

Note the period at the end of the command, which creates the app in the current directory.

Step 2: Add the JSON file

Create a new file in the src folder called quotes.json. Inside this file, add an array of quotes with each quote containing a text property and an author property.

[

    {

        "text": "Be the change that you wish to see in the world.",

        "author": "Mahatma Gandhi"

    },

    {

        "text": "Two things are infinite: the universe and human stupidity; and I'm not sure about the universe.",

        "author": "Albert Einstein"

    },

    {

        "text": "The only way to do great work is to love what you do. If you haven't found it yet, keep looking. Don't settle.",

        "author": "Steve Jobs"

    }

]

Or you can use this json file made by us.

Step 3: Create the Quote component

Create a new file in the src folder called Quote.js. Inside this file, add the following code:

import React from 'react';

const Quote = ({ text, author }) => {
  return (
    <div>
      <h1>{text}</h1>
      <p>{author}</p>
    </div>
  );
}

export default Quote;

This component takes in a text and author prop and displays them in an h1 and p tag, respectively.

Step 4: Create the App component

In the src folder, open the App.js file and replace the existing code with the following:

import React, { useState } from 'react';
import Quote from './Quote';
import quotes from './quotes.json';

const App = () => {
  const [quote, setQuote] = useState(null);

  const getRandomQuote = () => {
    const randomIndex = Math.floor(Math.random() * quotes.length);
    setQuote(quotes[randomIndex]);
  }

  return (
    <div>
      <h1>Random Quote Generator</h1>
      <button onClick={getRandomQuote}>Generate Quote</button>
      {quote && <Quote text={quote.text} author={quote.author} />}
    </div>
  );
}

export default App;

In this component, we import the Quote component and the quotes data from the quotes.json file. We then use the useState hook to create a state variable called quote, which will hold the randomly generated quote. We also define a function called getRandomQuote that sets the quote state to a randomly selected quote from the quotes data.

In the return statement, we render a button that calls the getRandomQuote function when clicked. We also use a conditional statement to only render the Quote component if a quote has been generated.

Step 5: Run the app

In your terminal, run the following command to start the development server:
npm start

This will open your app in your default web browser. Click on the "Generate Quote" button to display a random quote from the quotes data.

Congratulations, you have successfully built a React app that displays random quotes

Step 6: Deploy the app

To deploy the app, we need to build a production-ready version of the app. In your terminal, run the following command:

npm run build

This will create a build folder with optimized and compressed versions of your app's files.

Next, we need to deploy the app to a web server. There are various options for web hosting, such as Heroku, Netlify, or AWS. For this article, we will use Netlify.

Step 7: Create a Netlify account

If you don't already have a Netlify account, go to https://www.netlify.com/ and create an account. Once you are logged in, click on the "New site from Git" button.

Step 8: Connect to GitHub

Select GitHub as your Git provider and connect your GitHub account to Netlify. Choose the repository that contains your React app and select the branch you want to deploy.

Step 9: Configure the build settings

In the build settings, specify the following:

    Build command: npm run build
    Publish directory:build

These settings tell Netlify how to build and deploy your app.

Step 10: Deploy the app

Click on the "Deploy site" button to start the deployment process. Netlify will automatically build and deploy your app to a unique URL.

Step 11: Test the app

Open the URL provided by Netlify to test your deployed app. Click on the "Generate Quote" button to make sure the app is working as expected.

Congratulations, you have successfully deployed your React app to a web server using Netlify.

Conclusion

In this article, we have learned how to create a React app that displays random quotes from a JSON file. We have also covered how to deploy the app to a web server using Netlify.

Creating and deploying a React app can be a complex process, but by following the steps outlined in this article, you should be able to create and deploy your own app with ease. Remember to keep your code clean and well-organized, and to optimize your app's performance for a better user experience.