React Journey: Part 2 — States, Props, Events and Hooks

Life brought us to the moment where we have to think about how to make our Notesy app functional. In this article we will make our Notesy app interactive such that it can show list of notes, add new notes and delete existing notes. On the way of doing so we will explore states, props, events and hooks.

If you are brand new to React, things will look little messy, because you have to adapt to the mindset of SPA development and mainly component based approach. If you are familiar with basics of JavaScript and dealing with UI using JavaScript, certain things will look like same but different as well. Same-same but different but still same!

Let us first get this straight with states, props, events and hooks; what are they and why you should care:

• State: React component’s local data that can change over time, triggering re-rendering.
• Props: Properties passed from parent components to child components for data flow.
• Event: Actions (e.g., button click) that trigger behavior in a React component.
• Hooks: Functions that allow using state and other React features in functional components.

Some React jargons thrown on your face just like that. Don’t worry, we will explain and understand each of them with code…