안녕하세요 👋,

반응 앱 만들기

이 노드 모듈 설치

이제 App.js를 생성합니다.

import React from "react";
import Joke from './Joke'

class App extends React.Component{
  render(){
    return(
      <div>
        <Joke/>
      </div>
    )
  }
}

export default App;

이제 Joke.js에서 Joke라는 구성 요소를 만듭니다.

import React from "react";
import 'bootstrap/dist/css/bootstrap.min.css';
import './Joke.css';
import {Card} from 'react-bootstrap'
const oneLinerJoke = require('one-liner-joke');



class Joke extends React.Component{
    componentDidMount() {
        window.addEventListener('load', this.handleGet);
     }

     componentWillUnmount() { 
       window.removeEventListener('load', this.handleGet)  
     }
    handleGet(){
        const getRandomJoke = oneLinerJoke.getRandomJoke();
        document.getElementById('joke').innerText = getRandomJoke.body;
    }
    render(){
        return(
            <div className="container">
                {/* <input type="text" className="form-control" id="joke" disabled/>                 */}

                <Card>
                    <Card.Body>
                    <h2 id="joke">Try refreshing the page if you can't find the joke. Note: It is not a joke</h2><br /><hr />
                       <button className="btn btn-info nextBtn" onClick={this.handleGet}>Don't click here for next joke 😑</button>
                    </Card.Body>
                </Card>
            </div>
        )
    }
}

export default Joke;

그리고 모든 설정! 이제 콘솔에서 실행할 수 있습니다

GitHub 리포지토리 및 포크 확인

행복한 코딩!