marvinraj/jokes-generator

a project that generates jokes using REST API and built using ReactJS

Jokes Generator - ReactJS

About this project

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
2. random jokes api
3. api
4. api related
   • how to consume rest api in react
   • how to integrate api in react - with & without axios
   • how to use js fetch to get data
   • understanding react props
   • multiple different ways to fetch data from apis in react - promises, async/await, axios with promises, axios with async/await
   • 3 ways to make api calls in react - XMLHttpRequest, Fetch API, axios

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
3. now, i gotta work on understanding responding to/handling events -- this link helped
4. found a public REST APIs on the Postman API network this
5. really focused on understanding these --> useState, useEffect, fetch