Core Concepts of the Project
Introduction to Components, Functions and Hooks
Before getting started with the actual implementation of the birthday reminder 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 birthday reminder 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 birthday reminder application can be written in the form of functions using JavaScript. This defines logic for actions like displaying person details in the website. Let’s look into necessary functions we used in this application.
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:
| <button onClick={handleClick}>Click Me</button> |
useState()
- It allows you to add state to functional components.
- It's used to store and update dynamic values in the component.
- Syntax:
| const [state, setState] = useState(initialValue); |
In the next lesson, we will get into the actual implementation and styling of the application.


