Skip to content

vonschappler/Ultimate-React

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Ultimate React Course Repository

This course is organized into a "folder per section" structure, where each section which contains code has its own folder. Any course resources/materials provided were not pushed to the repository.

What is published here is the result of the code produced on each class, with their commits to match what was done on them. For detailed personal notes taken during the classes, check the wiki.


Sections Overview:

1. A first look at React

This section is focused in providing a first look over React.

Notes about this section can be found here.



2. Review of Essential JavaScript for React

This section is focused in reviewing some of the basic concepts of JavaScript required to create React applications.

Notes about this section can be found here.



3. Working with Components, Props and JSX

This section is focused on presenting the concepts of Components, Props and JSX used by React.

Notes about this section can be found here.

Project Pizza Menu:

The code for the project completed can be found here.

Coding challenge 01:

The code for the challenge can be found here.

Coding challenge 02:

The code for the challenge can be found here.



4. State, Events and Forms: Interactive components

This section is focused on the creation of interactive components in react, by using states, events and forms.

Notes about this section can be found here.

Project Far Away Travel list:

The code for the project completed can be found here.

Coding challenge 03:

The code for the challenge can be found here.

Exercise 01:

The code for the exercise can be found here.

Coding challenge 04:

The code for the challenge can be found here.



5. Thinking in React: State Management

This section is focused on providing details on how and when use states in React.

Notes about this section can be found here.

Project Far Away Travel list:

The code for the project completed can be found here.

Exercise 02:

The code for the exercise can be found here.

Exercise 03:

The code for the exercise can be found here.

Coding challenge 05:

The code for the challenge can be found here.



6. Thinking in React: Components, Composition and Reusablity

This section is focused in creating an application using Composition, how to make components reusable, explaining how to split an application into components and how to build layouts using React.

Notes about this section can be found here.

Project usePopcorn (version 1):

The code for the project completed can be found here.

Coding challenge 06:

The code for the challenge can be found here.



7. How React works behind the scenes

This section is focused in presenting the concepts of how React works, while discussing concepts such as instances, render phases, diffing and making use of the key prop to reset states.

Notes about this section can be found here.

Project howReactWorks:

The code for the project completed can be found here.

Project eat'n split (version 2):

The code for the project completed can be found here.



8. Effects and Data Fetching

This section is focused in presetings how to work Effects and Data Fetching in React.

Notes about this section can be found here.

Project usePopcorn (version 2):

The code for the project completed can be found here.

Coding challenge 07:

The code for the challenge can be found here.



9. Custom Hooks, Refs and more State

This section is focused in the creation of custom hooks, refs and states in React.

Notes about this section can be found here.

Project usePopcorn (version 3):

The code for the project completed can be found here.

Coding challenge 08:

The code for the challenge can be found here.



10. React before hooks: Class-based React

This section is focused in presenting how React code was written before the hooks implementation.

Notes about this section can be found here.

Project Classy Weather:

The code for the project completed can be found here.

Exercise 04:

The code for the exercise can be found here.



11. The advanced useReducer hook:

This section is focused in presenting how to use useReducer hook in React.

Notes about this section can be found here.

Project React Quiz:

The code for the project completed can be found here.

Coding challenge 09:

The code for the challenge can be found here.



12. React Router: building Single-page Applications (SPA)

This section is focused on the creation of a single page application (SPA) using the React Router 3rd party libary using Vite.

Notes about this section can be found here.

Project WorldWise (version 1):

The code for the project completed can be found here.



13. Advanced State management: the Context API:

This section is focused on presenting use of Context API for advanced state managment in React.

Notes about this section can be found here.

Project Atomic Blog:

The code for the project completed can be found here.

Project WorldWise (version 2):

The code for the project completed can be found here.

Coding challenge 10:

The code for the challenge can be found here.



14. Performance Optimization and Advanced useEffect:

This section is focused in presenting optimization techniques for React applications, by using advanced tools.

Notes about this section can be found here.

Project Atomic Blog (version 2):

The code for the project completed can be found here.

Project Atomic Blog (version 3):

The code for the project completed can be found here.

Coding challenge 11:

The code for the challenge can be found here.



15. Redux and Modern Redux Toolkit (with Thunks):

This section is focused in presenting the concepts behind Redux and Thunks, while using the Modern Redux Toolkit.

Notes about this section can be found here.

Project Redux Intro:

The code for the project completed can be found here.



16. React Router with data loading (v6.4+)

This section is focused in developing a full aplication from scratch using React and Vite.

Notes about this section can be found here.

Project React Fast Pizza (version 1):

The code for the project completed can be found here.



17. Tailwind CSS Crash Course: Styling the App

This section is focused in creating the styling of the previously developed project using Tailwind CSS.

Notes about this section can be found here.

Project React Fast Pizza (version 2):

The code for the project completed can be found here.



18. Adding Redux and Advanced React Router

This section is focused in making use of Redux in conjuction with some advanced React Router.

Notes about this section can be found here

Project React Fast Pizza (version 3):

The code for the project completed can be found here.



19. Setting up the biggest project + styled components

This section is focused in setting up the project and working with styled components, while also going through the process of planning the application.

Notes about this section can be found here

Project Wild Oasis (version 1):

The code for the project completed can be found here.



20. Supabase Crash Course: Building a Back-End

This section is focused in building the back-end for the application using Supabase.

Notes about this section can be found here

Project Wild Oasis (version 2):

The code for the project completed can be found here.



21. React Query: managing remote state

This section is focused in managing remote state, making use of React Query library.

Notes about this section can be found here

Project Wild Oasis (version 3):

The code for the project completed can be found here.



22. Advanced React patterns

This section is focused in presenting some advanced react patterns, such as compund components, render props, and many others.

Notes about this section can be found here

Render props example:

The code for the project completed can be found here.

Compound component example:

The code for the project completed can be found here.

Project Wild Oasis (version 4):

The code for the project completed can be found here.



23. Implementing more features: Authentication, Dashboard, etc

This section is focused in implemeting the final features to our project.

Notes about this section can be found here

Project Wild Oasis (version 5):

The code for the project completed can be found here.



24. Deployment with Netlify and Vercel

Notes about this section can be found here

Project Wild Oasis (version 5):

The code for the project completed can be found here.



25. Overview of Next.js and the "App" Router

Notes about this section can be found here

Project Manualy Server-Side Rendering an application:

The code for the project completed can be found here.

Project Wild Oasis Website (version 1):

The code for the project completed can be found here.



26. Building the website

Notes about this section can be found here

Project Wild Oasis Website (version 2):

The code for the project completed can be found here.



27. Data fetching, caching and rendering

Notes about this section can be found here

Project Wild Oasis Website (version 3):

The code for the project completed can be found here.

Coding challenge 12:

The code for the challenge can be found here.



28. Client and server interactions

Notes about this section can be found here

Project Wild Oasis Website (version 4):

The code for the project completed can be found here.



29. Authentication with NextAuth

Notes about this section can be found here

Project Wild Oasis Website (version 5):

The code for the project completed can be found here.



30. Mutation and Server Actions

Notes about this section can be found here

Project Wild Oasis Website (version 6):

The code for the project completed can be found here.

Coding challenge 13:

The code for the challenge can be found here.



31. Deploying the Application to Vercel

Notes about this section can be found here

Project Wild Oasis Website (version 7):

The code for the project completed can be found here.



32. Using the Pages Router

Notes about this section can be found here

Project Wild Oasis Website (version 8):

The code for the project completed can be found here.