Course Code for Building Essential UI Data Elements in React on Pluralsight
| Course | Release Date |
|---|---|
| Using Hooks in React 18 | November 2022 |
| What is React | August 2022 |
| What's New in React 18 | May 2022 |
| Data and UI Patterns in React (this course) | December 2021 |
The main branch here is the latest updates to the Pluralsight course Building Essential UI Data Elements in React. This GitHub repo includes the final code for all the modules in the course
In this course, Building Essential UI Data Elements in React, you’ll learn to. Build the front end browser based user interfaces, and the basics of the backend processing on a node server to read and update data presented in the front end React web application.
First, you’ll explore the three most common data relationship scenarios used when building data backed real world React applications. The three data relationships we will concern ourselves with are single table, 1-to-one, 1-to-many, and many-to-many.
Next, you’ll discover all the details necessary to build a client only version using those relationships. Finally, you’ll learn how to build out a complete backend in Node that supports persisting the data from all three relationships, through a REST server built in node and finally persisted backed to the the database 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 both small home grown web site projects, as well as full enterprise applications.
- Install Node 16 (latest-verson) with NPM 17.
- Clone this repository. -
https://github.com/pkellner/pluralsight-building-essential-ui-data-elements-in-reactor download the zip - **Set your default directory to which module you want (example:
cd m3-building-a-notes-react-app-cd clip-03-nextjs-eslint-setup - Install Node Packages with Dependencies. -
npm install
Each of the folders here represent one module of the course. In each folder, there are subfolders that represent the completed code at the end of each clip. Where this is no clip reference, either there is no code in that clip or nothing changed from the previous clip.
Once in a clip directory, the easiest way to test the app is to first install the packages by typing at the root of that directory (in a terminal window or DOS prompt)
npm install
Then, do run the app you just need type
npm run dev
That will launch the web server on port 3000 where you can browser to it at the url: http://localhost:3000
This course uses the Next.js framework as a demonstraton vehicle for React Hooks. If you want to know more about Next.js you should watch my other course on Pluralsight titled "Building Server-side Rendered React Apps for Beginners". You can find it here.
If you find any problems or issues, feel free to post it as an issue here at this forum and I will look into it as soon as I can. You can also contact me directly at http://peterkellner.net/contact/
I hope you enjoy the course!