Introduction to Components And Functions

Before getting started with the actual implementation of the QR code generator application, let’s look into the necessary concepts you need to know. In this lesson, we will look into the basic concept behind the actual working of triggering the QR code generator application in JavaScript.

Components

Components play an important role in the React JS framework. Components are based on the ‘break it down to build it’ concept, which means each component is developed individually and then assembled to build a complete user interface. It provides:

• Component reusability across different parts of the application to reduce writing repeated codes.
• The efficient way to test each component, rectify the errors and modify only the specific component.
• Consistent user interface to ensure a uniform look and feel throughout the application.

Functions

The main logic of the QR code generator application can be written in the form of functions using JavaScript. This defines logic for actions like getting input from the user, generating and downloading the QR code in the application. Let’s look into necessary functions we used in this application.

onChange()

• It allows you to handle changes to input elements (like text fields, checkboxes, etc.) in a component.
• It's used to capture user input and update the component's state accordingly.
• Syntax:

onClick()

• It allows you to handle click events on elements (like buttons).
• It's used to trigger actions when the user clicks a button or other clickable element.
• Syntax:

useState()

• It allows you to add state to functional components.
• It's used to store and update dynamic values in the component.
• Syntax:

In the next lesson, we will get into the actual implementation and styling of the application.