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)
**[Github respository(Give a star✨)](https://github.com/devishraq/quotes-generator-react)** ## 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() ```
## 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 (

' {rawAdvice} '

); ``` now paste the code at the end of `export default () => {}` brackets.
## Step 6: Running the file In the terminal paste this command: ``` npm run dev ``` Woohhh!This your quotoes generator app using react and vite
------------------------------------------------------------ ### 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/)

ishraq-89

Simple React Project: Quotes generator.

Join Our Newsletter. No Spam, Only the good stuff.