https://github.com/marvinraj/jokes-generator
a project that generates jokes using REST API and built using ReactJS
https://github.com/marvinraj/jokes-generator
javascript reactjs rest-api
Last synced: 4 days ago
JSON representation
a project that generates jokes using REST API and built using ReactJS
- Host: GitHub
- URL: https://github.com/marvinraj/jokes-generator
- Owner: marvinraj
- Created: 2024-10-01T00:35:30.000Z (almost 2 years ago)
- Default Branch: master
- Last Pushed: 2025-01-09T08:04:08.000Z (over 1 year ago)
- Last Synced: 2025-10-24T01:42:16.575Z (9 months ago)
- Topics: javascript, reactjs, rest-api
- Language: JavaScript
- Homepage: https://marvinraj.github.io/jokes-generator/
- Size: 263 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Jokes Generator - ReactJS
Generates random joke as user clicks on the button.
## Why work on this project?
- practice reactjs
- understand react hooks - useState, useEffect
- understand props
## Reads
1. [react basics](https://react.dev/learn)
2. [random jokes api](https://official-joke-api.appspot.com/random_joke)
3. [api](https://official-joke-api.appspot.com/random_joke)
4. api related
- [how to consume rest api in react](https://www.freecodecamp.org/news/how-to-consume-rest-apis-in-react/)
- [how to integrate api in react - with & without axios](https://sailssoftware.com/how-to-integrate-api-in-reactjs-step-by-step-guide/)
- [how to use js fetch to get data](https://www.digitalocean.com/community/tutorials/how-to-use-the-javascript-fetch-api-to-get-data)
- [understanding react props](https://www.w3schools.com/react/react_props.asp)
- [multiple different ways to fetch data from apis in react - promises, async/await, axios with promises, axios with async/await](https://medium.com/@itsanuragjoshi/fetching-data-from-apis-in-react-best-practices-and-methods-e959e92206f4)
- [3 ways to make api calls in react - XMLHttpRequest, Fetch API, axios](https://builtin.com/software-engineering-perspectives/react-api)
## Components for the webapp
1. header --> title + p
2. joke --> displays joke text
3. footer --> h3 & h4
## How I plan to execute this project
1. structure the entire project
2. create all components
3. work on each component in this order, header --> joke --> footer
4. style it
## What have i learnt?
1. conditional rendering
- no special syntax, works the same way as regular js
2. rendering lists
- inside a component, use map to transform an array of something into an array of li items
- and for each item in a list, it needs to have a key attribute
- useState
3. learnt how to work with useState
4. how to handle events via buttons
## My thought processes as I work on this project
1. decide on the relevant components and structure it
2. i think i need to get a really good grasp on "props", so i'll use this [link](https://legacy.reactjs.org/tutorial/tutorial.html)
3. now, i gotta work on understanding responding to/handling events -- [this link helped](https://react.dev/learn)
4. found a public REST APIs on the Postman API network [this](https://www.postman.com/cs-demo/public-rest-apis/documentation/tfzpqfc/public-rest-apis?entity=request-8854915-86a5b520-e907-4eee-95fd-6dcdc24f8a83)
5. really focused on understanding these --> useState, useEffect, fetch