Directory Structure of Random Joke Generator

Organize your project files. For example:

random-joke-generator/

├── public/

│   └── index.html         # HTML template

├── src/

│   ├── components/

│   │   ├── Joke.js        # Component that fetches and displays a joke

│   │   └── Button.js      # Button component to trigger a joke fetch

│   ├── App.js             # Main app component (renders <Joke />)

│   ├── index.js           # Entry point (renders App into DOM)

│   ├── App.css            # Global styles

│   └── index.css          # Default styles

├── package.json           # npm dependencies and scripts

└── README.md

• App.js – The root React component that imports and renders the Joke component inside a heading.  
• components/Joke.js – Defines the Joke component which holds the joke text in state and fetches from the API.  
• components/Button.js – A reusable button that accepts a prop function to call when clicked.  
• CSS files – (Optional) Styles for layout (e.g. centering the joke text and styling the button). The GeeksforGeeks example used simple CSS to center content and style the button.  
• index.html: Main HTML file with a <div id="root"></div> where React will mount.

This structure keeps logic separate: Joke.js handles data fetching and state, while Button.js is a generic button component. The App.js file ties everything together. Inside index.html, we’ll load React and our scripts.