Build a Random Quote Generator in React JS

Build a Random Quote Generator in React JS

Table of Contents

1. Introduction
2. Creating a New Folder and Opening in VS Code Editor
3. Cleaning the Default React Project
4. Changing the Project Title
5. Creating the Folder Structure
6. Creating the Random Code Component
7. Designing the HTML Structure for the Component
8. Importing and Adding Images to the Component
9. Changing the Background Color of the React Project
10. Styling the Random Code Component
11. Adding Functionalities to the Reload and Twitter Sharing Buttons
12. Conclusion

Introduction

In this video, we will create a random code generator using React.js. The generator will display a code and its author name, and also provide a button to generate a new random code. Additionally, we will add a button to share the code on Twitter. Let's get started!

Creating a New Folder and Opening in VS Code Editor

To begin, we will create a new folder called "Random Code" and open it in the VS Code editor. This folder will serve as the workspace for our React project.

Cleaning the Default React Project

Next, we will clean up the default React project. We will remove the imported logo, the default class name, and the header tag from the App.js file.

Changing the Project Title

We will change the title of the project by modifying the index.html file in the public folder. By updating the title, we can personalize our project.

Creating the Folder Structure

In the src folder, we will create a new folder called "components". Inside the "components" folder, we will create an "assets" folder. Furthermore, we will create a separate folder for our random code component.

Creating the Random Code Component

Inside the random code component folder, we will create a new file called randomQuote.jsx. This file will contain the code for our random code generator component. Additionally, we will create a CSS file (randomCode.css) to style the component.

Designing the HTML Structure for the Component

In the randomQuote.jsx file, we will design the HTML structure for our random code generator component. This structure will include a container div, a code div, a line div, a bottom div, and an icons div.

Importing and Adding Images to the Component

We will import two image icons - a reload icon and a Twitter icon - into our component. These icons will be used for the reload button and the Twitter sharing button. The images will be stored in the assets folder.

Changing the Background Color of the React Project

To enhance the visual appeal of our project, we will change the background color. By updating the index.css file, we can set a new background color for our React project.

Styling the Random Code Component

In the CSS file (randomCode.css), we will add styles to the different elements of our random code generator component. These styles will include properties for the container, code, line, bottom, author, and icons.

Adding Functionalities to the Reload and Twitter Sharing Buttons

To make the random code generator interactive, we will add functionalities to the reload button and the Twitter sharing button. Clicking the reload button will generate a new random code, while clicking the Twitter sharing button will open a new tab to share the code on Twitter.

Conclusion

In this video, we successfully created a random code generator using React.js. The generator displays a code and its author name, and allows users to generate new random codes and share them on Twitter. With the completion of this project, we have gained practical experience in working with React.js and building interactive components. Thank you for watching, and stay tuned for more projects!