Random Quote Generator.
One of the Frontend Libraries projects in freecodecamp is building a random quote machine using React. Well, I am happy to walk you through the process. let’s get started.
Set up React Application
Open your terminal. Type
npm create-react-app quotegenerator of
npx create-react-app quotegenerator You should have your React app created for you.
Create Component files
Quotebox.js — Handle the quote changes.
Colorbox.js — Handle the color changes.
Let’s explain what happens here.
- We import the Quotebox.js and Colorbox.js component files into the App.js file.
- We are using a class-based React component for the App.js file.
- We add quotes, color, author, and random quotes as states because their values will be changing. We set an initial value for the states.
- We bind the onClick event handler.
- The componentDidMount function fetches a quotes.json file containing quotes and authors as objects and assigns it to the randomquote array when the app loads.
- The onClickHandler function— gets a random color and set the color state. If the randomquotes has content then it updates the state of the quote and author with a random quote and its author.
- In the render function, we create a Twitter tweet variable and assign a tweet link containing the quote and author.
- Lastly, we return the Colorbox .js component and pass color as props, likewise the QuoteBox.js and pass the states and tweet as props.
- Quotebox.js is a functional-based React component, we create a styling function and add the color state where necessary.
- We display the quote container and text (quote and author)including the tweeting button.
And that’s it, you should have your random quote app working.