React JS Tutorial: Build a Dad Joke Generator by Fetching Data from an API

Learn how to get data from an API using React and the useEffect React Hook. You’ll also learn how to store the data in React state using the useState React Hook, create a loading circle while the data is being fetched, and fetch new data with an onClick event handler.

⏰ TIMESTAMPS ⏰

Install Axios: 1:06

Make API Request with Axios and useEffect: 1:57

Dad Joke API: 3:18

Store Joke Data in State Using useState: 4:54

Create a Loader Using Animated SVG: 7:58

Conditional Rendering Based on State Value: 8:48

Fetch New Data with onClick Event Handler: 13:15

👀 LIVE DEMO 👀

https://dad-jokes-rule.netlify.com/

🗂 DOWNLOADS 🗂

https://www.skillthrive.com/courses/dad-joke-generator

🔗 HELPFUL RESOURCES 🔗

What does Side effects mean in React? https://www.reddit.com/r/reactjs/comments/8avfej/what_does_side_effects_mean_in_react/

Using the Effect Hook: https://reactjs.org/docs/hooks-effect.html

A Complete Guide to useEffect: https://overreacted.io/a-complete-guide-to-useeffect/

SVG Loaders by Sam Herbert: http://samherbert.net/svg-loaders

Axios: https://www.npmjs.com/package/axios

CodeSandbox.io: https://codesandbox.io

Gatsby JS: https://www.gatsbyjs.org/

Emotion JS: https://emotion.sh

React Hooks: https://reactjs.org/docs/hooks-intro.html

Introducing JSX: https://reactjs.org/docs/introducing-jsx.html

👋 FOLLOW US 👋

Instagram: https://instagram.com/skillthrive/

#React #LearnToCode #WebDev

Post Author: hatefull