Skip to content

Latest commit

 

History

History

React

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
Images
Images
 
 
RandomJoke
RandomJoke
 
 
README.md
README.md
 
 

README.md

My React Practice

Do React, but don't be reactive

<List>

React-TypeScript : Random Joke (2024.07.29)

  • Initial Practice of React-TypeScript

    Today's Random Joke

  • Random Joke API

  • Development Environment

    • npm 8.19.2 / react-typescript 1.0.0 / tsc 4.7.4 / vite 3.0.4 in Replit

  • It isn't rendered in the current Github page.

  • Code

    index.html 
    <!DOCTYPE html>

<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Today's Random Joke</title>
<link rel="stylesheet" href="/style.css">
</head>

<body>
<div id="root"></div>
<script type="module" src="/src/index.tsx"></script>
</body>

</html>
    style.css 
    body {
    font-family: Arial, sans-serif;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    height: 100vh;
    margin: 0;
    background-color: #f0f0f0;
    padding-top: 20px; /* 화면 상단의 공백 조절 */
  }

  .title {
    font-size: 2em;
    margin-bottom: 10px;
    text-align: center;
  }

  .container {
    text-align: center;
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    width: 600px;
  }

  .joke {
    font-size: 1.5em;
    margin-bottom: 20px;
    white-space: pre-wrap; /* Preserve whitespace and handle line breaks */
  }

  button {
    padding: 10px 20px;
    font-size: 1em;
    color: #fff;
    background-color: #007bff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
  }

  button:hover {
    background-color: #0056b3;
  }

  .footer {
    font-size: 0.8em;
    color: #777;
    margin-top: 10px;
    text-align: center;
  }
    src/index.tsx 
    import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import '/style.css';

ReactDOM.render(<App />, document.getElementById('root'));
    src/App.tsx 
    import React, { useState, useEffect } from 'react';

const App: React.FC = () => {
  const [joke, setJoke] = useState<string>('');

  const fetchJoke = async () => {
    try {
      const response = await fetch('https://official-joke-api.appspot.com/random_joke');
      const data = await response.json();
      const formattedJoke = `${data.setup}\n - ${data.punchline}`;
      setJoke(formattedJoke);
    } catch (error) {
      setJoke('Oops! Something went wrong. Please try again.');
    }
  };

  useEffect(() => {
    fetchJoke();
  }, []);

  return (
    <div className="app">
      <div className="title">Today's Random Joke</div>
      <div className="container">
        <div className="joke">{joke}</div>
        <button onClick={fetchJoke}>Random Joke</button>
      </div>
      <div className="footer">2024.07.29 / kimpro82</div>
    </div>
  );
};

export default App;