how to create Jokes Generator using react
In this tutorial, we will create a simple Jokes Generator using React. Each time you trigger the generate button, a new joke will render.
How to Create a Jokes Generator using React
In this tutorial, we will create a simple Jokes Generator using React. Each time you trigger the generate button, a new joke will render.
Step 1: Set Up Your React Project
First, make sure you have Node.js and npm installed. Then, create a new React project using Create React App:
npx create-react-app jokes-generator
cd jokes-generator
Step 2: Create the Joke Component
Create a new file called JokeGenerator.js in the src directory and add the following code:
import React, { useState } from 'react';
const JokeGenerator = () => {
const [joke, setJoke] = useState('');
const generateJoke = async () => {
const response = await fetch('https://official-joke-api.appspot.com/random_joke');
const data = await response.json();
setJoke(`${data.setup} ${data.punchline}`);
};
return (
Joke Generator
{joke}
);
};
export default JokeGenerator;
Step 3: Use the Joke Component
Open src/App.js and modify it to include the JokeGenerator component:
import React from 'react';
import JokeGenerator from './JokeGenerator';
import './App.css';
function App() {
return (
);
}
export default App;
Step 4: Run Your Project
Finally, run your project using the following command:
npm start
Open your browser and navigate to http://localhost:3000 to see your Jokes Generator in action!
What's Your Reaction?
