React로 임의 견적 기계 구축

24288 단어 reactbeginnersjavascriptcodenewbie


Demo을 보려면 여기를 클릭하십시오.

이 튜토리얼은 React를 사용하여 간단한 임의 인용 생성기를 구축하고 트위터에서 인용을 공유할 수 있는 방법에 관한 것입니다.
이 튜토리얼의 목표는 React 상태 및 함수를 사용하여 간단한 반응 앱을 만드는 방법을 보여주는 것입니다.

앱 폴더 구조



Create-react-app 을 사용하여 Public 폴더를 생성하는 상용구를 생성합니다. 여기에는 component 폴더를 포함할 index.html 파일, src 폴더가 포함됩니다. src 폴더의 루트 수준에는 index.js 및 App.js 파일이 있습니다. 이 앱에는 프런트엔드만 있습니다. 데이터베이스는 QuoteDB.js라는 src 폴더의 루트에 있습니다. 우리는 bootstrap cdn과 font awesome cdn을 사용할 것입니다.

반응 앱 만들기



반응 앱을 만드는 가장 빠른 방법은 npx create-react-app random-quote 명령을 사용하는 것입니다. 이렇게 하면 파일을 준비하기 위한 상용구가 생성됩니다.

앱 구성요소



src 폴더 안에는 create-react-app을 사용하여 생성한 App.js 파일이 있는데 이제 목적에 맞게 수정하겠습니다. 먼저 components라는 폴더를 만들고 그 안에 QuoteAndAuthor.js라는 파일 하나만 만듭니다. 학습 목적으로 구성 요소 폴더를 사용하고 있습니다. src 폴더의 루트에 필요한 모든 파일을 만들 수 있었습니다.

App.js에서 우리는 견적과 작성자를 속성으로 사용하는 상태 객체와 무작위로 견적을 생성하는 generateRandomQuote 함수를 생성합니다. 컴포넌트 폴더에서 react, QuoteAndAuthor.js를 가져오고 src 폴더의 루트에서 데이터베이스를 가져오는 것을 기억할 것입니다. 나중에 두 파일을 모두 만들 것입니다.

또한 다른 클릭에서 견적을 무작위화하는 데 도움이 되는 shuffleQuote 기능도 있습니다. App.js에서 마지막으로 수행할 작업은 generateRandomQuote 함수 및 상태 개체와 함께 QuoteAndAuthor.js 구성 요소를 반환하는 것입니다.

import React, { Component } from 'react'
import QuoteAndAuthor from './components/QuoteAndAuthor';
import quotes from './QuoteDB';

export default class App extends Component {

  //state
  state = {
    quote: quotes[0].quote,
    author: quotes[0].author
  }

  //generate diffrent quote function
  generateRandomQuote = (arr) => {
    //get random numbers
    let num = Math.floor(Math.random() * quotes.length)

    let newQuote = quotes[num];

    //update state
    this.setState({
      quote: newQuote.quote,
      author: newQuote.author
    })

    this.shuffleQuotes(quotes)

  }

  //shuufle quotes function
  shuffleQuotes = (arr) => {
    return arr.sort(function () { return 0.5 - Math.random() });
  }

  render() {
    return (
      <div className="container">
        <h1 className="text-center">Random Quote</h1>
        <QuoteAndAuthor
          generateRandomQuote={this.generateRandomQuote}
          quote={this.state}
        />
      </div>
    )
  }
}

Index.js



index.js 파일은 변경되지 않으며 create-react-app 상용구에서 생성된 기본값을 사용합니다.

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

serviceWorker.unregister();

Index.html



Index.html은 공용 폴더에 있습니다. 우리가 할 유일한 변경 사항은 부트스트랩과 멋진 글꼴 cdn 링크를 추가하는 것입니다.

<!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" />
  <!--
      manifest.json provides metadata used when your web app is installed on a
      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
    -->
  <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />

  <!-- bootstrap-->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
    integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
  <title>Quote Generator - React App</title>
</head>

<body>
  <noscript>You need to enable JavaScript to run this app.</noscript>
  <div id="root"></div>

  <!--font awesome-->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/js/all.min.js"></script>

  <!-- bootstrap-->
  <script src="https://code.jquery.com/jquery-3.5.0.js" integrity="sha256-r/AaFHrszJtwpe+tHyNi/XCfMxYpbsRg2Uqn0x3s2zc="
    crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"
    integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
    crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
    integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
    crossorigin="anonymous"></script>
</body>

</html>

QuoteAndAuthor.js



QuoteAndAuthor.js 파일에서 먼저 반응과 데이터베이스를 모두 가져옵니다. 여기에서는 App.js 파일의 출력만 표시하므로 react 함수를 사용할 것입니다.
QuoteAndAuthor.js 파일에서 기본적으로 전달되지 않으므로 QuoteAndAuthor 함수에 props를 전달한 다음 액세스할 수 있도록 quote 및 generateRandomQuote를 분해해야 합니다.
두 개의 버튼이 있습니다. 하나는 견적을 생성하고 다른 하나는 트위터에서 견적을 공유하는 버튼입니다.

import React from 'react'
import quotes from '../QuoteDB'

export default function QuoteAndAuthor(props) {

    const { quote, generateRandomQuote } = props;
    return (
        <div className="card" >

            <div className="card-body">
                <p className="card-text">{quote.quote}</p>
                <h5 className="card-title">- {quote.author}</h5>
                <button
                    onClick={() => { generateRandomQuote(quotes) }}
                    type="submit">
                    <i class="fas fa-mouse"></i> Generate Quote</button>
                <button
                    className="ml-3"
                    onClick={() => {
                        generateRandomQuote(quotes);
                        window.open('https://twitter.com/intent/tweet/?text=' + encodeURIComponent(quote.quote + '--' + quote.author))
                    }}
                    type="submit"><i class="fab fa-twitter"></i> Share Quote</button>
            </div>
        </div>
    )
}

데이터 베이스



이 프로젝트의 경우 데이터베이스는 QuoteDB.js 파일에 있으며 개체가 있는 배열입니다. 또한 다른 구성 요소와 파일이 액세스할 수 있도록 이 파일을 내보내야 합니다.

const quotes = [
    {
        "quote": "Forget all the reasons why it won't work and believe the one reason why it will",
        "author": "Unknown"
    },
    {
        "quote": "Always do what you are afraid to do",
        "author": "Ralph Waldo Emerson"
    },

    {
        "quote": "Don’t be intimidated by what you don’t know. That can be your greatest strength and ensure that you do things differently from everyone else.",
        "author": "Sara Blakely"
    },
    {
        "quote": "If you keep on doing what you've always done, you will keep getting what you've always gotten.",
        "author": "Unknown"
    },
    {
        "quote": " For God so loved the world that he gave his one and only Son, that whoever believes in him shall not perish but have eternal life. John 3:16",
        "author": "Jesus Christ"
    },
    {
        "quote": "The surest way to find your dream job is to create it.",
        "author": "Unknown"

    }
]

export default quotes;

결론: React로 임의 인용 기계 구축



create-react-app을 사용하여 간단한 임의 견적 기계를 만들 수 있습니다. 우리가 배운 것 중 일부는 상용구를 생성하는 npx create-react-app을 사용하여 반응 앱을 만드는 것을 포함합니다. App.js에서는 QuoteAndAuthor.js의 반응 상태 구성 요소와 반응 기능 구성 요소를 사용하여 인용문과 작성자를 출력하고 인용문을 생성하는 함수를 만들었습니다.

또한 모든 인용문을 호스팅하는 QuoteDB.js 파일을 만들고 아이콘에 멋진 글꼴을 사용했습니다. 견적 생성기를 성공적으로 만든 것을 축하합니다!. 앱을 시작하려면 npm start를 실행합니다. 즐거운 코딩하세요!
Git 저장소here

Unsplash에 있는 Nathan Lemon의 표지 사진


.ltag__user__id__406226 .follow-action-button {
background-color: #093656 !중요;
색상: #ffffff !중요;
border-color: #093656 !중요;
}



툰데 오예워



Software Developer | Cloud Architect | Photography enthusiast



thinkC
Docker 사업 시작 2.Docker file 만들기
[접미사 로봇 DP] LOJ#6071.'2017 산동 1차 훈련Day5'문자열

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage