React: from zero to hero

Hey! You can get full-stack developer masterclass for $12 here.

Welcome to the repository of my complete lesson on React titled From Zero to Hero. Here, you will find all the folders and files necessary to write code in React, in clean code, with practices ranging from beginner to advanced.

React or Next.js?

React

React is a JavaScript library primarily used for building user interfaces. It operates on client-side rendering (CSR), where UI elements are dynamically generated in the browser. This approach is excellent for applications where interactivity and stateful components are crucial, such as in Single Page Applications (SPAs) or complex, feature-rich web apps.

Advantages:

• React's component-based architecture promotes reusability and maintainability of code. The virtual DOM implementation enhances UI performance by minimizing expensive DOM updates.
• React supports a wide ecosystem of third-party libraries for extended functionalities like routing, state management, and more.

Use Cases:

• Developing dynamic SPAs.
• Building mobile apps with React Native.
• Applications behind login walls where SEO isn't a priority.

Next.js

• Next.js is a React framework that offers additional functionality, including server-side rendering (SSR) and static site generation (SSG). This setup pre-renders pages on the server, which improves SEO and the performance of initial page loads.

Advantages:

• Automatic code splitting and optimized loading increase performance.
• Built-in features like file-system-based routing and API routes streamline development.
• Enhances SEO by serving pre-rendered content, making it more accessible to search engines.

Use Cases:

• Websites that benefit from SEO, such as blogs, e-commerce sites, and marketing websites.
• Projects requiring improved initial load time and performance.
• Combining static and dynamic content effectively.

Choosing Between React and Next.js

The choice between React and Next.js should be driven by the specific needs of the project:

• React is preferable for projects that prioritize flexibility and are heavily client-side oriented, where the complexity of user interactions does not necessitate SSR or SEO isn't a concern.
• Next.js is ideal for projects that benefit from SSR, need good SEO out of the box, and aim for faster page load times on initial visits.

In essence, while React provides the foundational UI building blocks, Next.js extends these capabilities to offer a more integrated development experience, especially beneficial for projects where performance, SEO, and ease of development are priorities​ (FreeCodeCamp)​​ (LogRocket Blog)​​ (Vetted Talent Hub)​​ (Refine OS)​​ (Revelo Devs)​​ (DebugPointer)​​ (Rollbar)​.

Chapters

1. Create an app
2. React or Next.js
3. Structure
4. Vite.js
5. Deployment
6. JSX
7. Fragments
8. Linter
9. Clean code
10. Typescript
11. Components
12. Router
13. Navigation / Link
14. Queries
15. Params
16. Children
17. Pages
18. Layout
19. useState
20. Lifecycles
21. Props
22. Hooks
23. Dynamic styling
24. SASS
25. Fetching
26. Events
27. Context
28. Conditional Rendering
29. Lists
30. Forms
31. React-use
32. useEffect
33. useCallback
34. useTransition
35. Suspense
36. View transition - trouver une librairie
37. Shadcn
38. Desktop apps
39. Axios
40. React-Query
41. Portals
42. useMemo
43. useReducer

Thank you !