Simple React Project: Quotes generator.
Tags: react, beginners, tutorial, javascript
Published: 2023-06-12 12:28:10

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:



![react-app](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2dyv8kgw6enz3d49lly7.png)
</br>

<u>**[Github respository(Give a star✨)](https://github.com/devishraq/quotes-generator-react)**</u>

## 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
```
<br/>


## 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;
}

```
<br/>

## 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 />)
```
<br/>

## 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.
<br/>
## Step 6: Running the file
In the terminal paste this command:

```
npm run dev
```
Woohhh!This your quotoes generator app using react and vite
<br/> 
------------------------------------------------------------
### Preview Section(Source code and browser)

#### Main:- 
![react-app](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lllyh6vg77d847wgivsj.png)

#### App.jsx:- 

![react-app](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/25o0nybac03gml2ekakc.png)

#### main.jsx:-
 
![react-app](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/83tnqjmanx369woyoeyd.png)

#### index.html:-

![react-app](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4htjsoeuc28lhj8oxdb7.png)

## Final Preview along with code editor:-

![react-app](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ly8rhf07b5m1p3sv5y98.png)


# Links:- 
 - [github repository(Give a star)](https://github.com/devishraq/quotes-generator-react).
 - [JSON API](https://api.adviceslip.com/advice)
 - [axios](https://axios-http.com/)