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 App
Open your terminal . Type npm create-react-app quotegenerator or npx create-react-app quotegenerator. You should have your react app created for you.
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 happen here.
Import the Quotebox.js and Colorbox.js file into the App.js file.
We are using a class based react component for the App.js file,
We add quotes, color , author and randomquotes as states because their values are going to be changing. We set an initial value for the states.
Bind our onclick event handler.
The componentDidMount function fetches a quotes.json file containing quotes and author as objects and assign it to the randomquote array when the app loads.
The onclickhandler - gets a random color and set the color state. If the randomquotes has content then update the states of quote and author with a random quote and its author.
In the render function, we create a 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 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.
Assign quote text and author, including the tweet with the props passed.
Colorbox.js
And that's it, you should have your random quote app working.
