Course Code for Working With Data in React on Pluralsight
| Course | Release Date |
|---|---|
| AI-Powered React Applications: Building Intelligent Interfaces | February 2025 |
| What is React | January 2025 |
| Working With Data in React (this course) | February 2024 |
| Server Component Fundamentals in React 18 | June 2023 |
| Working with Components in React 18 | February 2023 |
| Using Hooks in React 18 | November 2022 |
| What's New in React 18 | May 2022 |
| Data and UI Patterns in React | December 2021 |
This GitHub repo includes the final code for all the modules in the course
React applications running in browsers often need to retrieve remote data, which could be from databases, web servers, or other sources. Understanding the best methods for incorporating this data into your production application is crucial. In the course "Working with Data in React," you will explore how to leverage React's latest concurrent rendering features, such as Server Components and Server Actions, to establish a data connection. You will learn best practices that facilitate development and maintenance, enable outstanding user interfaces, and provide performant experiences for users of your browser applications. By the end of this course, you will possess the knowledge required to ensure that your applications adhere to the highest standards.
- Install nodejs.org.
- Clone this repository. -
https://github.com/pkellner/pluralsight-react-working-with-dataor download the zip - **Set your default directory to which module you want (example:
cd m4-cd m3-clip-060 - 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
Note: Starting with module 3, clip 120 (/m3/clip-120/package.json) we have a dependency on sqlite. In order to initialize the sqlite database the easiest thing you can do is at a terminal prompt type:
npm run resetdb
If that does not work, you can always run this command by hand, or execute them individually:
npx prisma migrate reset --force || true && npx prisma generate && npx prisma migrate dev --name init && sleep 5 && npx prisma db seed
The reason this is tricky is that we want this to work whether or not the database exists. If you are willing to type a few lines at the command line and use Prisma as it was intended, here is some guidance on that.
When you have a project with no sqlite in the prisma folder, meaning, all you have is the schema.prisma file, you can type:
npx prisma generate
Then, to create your database with tables and seed it, you enter the command:
npx prisma migrate dev --name init
Once you've done that, if you later want to reset the database, you can type:
npx prisma migrate reset --force
Or, like I said, if you run the big command that is in the package.json file, npm run resetdb that will do all of this for you.
If you do have issues, please contact me at http://peterkellner.net/contact/ and I will help you out best I can. I know this is tricky to get right.
Note: If you are getting encryption type warnings it's likely because of the
next.authdefault settings. You can fix this by adding the following to your .env.local or just .env file. They are excluded from the repo by the .gitignore file so you can put them there and they won't be checked in.
NEXTAUTH_URL=http://localhost:3000
NEXTAUTH_SECRET=your-secret-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!