以React构建的励志引用生成器

励志引用网站是使用React构建的Web应用程序。它展示了激励和鼓舞用户的引用。用户可以浏览一系列的引用，甚至在社交媒体上分享他们的引用。有一个选项可以导航回已阅读的引用，以及一个社交资料的分享按钮。每个引用的背景主题也会随之改变。

最终输出的预览：

以React构建的励志引用生成器

先决条件/使用的技术

React
JavaScript
React中的条件渲染
React中的事件处理

方法：

想法是在首页上显示报价和引用者的名称，我们可以通过一个node软件包轻松完成。这个软件包将提供大量的引文供我们在网站上展示。

在页面上展示一句励志的引文。
允许用户点击一个按钮获取引文。
使用极简、用户友好和可适应的设计。

创建项目的步骤

步骤1： 使用以下命令创建一个新的React JS项目

npx create-react-app inspirationalquotes

步骤2： 切换到项目目录

cd inspirationalquotes

步骤 3： 使用以下命令安装此项目所需的一些npm包：

npm install @divyanshu013/inspirational-quotes

项目结构:

以React构建的励志引用生成器

package.json中更新的依赖项将如下所示：

"dependencies": {
    "@divyanshu013/inspirational-quotes": "^1.0.7",
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
}

示例： 在相应的文件中编写以下代码

这三个文件 index.js ， App.js ，以及 App.css 将位于src文件夹中

// FileName: App.js 
  
import React, { useState, useEffect } from "react"; 
import { getRandom, getAll } from "@divyanshu013/inspirational-quotes"; 
import "./App.css"; 
  
export default function App() { 
    const [quotes, setQuotes] = useState([]); 
    const [currentIndex, setCurrentIndex] = useState(0); 
  
    useEffect(() => { 
        // Fetch all quotes and set them in the state 
        const quotesData = getAll(); 
        setQuotes(quotesData); 
    }, []); 
  
    const handleNextClick = () => { 
        setCurrentIndex((prevIndex) => (prevIndex + 1) % quotes.length); 
    }; 
  
    const handlePreviousClick = () => { 
        setCurrentIndex((prevIndex) => 
            prevIndex === 0 ? quotes.length - 1 : prevIndex - 1 
        ); 
    }; 
  
    const currentQuote = quotes.length > 0 ? quotes[currentIndex] : null; 
  
    const backgroundColors = ["#8cc084", "#b7ebc3", "#ffb37e", "#7fa8d7"]; 
  
    const currentBackgroundColor = 
        backgroundColors[currentIndex % backgroundColors.length]; 
  
    return ( 
        <div className="content" style={{ background: currentBackgroundColor }}> 
            <h1 id="top">GeeksforGeeks</h1> 
            <h1>Inspirational Quote Generator</h1> 
            {currentQuote && ( 
                <blockquote> 
                    <p>"{currentQuote.quote}"</p> 
                </blockquote> 
            )} 
            {currentQuote && <h2>{currentQuote.author}</h2>} 
            {currentQuote && <h3>{currentQuote.source}</h3>} 
            <div className="button-container"> 
                <button onClick={handlePreviousClick}>Previous</button> 
                <button onClick={handleNextClick}>Next</button> 
                <button 
                    onClick={() => 
                        window.open( 
`https://www.facebook.com/sharer/sharer.php?u=${window.location.href}` 
                        ) 
                    } 
                > 
                    Share on Facebook 
                </button> 
            </div> 
        </div> 
    ); 
}

CSS

/* FileName: App.css */
html, 
body { 
    height: 100%; 
    margin: 0; 
    padding: 0; 
} 
  
body { 
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, 
        Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; 
    text-align: center; 
    color: rgba(255, 255, 255, 0.8); 
    background: linear-gradient(45deg, #f0f2ef, #f0f1f0); 
  
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: center; 
    min-height: 100vh; 
    margin: 0; 
} 
  
  
.content { 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: center; 
    padding: 1rem 2rem; 
} 
  
#top { 
    color: green; 
} 
  
blockquote { 
    background-color: rgba(255, 255, 255, 0.2); 
    padding: 20px; 
    border-radius: 5px; 
    margin: 10px; 
} 
  
button { 
    display: inline-block; 
    padding: 10px 20px; 
    font-size: 16px; 
    text-align: center; 
    text-decoration: none; 
    border: 2px solid #23870e; 
    border-radius: 5px; 
    background-color: #23870e; 
    color: #ffffff; 
    cursor: pointer; 
    transition: background-color 0.3s ease, color 0.3s ease, border 0.3s ease; 
    margin: 10px; 
} 
  
  
.button-container { 
    display: flex; 
    justify-content: center; 
}

运行项目的步骤:

步骤1: 在终端中输入以下命令。