Resources for Learning React and the PERN Stack: From Setup to Authentication
Tags: pern, react, postgres, node
Published: 2023-07-15 21:30:18

This post highlights a variety of resources that can help you learn React and the PERN stack ([PostgreSQL](https://www.postgresql.org/), [Express](https://expressjs.com/), [React](https://react.dev/), and [Node.js](https://nodejs.org/)) for building fully functional applications. From tools like Create React App for streamlined setup to comprehensive tutorials and crash courses on React, Material UI, and PostgreSQL, these resources cover essential concepts and techniques. Additionally, there are tutorials on working with APIs and implementing user authentication and login functionality in the PERN stack. By utilizing these resources, you can gain a solid foundation in building React applications and understand how to integrate various technologies to create robust full-stack solutions.

---


![home page app screenshot](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0ayebi0zx4f0dx3yturi.png)

---

## Create React App

[Create React App](https://create-react-app.dev/) is a popular tool that helps you set up a new React project with a pre-configured development environment. It provides a streamlined setup process and allows you to start building React applications quickly. Learning Create React App is important because it simplifies the initial setup of a React project and you can focus more on learning and building React applications, rather than dealing with complex configuration and tooling choices.

### [Full Modern React Tutorial - YouTube](https://www.youtube.com/playlist?list=PL4cUxeGkcC9gZD-Tvwfod2gaISzfRiP9d): 

This YouTube tutorial offers a comprehensive guide to React, covering essential concepts, components, state management, and more. It's a valuable resource for beginners looking to learn React from scratch.

### [React JS Crash Course - YouTube](https://www.youtube.com/watch?v=w7ejDZ8SWv8): 

This crash course on React provides a condensed introduction to React's core concepts and features. It's designed to give you a quick overview and get you up to speed with building React applications.

---


![demo app screenshot car display](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/du0a6vw98z96ysd1mv5m.png)

---

## MUI (Material UI): 

[Material UI](https://mui.com/) is a popular React component library that follows Google's Material Design guidelines. The resources you mentioned provide tutorials and crash courses on using Material UI with React, teaching you how to create visually appealing and responsive user interfaces.

### [Material UI Tutorial - The Net Ninja](https://www.youtube.com/playlist?list=PL4cUxeGkcC9gjxLvV4VEkZ6H6H4yWuS58):

This playlist provides a comprehensive introduction to React by guiding you through building a complete project from start to finish.

### [Material UI Crash Course](https://www.youtube.com/watch?v=_W3uuxDnySQ&list=PLQg6GaokU5CyVrmVsYa9R3g1z2Tsmfpm-):

This video provides a comprehensive overview of React, covering essential topics such as components, state management, JSX, lifecycle methods, hooks, forms, and routing.

---


![demo app screenshot edit car details](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p2rpldf22ptdqghlejoh.png)

---

## APIs: 
These resources cover how to work with APIs in React applications. They introduce you to using popular libraries like [Axios](https://www.axios.com/) for making API requests and guide you through specific examples like fetching weather data from the OpenWeatherMap API.

### [How to Use Weather API for Beginners](https://www.youtube.com/watch?v=MdIfZJ08g2I)

### [React Axios API Requests](https://www.youtube.com/watch?v=ZEKBDXGnD4s)

### [Axios - NPM](https://www.npmjs.com/package/axios)

### [OpenWeatherMap](https://openweathermap.org/forecast5)

---


![demo app screenshot vehicle input](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jkn2cwfwocz6n6sz2nq1.png)

---

## PostgreSQL: 

[PostgreSQL](https://www.postgresql.org/) is a powerful open-source relational database management system. The resources you mentioned include a comprehensive tutorial that covers PostgreSQL from beginner to intermediate level, and a PERN stack course that introduces you to using PostgreSQL along with Express, React, and Node.js.

### [Comprehensive PostgreSQL](https://www.youtube.com/watch?v=qw--VYLpxG4)

### [PERN Stack Course](https://www.youtube.com/watch?v=ldYcgPKEZC8)

---

## Login:

These resources focus on implementing user authentication and login functionality in your React application using the PERN stack. They cover topics like JWT (JSON Web Tokens), user registration, and backend authentication implementation.

### [Add Login Authentication to React Applications](https://www.digitalocean.com/community/tutorials/how-to-add-login-authentication-to-react-applications)

### [Frontend PERN authentication](https://www.youtube.com/watch?v=4TgbH3TM51s)

### [Backend PERN authentication](https://www.youtube.com/watch?v=ykB4KeuxKVI)