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
Create a folder called Components in your src folder. Add two JavaScript files named QuoteBox.js and Colorbox.js to the Components folder.

Quotebox.js — Handle the quote changes.
Colorbox.js — Handle the color changes.

App.js

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

• 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.

Colorbox.js

And that’s it, you should have your random quote app working.

Random quote generator.