Building Essential UI Data Elements in React 17
This course will teach you how to build a real world React application that manages multiple types of data relations including single table, one-to-one, one-to-many, and many-to-many.
What you'll learn
Learn to build React applications that manage and persist data from the data relationships found in real world applications. In this course, Building Essential UI Data Elements in React 17, you’ll learn to build front-end browser-based user interfaces. First, you’ll explore the three most common data relationship scenarios used when building React applications. Next, you’ll discover how to build a client-only version using those relationships. Finally, you’ll learn how to build a complete backend in Node that supports persisting the data from all three relationships, through a REST server built in Node, and persisting back through the Prisma ORM to SQLite. When you are finished with the course, you’ll have the skills and knowledge necessary to build real world React applications that manage typical data scenarios found in website projects including enterprise applications.
Table of contents
- Version Check 0m
- Introduction 2m
- The Four Programming Data Patterns You Will Learn in This Course 2m
- Learn the Basics of Single Entity Data Operations 4m
- Understanding One-to-one Data Relationships 5m
- Understanding One-to-many Data Relationships 3m
- Understanding Many-to-many Data Relationships 6m
- What Is Coming for the Rest of the Course 1m
- Introduction Including GitHub Course Demo Locations 2m
- Picking a React Toolchain for Easy App Debugging and Deployments 2m
- Creating a Simple Single Component App with NextJS and ESLint 5m
- Adding the CSS Libraries Bootstrap and Font Awesome to Our React App 4m
- Building the Overall Layout of Our Notes Manager React App 5m
- Adding Local State to Our NoteList React Functional Component 6m
- Extracting NoteList State Management to a Custom React Hook and Takeaways 4m
- Introduction 1m
- Adding Note Creation Functionality That Updates Component State 6m
- Modifying Local Component State with Updating and Deleting Notes 6m
- Using React Context to Avoid Prop Drilling 7m
- Adding a Popup/Modal Dialog for Updating and Adding Notes 7m
- Implementing Our Notes Modal Dialog Using a New Custom React Hook 4m
- Adding Edit Functionality to Our Notes React App 4m
- Running Our Notes App with Inserting and Updating Component State and Takeaways 1m
- Introduction 3m
- Overview of Refactoring Our CRUD Operations 2m
- Refactor CRUD Operations to a Custom React Hook 5m
- Implement NoteAttributes State Management in useNotes React Hook 5m
- Overview of Refactoring useNotes to Separate Entity Functions 1m
- Refactor useNotes to Separate Entity Methods Starting with the Notes Entity 7m
- Coding the Refactor of the NoteAttributes Entity 5m
- Adding a UI to Our Notes App for Our One-to-one Data Relationship 4m
- Takeaways 1m
- Implementing UI for Many-to-many Data Relationships for Note Tags 2m
- Creating Entity Methods to Support Managing State for Notes and Tags 4m
- Create the useEntityNoteOnTags Entity Method 3m
- Update State Management Hook useNotes to Handle Note Tag Management 3m
- Updating Our NoteCard Component to Display Existing Tags on Notes 4m
- Update Our Note Editor Dialog to Handle Adding and Removing Tags Assigned to Notes 6m
- Takeaways 2m
- Introduction 5m
- Understanding the REST Protocol and How Our React App Benefits from It 4m
- Building REST Server for Notes Entity GET and POST Methods 5m
- Adding POST and DELETE REST Methods for Note Entity 4m
- Introducing Prisma as Our Object Relational Mapper to SQLite 2m
- Setting up Our SQLite Database with Prisma 7m
- Updating Our REST API to Use Prisma with SQLite 3m
- Expand REST API to Handle Remaining Four Entities 1m
- From Our Notes App, Persist Our Notes Data Using REST Calls 7m
- Update Our Four Remaining Entities to Persist Data Using REST Calls 2m
- Adding Toast Error Notification Popups to Our App 2m
- Improve Our UI to Be Instantly Responsive on Database Updates with an Optimistic UI 3m
- Takeaways from This Course 2m
About the author
Peter is an independent software consultant, specializing in .NET development from 1985 through 2001, as well as an eleven time Microsoft MVP. He was founder and president of Tufden Inc, where he successfully delivered systems for clinic scheduling, insurance company management and medical claim processing. His solutions included delivering a turnkey medical office management system to over 500 customers nationwide. His passion for the computer dates back to elementary school when he joined his ... more