Master React Libraries (with Customerly codebase)

Focused View

Igor Zanella

6:46:19

36 View

1. Introduction

1. Who am I.mp4

01:08

2.1 Course test code repository - GitHub.html

2. Introductions and requirements.mp4

02:21

3.1 Customerly discount.html

3. What is Customerly.mp4

02:48

4.1 Guide to set ESLint and Prettier in Vite.html

4. React + Typescript general review.mp4

14:29

5.1 json-server - GitHub.html

5. JSON Server.mp4

07:23

2. React Router

1.1 React Router docs.html

1. Introduction.mp4

02:01

2.1 createBrowserRouter - React Router docs.html

2. createBrowserRouter.mp4

11:15

3.1 action - React Router docs.html

3. createBrowserRouter action function.mp4

10:58

4.1 loader - React Router docs.html

4. createBrowserRouter loader function.mp4

16:19

5.1 BrowserRouter - React Router docs.html

5. BrowserRouter component.mp4

13:36

6.1 Link - React Router docs.html

6.2 NavLink - React Router docs.html

6. Link and NavLink component.mp4

09:41

7.1 useLocation - React Router docs.html

7. useLocation hook.mp4

04:45

8.1 useParams - React Router docs.html

8. useParams hook.mp4

06:30

9.1 useMatch - React Router docs.html

9. useMatch hook.mp4

05:13

10.1 useSearchParams - React Router docs.html

10. useSearchParams hook.mp4

07:18

11.1 useNavigate - React Router docs.html

11. useNavigate hook.mp4

05:46

3. React Query

1.1 Tanstack Query docs.html

1. Introduction.mp4

01:14

2.1 Installation - Tanstack Query docs.html

2. Installation and first configuration.mp4

02:25

3.1 Axios docs.html

3. Axios client.mp4

12:45

4.1 Queries - Tanstack Query docs.html

4. useQuery hook, options and statuses.mp4

41:11

5.1 Paginated Queries - Tanstack Query docs.html

5. Paginated queries.mp4

24:42

6.1 Infinite Queries - Tanstack Query docs.html

6. Infinite queries.mp4

20:09

7.1 Initial Query Data - Tanstack Query docs.html

7.2 Placeholder Query Data - Tanstack Query docs.html

7. Initial query data and placeholder data.mp4

05:05

8.1 Mutations - Tanstack Query docs.html

8. Mutations.mp4

13:06

9.1 Invalidations from Mutations - Tanstack Query docs.html

9.2 Query Invalidation - Tanstack Query docs.html

9. Query invalidations and update data after mutation.mp4

12:04

10.1 Prefetching - Tanstack Query docs.html

10. Prefetch query.mp4

05:05

4. Recoil

1.1 Core Concepts - Recoil docs.html

1. Introduction.mp4

03:06

2.1 Atoms - Recoil docs.html

2. Atoms.mp4

13:06

3.1 Selectors - Recoil docs.html

3. Selectors.mp4

10:22

4.1 recoil-persist - GitHub.html

4. Recoil Persist.mp4

09:32

5. i18next

1.1 i18next docs.html

1.2 React i18next docs.html

1. Introduction.mp4

01:38

2.1 Getting started - React i18next docs.html

2.2 i18next instance - React i18next docs.html

2. Installation, configuration and init.mp4

11:09

3.1 Add or Load Translations - i18next docs.html

3.2 Backend Fallback - i18next docs.html

3. Backend and fallbacks (+ caching).mp4

21:02

4.1 i18next-browser-languagedetector - GitHub.html

4. Recognize language.mp4

03:32

5.1 useTranslation (hook) - React i18next docs.html

5. How to use (basics).mp4

03:42

6.1 Interpolation - i18next docs.html

6. Interpolation.mp4

07:57

7.1 Context - i18next docs.html

7.2 Plurals - i18next docs.html

7. Plurals and context.mp4

11:40

8.1 Nesting - i18next docs.html

8. Nesting.mp4

07:41

9.1 Localazy.html

9. Localazy.mp4

32:31

6. Tips and tricks

1.1 Why you shouldnt use copy-paste if you are a developer - Medium.html

1. Dont copy paste.mp4

02:05

2.1 immutability-helper - GitHub.html

2. Immutability helper.mp4

03:40

3. Dont do this error in translation files.mp4

01:56

4.1 My Developer Arsenal - IgorZanellaDev.html

4. The tools I use as a Full Stack Developer.mp4

00:32

7. Conclusion

1. Why I decided NOT to do a test project.mp4

00:53

2. Conclusion.mp4

00:58

Description

React Router, React Query, Recoil and i18next on TS, with real code snippets from Customerly production apps codebase!

What You'll Learn?

Master React Router to handle dynamic routing and navigation within your web applications, using real-world examples from Customerly.
Use React Query to simplify data fetching and caching, and optimize your application's performance with examples from the Customerly codebase.
Learn how to leverage Recoil to manage complex state in your React projects, with practical examples from Customerly's production environment.
Understand the power of i18next for internationalization and localization in your React applications, using Customerly's multi-language support as a case study.
Dive into the codebase of Customerly to learn how these four React libraries are used together in a real-world application.
Learn best practices for integrating React Router with React components and state management, and avoid common pitfalls.
Discover how React Query can simplify complex data management tasks, such as pagination and caching, using examples from the Customerly codebase.
Explore the capabilities of Recoil for managing global state in your React applications, with tips and tricks from the Customerly production environment.
Use i18next to provide multi-language support to your React applications, with guidance and examples from Customerly's localization strategies.
Gain real-world experience with the Customerly codebase and learn how to optimize React-based web applications for production environments.

Who is this for?

Beginner React developers who wants to learn libraries to implement in their applications

Developers who are interested in learning best practices for implementing these libraries in a real-world production environment

What You Need to Know?

React fundamentals required, such as components, state and props.

HTML, CSS, Javascript and Typescript knowledge required.

More details

Description
React is the most famous JavaScript framework on the market, which you can use to create web applications, Facebook, Whatsapp, Instagram, Netflix,Â and Dropbox, are only some of the applications which are created on React.
For this reason, IÂ created this course to talk about four libraries IÂ use daily in React.
This course ISÂ NOT for developers who don't know React framework, so don't buy it if you don't know how to use React because we are not seeing it. If you know Italian, you can find my React starter course here on Udemy.
In this course, you will find Customerly apps code snippets. We will also discuss how we used the packages we will see in this course in production environments. This is better than having a simple test project because we can see how these packages behave in production environment applications.
All the packages in this course are used with Typescript, which is a big pro when using React, because it permits you to save from some mistakes in the code and declare clear types.
What do we talk about in this course?
React Router:Â In the React Router course chapter, we will see how to use the last version of React RouterÂ (v6.8) also using new data APIs. We will see how to manage new projects with new React Router functions and old projects with React Router components.
TanstackÂ ReactÂ Query: In the Tanstack React Query course chapter, we learn how to use this powerful library to manage APIÂ requests and save them in the cache. A library sponsored by some big players like GitHub, Vercel, and Retool.
Facebook RecoilJS:Â RecoilJSÂ is a state container library created by Facebook developers. In the Recoil course chapter, we will see how to use the library with atoms and selectors, with some conventions weÂ use in Customerly.
i18next: In the i18next course chapter, we will talk about this fantastic localization framework, and we will also see the react-i18next package. Other than this, we will also see Localazy, a good service that can help us translate our applications.
Tips and tricks: There is a chapter dedicated to some tips on libraries we would have seen and some general development advice IÂ can give for my experience.
You can see the lessons Curriculum here above. You can also see the previews and join the course without risks, thanks to the Money Back Guaranteed by Udemy in the first 30 days!
Who this course is for:
Beginner React developers who wants to learn libraries to implement in their applications
Developers who are interested in learning best practices for implementing these libraries in a real-world production environment

User Reviews

Rating

average 0

Total votes0

Focused display

React

Igor Zanella

Instructor's Courses

Hey, I'm Igor, a Full Stack Developer focusing primarily on Web Development. I work full-time for Customerly, an exciting startup of which I am a partner, but I also freelance.Although I'm only 25, I've been programming since I was 14, studying a range of languages, including C++, Java, PHP, Assembly (yes, really), and eventually HTML, CSS, JS, and more, which ignited my passion for Web Development.After graduating high school with a degree in IT, I spent a few years working as a developer and sysadmin before deciding to become a full-time Freelancer. I've worked on various projects, and you can find some of them showcased on my website.Aside from programming, I have many passions, including martial arts, motorsports, snowboarding, and more.

Udemy

View courses Udemy

Students take courses primarily to improve job-related skills.Some courses generate credit toward technical certification. Udemy has made a special effort to attract corporate trainers seeking to create coursework for employees of their company.