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.
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 and not by words.
Now, we will resume from the point where we left in our previous article, React Journey: Part 1 — Getting Started. For this article, we will head in this direction:
- Create State
- Create Props
- Create Events
- Create Hooks
NOTE: We will showcase only the snippets of code in this article to keep it short and crips. If you want to view the entire code base feel free to clone the repository and view the entire file, the links are given at the bottom of the article.
You have to sit quietly and decide what state your app wants. Here, we are talking about the main feature state on which your app’s life will be dependent upon. In our Notesy app case, this is the array of notes that our app holds in such a manner that it can be populated as list of cards on…