Introduction - vonschappler/Ultimate-React GitHub Wiki
This wiki was created with a set of personal annotations taken while I was taking the classes from the course The Ultimate React Course 2024: React, Redux & More, by Jonas Schmedtmann.
I was initially taking some personal notes in a single file, which ended too extensive and hard to manage, reason why I decided to convert the set of notes in this wiki.
The repository folder structure was made a bit different than suggested in the course, once it was structured accordingly to the course sections(modules) and not by the set of projects coded during the learning process in the course.
Course Sections/Modules
The sections listed here are organized not alphabetically, but in the order in which they were presented in the course and only sections from which personal notes were taken are listed here.
It's important to note that some sections of the course were simply introductory videos or may not have have presented new content considered by me relevant to take additional notes.
Section/Modules Listing
This section focus on the basic concepts on how to write React code injected directly on a HTML file as well as how to create a brand new project using create-react-app.
This section focus in making a general overview of some basic JavaScript concepts which are used consistently while writing React code.
This section is focused on presenting the concepts of Components, Props and JSX used by React.
This section is focused on the creation of interactive components in React, by using states, events and forms.
This section is focused on providing details on how and when use states in React.
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.
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.
This section is focused in preseting how to work Effects and Data Fetching in React.
This section is focused in the creation of custom hooks, refs and states in React.
This section is focused in presenting how React code was written before the hooks implementation.
This section is focused in presenting how to use useReducer hook in React.
This section is focused on the creation of a single page application (SPA) using the React Router 3rd party libary using Vite.
This section is focused on presenting use of Context API for advanced state managment in React.
This section is focused in presenting optimization techniques for React applications, by using advanced tools.
This section is focused in presenting the concepts behind Redux and Thunks, while using the Modern Redux Toolkit.
This section is focused in developing a full aplication from scratch using React and Vite.
This section is focused in creating the styling of the previously developed project using Tailwind CSS.
This section is focused in making use of Redux in conjuction with some advanced React Router.
This section is focused in setting up the project and working with styled components, while also going through the process of planning the application.
This section is focused in building the back-end for the application using Supabase.
This section is focused in managing remote state, making use of React Query library.
This section is focused in presenting some advanced react patterns, such as compund components, render props, and many others.
This section is focused in implemeting the final features to our project.
This section is focused in presenting how to deploy an application to Netlify and/or Vercel.
This section is focused in presenting the basic concepts of Next.js
This section is focused in progressing with the Next.js website building
This section is focused on presenting concepts required for data manangement
This section is focused in presenting concepts related to interactions between client and server
This section is focused in presenting the concepts related to authentication inside a Next.js application
This section is focused in presenting the concepts related database operations using server actions to create, edit and delete information
This section is focused in preparing the application for deployment on Vercel
This section is focused in presenting the "legacy" Next.js pages router
Coding Challenges
During the course, some coding challenges were suggested. Some of them were concluded with succes, other not. Some of them may have sightly different code from the suggested solution presented by the instructor because of the individual way of code each person has and when those situations happen, the specific code has an additional commit with the provided solution.
Coding Challenges Listing
- Profile Card (version 1)
The code for this challenge can be found here.
- Profile Card (version 2)
The code for this challenge can be found here.
- Date Counter (version 1)
The code for this challenge can be found here.
- Date Counter (version 2)
The code for this challenge can be found here.
- Tip Calculator
The code for this challenge can be found here.
- Text Expander
The code for this challenge can be found here.
- Currency Converter
The code for this challenge can be found here.
- Use Geolocate
The code for this challenge can be found here.
- React Bank
The code for this challenge can be found here.
- React Quiz
The code for this challenge can be found here.
- Workout Timer
The code for this challenge can be found here.
- Fetching number of cabins
The code for this challenge can be found here.
- Updating a reservation
The code for this challenge can be found here.
Developed Projects
The final code for each project developed has its own repository when they reach their final stage of production and they are listed here in order of completion.
The final code presented in the list below also may have differ a bit from the final code presented on this main code repository, since parts of them required some small adaptations in order to work properly with github pages, once their preview are hosted on Github Pages, when possible. What matters is the concept behind them, so both for that purpose, either the final code of the project inside this main repository or from their indivudal repository can be used as reference to check which React Concepts were discussed/taught/learned during the project excecution.
Main Projects Listing
- Pizza Menu: a simple pizza menu
- Far Away: a simple travel planner
- eat'n split: a simple split bill calculator
- usePopcorn: a simple movie catalog with personal ratings
- Classy Weather: a simple weather application to display the weely weather in a given location
- React Quiz: a simple quiz application with fundamentals of React questions
- World Wise: a simple application to manage travel
- Redux Bank: a simple bank application using Redux Toolkit
- Fast Pizza: a full application built from scratch, using vite
- Wild Oasis: another full application built from scratch, using vite, with a backend support and dashboard
- Wild Oasis Website: another full application built from scratch, using Next.js, with features like user login, cabins reservations and more