Master React Libraries (with Customerly codebase)

Introduces React Router, a popular client-side routing library for React that enables multiple pages without reloads, covers installation with react-router-dom, setup, and core hooks.

Master React libraries with createBrowserRouter in React Router 6.4 to define routes, layouts, and data APIs, including router provider and outlet.

Learn how to use React Router data APIs by creating a loader to fetch todos from a JSON server, render the list and individual todo details, and wire up routes.

Create and delete todos using React Router loader and action, wiring forms to post and delete requests to the API, and consider React Query in the next chapter.

Learn to build routes with the BrowserRouter or createBrowserRouter in React Router, including layouts and outlets, and compare older switch patterns to modern usage.

Learn how React Router enables client-side routing with Link and NavLink components, preventing full page reloads and supporting active-state styling via className or style functions.

Explore the use location hook in React Router to read path name and search query, manage location state for redirects after login, and support private route navigation.

Demonstrates how to use the useMatch hook to detect the current route with route matching, showing home, example, and todos paths and enabling conditional page tracking.

Learn to extract url parameters with the useParams hook, handling id as string or undefined, optionally converting to numbers, and passing params to an API call or React query.

Explore using the useSearchParams hook to read and update query params in React Router, and build a custom useQueryParams hook for streamlined access.

Master react navigation using the useNavigate hook to programmatically move between routes, passing state, using replace to alter history, and applying it in buttons and effects.

Explore how React Query handles caching and revalidation to fetch API data with minimal boilerplate. Use small hooks to manage data efficiently in stateful web apps.

Install react query in the project folder and wrap the app with the query client provider, creating a new client with global options and query and mutation caches.

Create an Axios-based API client for a React app, supporting get, post, put, delete, and patch with path, params, body, headers, and options, plus token handling.

Learn to use the useQuery hook in React Query to fetch todos, manage loading and caching with a query key array, and customize options like onSuccess and enabled.

Explore paginated queries in a React app by fetching todos with page and limit params, parsing the link header, and building a page navigator using search params.

Learn how to implement infinite queries with useInfiniteQuery, configure getNextPageParam, fetchNextPage, and select results to merge pages for seamless pagination.

Set initial data or placeholder data in React Query to control loading states and cache behavior for todos, illustrating persistent cache versus temporary placeholders for a better user experience.

Explore how post, put, and delete requests mutate data using react query mutations, implement a post todo mutation with a payload, and invalidate the get query to refresh data.

Learn to invalidate queries after mutations using the query client and onSuccess callbacks in React Query. Discover how to update cached data with setQueryData and selectively refresh the get query.

Explore prefetching with React query by prefetching a todos query via the query client and matching keys before navigation, while weighing data usage and boilerplate considerations.

Compare context-based state sharing with Recoil and Redux, noting Recoil's lower boilerplate and selective rerenders via atoms, while Redux emphasizes middleware.

Explore Recoil atoms by building a counter with a dedicated atom, sharing state across components, and using useRecoilState, useRecoilValue, and useSetRecoilState, all under a UI atoms structure.

Create complex derived state with selectors in Recoil by combining counter and input text atoms; optimize renders and explore selector creation with get function and dev mode configuration.

Learn how to persist Recoil atoms across sessions with the Recoil persist effect. Configure the key and local storage to save theme, counter, and drafts.

Explore how i18next enables translation for globally used React apps, covering translation formats, translation files, and features like context, interpolation, and plurals.

Install i18next and react-i18next, configure i18n.ts with resources and namespaces, implement useTranslation and t to display translations, and enable language switching with a fallback to English.

Configure and optimize i18n in next apps by using http backends, chaining with local storage caching, and loading translations from public locales to ensure multilingual support.

Install a browser language detector package for Next.js, delete the language setting to enable fallback, and rely on the browser language or accept-language header to auto-detect Italian or English.

Master the basics of internationalization with i-80 next using the translation hook, accessing t and i18n, and dynamically changing language, resources, options, and default namespace.

Explore interpolation in internationalization libraries to inject dynamic words into translations. Pass variables and objects, use double brackets or custom prefixes, and plan for object changes to keep translations stable.

Learn how to implement plurals and context in translations using count keys, including singular/plural forms, ordinal plurals, and gender-based contexts.

Explore nesting translations in i18n with dynamic variables and plural forms, using the t function to compose keys across languages and handle number and currency formatting with polyfills.

Master Localazy for app internationalization by managing translations with CLI and API, mixing machine learning and human translators, glossaries, screenshots, and CDN delivery.

Learn why avoiding copy paste improves performance, avoids deprecated libraries and licensing issues, and helps you learn by rewriting code to understand function behavior.

Master updating nested recoil atom state immutably with the immutability helper by Kolodny, using the update function to modify only targeted children or arrays.

Avoid duplicating translations by splitting a single large translation file into 2–3 files. Reuse the same IDs for identical words to cut localization costs and shrink bundle size.

Explore the editors, terminals, and other tools a full stack developer uses. Access a curated page of tool links via the lesson references to receive it by email.

I decided not to include a test project in this course, since we have already seen enterprise level production examples and the course isn't for React beginners.

Leave honest feedback on Udemy to help others and guide improvements. Connect with the author via Udemy, the customer chat, or Igor zanella.dev and social networks like LinkedIn and Twitter.