使用 ReactJS 的随机报价生成器应用程序

React 是一个用于开发交互式用户界面的 JavaScript 库。它由 Facebook 和一个由个人开发者和公司组成的社区管理。 React 主要专注于开发单页网页或移动应用程序。在这里，我们将创建一个随机报价生成器应用程序来了解 ReactJS 的基础知识。

方法：通过本文，我们将从头开始创建一个完整的 React 应用程序。这个应用程序将使用一个 API 来实际放置一些数据，这将是随机引用。我们将从头开始创建一个有趣的 ReactJS API 数据获取项目——一个 React Random Quote Generator App。我们将在前端使用 React，并向 Advice Slip JSON API 发出 get 请求。阅读本文后，您将对基本的 React 工作流程以及如何在 React 应用程序中发出 API 请求有一个深刻的理解。了解如何使用 React js 获取 API 数据。

通知单 JSON API： https://api.adviceslip.com/

所需模块：

• npm
• 反应

基本设置：通过以下命令启动项目：

NPX： npm 5.2+自带的包运行工具，npx是好用的CLI工具。 npx 用于执行 Node 包。它极大地简化了许多事情，其中之一是快速检查/运行节点包，而无需在本地或全局安装它。

第1步：通过以下命令创建react app

npx create-react-app quote-generator-react

第2步：现在，转到文件夹

cd quote-generator-react

项目结构：它将如下所示。

Src 文件夹将主要包含 3 个文件：

• index.js
• 应用程序.js
• 应用程序.css

第 3 步：现在在 src 文件夹中为我们的随机报价生成器应用程序创建一个 index.js 文件。

第四步：编辑public里面的index.html文件，修改App的标题。

索引.html

HTML

第 5 步：编辑 src 中的 App.js 文件。在 App.js 中，我们将创建一个基于类的 App 组件（App 组件是 React 中的主要组件，它充当所有其他组件的容器。）。在这个应用程序组件中，我们将有一个状态（状态就像一个包含所有最重要的东西的全局对象。）因为这是一个非常简单的对象，没有属性，所以我们可以像这样写它 - state = { 建议： ” };在这个文件中，我们使用了componentDidMount()方法：componentDidMount() 方法允许我们在组件已经放置在 DOM（文档对象模型）中时执行 React 代码。这个方法在 React 生命周期的挂载阶段被调用，即在组件被渲染之后。

应用程序.js

Javascript

import React from 'react';
import axios from 'axios';
  
import './App.css';
  
class App extends React.Component {
  
    state = { advice: '' };
  
    componentDidMount() {
        this.fetchAdvice();
    }
  
    fetchAdvice = () => {
        axios.get('https://api.adviceslip.com/advice')
        .then((response) =>  {
            const { advice } = response.data.slip;
  
            this.setState({ advice });
        })
  
        .catch ((error) => {
            console.log(error);
        })
    }
  
    render() {
        const { advice } = this.state;
  
        return (
            

                

                    

                      {this.state.advice}
                    
                    
                        Give Me Advice
                    
                
            
        );
    }
}
  
export default App;

第 6 步：编辑 src 中的 App.css 文件。 App.css 将包含我们的随机报价生成器应用程序的样式代码。这是与 App Component 对应的 CSS(to style app component) 文件。

应用程序.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%;
    }
  }

运行应用程序的步骤：打开终端并键入以下命令。

npm start

输出：在浏览器中打开 http://localhost:3000/：

使用 React 的报价生成器应用程序

GitHub链接： https://github.com/bhartik021/quote-generator