Random Quote Generator App using ReactJS
React is a JavaScript library used to develop interactive user interfaces. It is managed by Facebook and a community of individual developers and companies. React mainly focuses on developing single-page web or mobile applications. here, we will create a Random Quote Generator App to understand the basics of ReactJS.
Approach: By this article, we are going to create a full React Application from scratch. This application is going to use an API to actually place some data and that is going to be random quotes. We will create an interesting ReactJS API data fetching project from scratch – A React Random Quote Generator App. We’re going to use React on the front end and we’ll make get requests to Advice Slip JSON API. After going through this article, you will have a strong understanding of basic React workflow as well as how to make API requests in React Apps. Learn how to fetch API data with React js.
Advice Slip JSON API: https://api.adviceslip.com/
Modules required:
- npm
- React
Basic setup: Start a project by the following command:
NPX: It is a package runner tool that comes with npm 5.2+, npx is easy to use CLI tool. The npx is used for executing Node packages. It greatly simplifies a number of things one of which is checked/run a node package quickly without installing it locally or globally.
Step 1: create react app by the following command
npx create-react-app quote-generator-react
Step 2: Now, go to the folder
cd quote-generator-react
Project Structure: It will look like the following.
the Src folder will contain mainly 3 files:
- index.js
- App.js
- App.css
Step 3: Now create an index.js file inside the src folder for our random quote generator app.
Step 4: Edit index.html file inside public and change the title of App.
index.html
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <link rel="icon" href="%PUBLIC_URL%/favicon.ico" /> <meta name="viewport" content= "width=device-width, initial-scale=1" /> <meta name="theme-color" content="#000000" /> <meta name="description" content= "Web site created using create-react-app" /> <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" /> <!--Fonts--> <link href= 400;500;600;700;800;900&display=swap" rel="stylesheet" /> <title>Quote Generator</title> </head> <body> <noscript> You need to enable JavaScript to run this app. </noscript> <div id="root"></div> </body> </html> |
Step 5: Edit App.js file in src. In App.js we will create a class-based App component(App Component is the main component in React which acts as a container for all other components.). in this app component we are going to have a State(state is like a global object that contains all of the most important things.) Since this is a really simple object which has no property so we can just write it like this- state = { advice: ” }; In this file, we are using the componentDidMount() method: The componentDidMount() method allows us to execute the React code when the component is already placed in the DOM (Document Object Model). This method is called during the Mounting phase of the React Life-cycle i.e after the component is rendered.
App.js
Javascript
import React from 'react'; import axios from 'axios'; import './App.css'; class App extends React.Component { state = { advice: '' }; componentDidMount() { this.fetchAdvice(); } fetchAdvice = () => { .then((response) => { const { advice } = response.data.slip; this.setState({ advice }); }) .catch ((error) => { console.log(error); }) } render() { const { advice } = this.state; return ( <div className="app"> <div className="card"> <h1 className="heading"> {this.state.advice} </h1> <button className="button" onClick= {this.fetchAdvice}> <span>Give Me Advice</span> </button> </div> </div> ); } } export default App; |
Step 6: Edit App.css file in src. App.css will contain our styling code for our random quote generator app. This is the CSS(to styling app component) file corresponding to App Component.
App.css
CSS
#root, html, body { margin: 0; padding: 0; height: 100vh; box-sizing: border-box; } .app { height: 100%; background: linear-gradient( rgba(9, 9, 121, 100), rgba(0, 212, 255, 100) ); background-size: cover; background-position: center; display: flex; justify-content: center; align-items: center; text-align: center; } .card { background: whitesmoke; width: 40%; height: 30%; display: flex; align-items: center; flex-direction: column; border-radius: 25px; padding: 2%; box-shadow: 10px 10px; } .heading { display: flex; align-items: center; height: 350px; font-family: 'Spartan', sans-serif; } .button { position: relative; outline: none; text-decoration: none; border-radius: 50px; display: flex; justify-content: center; align-items: center; cursor: pointer; text-transform: uppercase; height: 200px; width: 210px; opacity: 1; background-color: #ffffff; border: 1px solid rgba(22, 76, 167, 0.6); } .button span { color: #164ca7; font-size: 12px; font-weight: 500; letter-spacing: 0.7px; } .button:hover { animation: rotate 0.7s ease-in-out both; } .button:hover span { animation: storm 0.7s ease-in-out both; animation-delay: 0.06s; } @keyframes rotate { 0% { transform: rotate(0deg) translate3d(0, 0, 0); } 25% { transform: rotate(3deg) translate3d(0, 0, 0); } 50% { transform: rotate(-3deg) translate3d(0, 0, 0); } 75% { transform: rotate(1deg) translate3d(0, 0, 0); } 100% { transform: rotate(0deg) translate3d(0, 0, 0); } } @keyframes storm { 0% { transform: translate3d(0, 0, 0) translateZ(0); } 25% { transform: translate3d(4px, 0, 0) translateZ(0); } 50% { transform: translate3d(-3px, 0, 0) translateZ(0); } 75% { transform: translate3d(2px, 0, 0) translateZ(0); } 100% { transform: translate3d(0, 0, 0) translateZ(0); } } @media only screen and (max-width: 1007px) { .card { width: 60%; height: 30%; } } @media only screen and (max-width: 600px) { .card { width: 80%; height: 40%; } } |
Step to run the application: Open the terminal and type the following command.
npm start
Output: Open http://localhost:3000/ in browser:
Quote Generator App using React
GitHub Link: https://github.com/bhartik021/quote-generator
Please Login to comment...