React Project: Sticky Notes App (useReducer Hook)

In this tutorial, I’ll introduce you to the useReducer hook in React by creating a Sticky Note app that has its state managed by a Redux-like store. Setup and completed code is available on GitHub: https://github.com/codebubb/react-sticky-notes-tutorial React Project: Sticky Notes App (useReducer Hook() —————————————————————————— 00:00 Introduction 00:24 Project Overview 02:39 Creating the text area input 06:58 Creating the Redux Reducer / Store 12:41 Using useReducer 13:28 Dispatching the ADD_NOTE action 17:30 Rendering notes on Page 18:43 Styling the Sticky Notes 20:34 Drag and Drop for Sticky Notes 24:54 Deleting notes 30:50 Using the other state items — Follow Me — Twitter: https://www.twitter.com/codebubb Facebook: https://www.facebook.com/juniordevelopercentral/ Blog: https://www.juniordevelopercentral.com/ — Thanks! — So in this React tutorial, I’ll introduce you to the useReducer hook if you’re not already familiar with it and also some basic Redux fundamentals if you’ve never used Redux in your apps before. We’ll be creating a simple Sticky Notes app that manages state by using the useReducer hook. If you’ve not come across Redux before, you’ll learn how to use dispatch actions to our app’s store and update the site object which represents the sticky notes created by the user. As a bit of an aesthetic challenge, we’ll create a drag-and-drop functionality so that any notes the user creates can be moved around the page. The two actions we’ll create in our Redux store are for adding new notes and towards the end of the video, we’ll create a delete action that removes the notes from the Redux state. As a final demonstration we’ll also create some meta information, also inside of our Redux store, to display how many notes have been created and also the time of when the last note was created. Hope you enjoy this React Redux tutorial focusing on the useReducer hook! Let me know in the comments below what you think. Channel Handle @codebubb