Simple React Project: Quotes generator.

#react #beginners #tutorial #javascript

Are you ready to dive into the world of React.js? In this step-by-step tutorial, I'll walk you through building an interactive Quotes Generator using React.js and Vite. I'll highlight the importance of integrating an API and fetch data using axios

Preview:

Github respository(Give a star✨)

Step 1: Setting up the Project with Vite

we need to set up a new React.js project using Vite. By following these steps:

Open your terminal and navigate to the desired directory where you'd like to create your project.

Run the following command to create a new Vite project called "quotes-generator-react":

npm init vite@latest quotes-generator --template react

Once the project is created, navigate into the project folder using:

cd quotes-generator

Step 2: Editing the React App:

Edit the src folder of your project.
In the folder Create App.jsx file and add the following code:

import React, { useState, useEffect } from "react";
import "./App.css";

This will import necessary react modules which are gonna used in this project and css styles.

Step 3: CSS Implementation

Delete the index.css file and edit App.css.Delete all the styles in that styles and edit the css file and add following code:

@import url("https://fonts.googleapis.com/css2?family=Ubuntu&display=swap");
root,
html,
body {
  margin: 0;
  padding: 0;
  font-family: "Ubuntu", sans-serif;
}

.app {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: rgb(173, 200, 255);
}

.card {
  transition: opacity 0.5s;

  display: grid;
  place-content: center;
  margin: 20px;
  color: #fff;
  max-width: 450px;
  padding: 0px 20px 20px 20px;
  border-radius: 10px;
  background: linear-gradient(
    90deg,
    rgb(63, 124, 255) 0%,
    rgb(17, 52, 123) 100%
  );
}

.heading {
  font-size: 40px;
  text-align: center;
  margin-bottom: 20px;
  letter-spacing: 2px;
  word-spacing: 1px;
  line-height: 1.3;
}

.button {
  border-radius: 7px;
  cursor: pointer;
  padding: 13px 20px;
  opacity: 1;
  background-color: #ffffff;
  border: none;
  outline: none;
}

.button span {
  color: #1d5dcc;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.7px;
}
.button:hover {
  background-color: #ececec;
  transition: ease-in-out 0.1s;
}

.card.fetching {
  opacity: 0.5;
  pointer-events: none;
}

Step 3: Editing the main.jsx file:

edit main.jsx file and add the following code which will render your App.jsx file.

import { createRoot } from 'react-dom/client';
import App from './App'
const domNode = document.querySelector('#root');
const root = createRoot(domNode);
root.render(<App />)

Step 4: Fetching data using Axios:

const [advice, setAdvice] = useState({
        advice: "",
        isFetching: false, // Removed initial fetching state
    });

    useEffect(() => {
        fetchAdvice();
    }, []);

    const fetchAdvice = () => {
        setAdvice((prevState) => ({ ...prevState, isFetching: true }));
        axios
            .get("https://api.adviceslip.com/advice")
            .then((res) => {
                const { advice } = res.data.slip;
                setAdvice({ advice: advice, isFetching: false });
            })
            .catch((error) => {
                console.log("Error occurred", error);
                setAdvice((prevState) => ({ ...prevState, isFetching: false }));
            });
    };

    const rawAdvice = advice.advice.slice(0, -1);

paste the code in the curlibrackets export default () => {}
this code will fetch data from the following api using axois:

Api:

https://api.adviceslip.com/advice

Sample JSON Data:

{
  "slip": {
    "id": 122,
    "advice": "You spend half your life asleep or in bed. It's worth spending money on a good mattress, decent pillows and a comfy duvet."
  }
}

Step 5: Showing the data in dom:

Just paste the following code which will render the data. the main data is stored int the rawAdvice which just return the advice:'......' but cut the fullstop that will make the advice text node more good to look.

return (
        <div className="app">
            <div className={`card ${advice.isFetching ? "fetching" : ""}`}>
                <h1 className="heading"><span>' </span>{rawAdvice}<span> '</span></h1>
                <button onClick={fetchAdvice} className="button">
                    <span>Generate!</span>
                </button>
            </div>
        </div>
    );

now paste the code at the end of export default () => {} brackets.