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 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 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.
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).
- Create an app
- React or Next.js
- Structure
- Vite.js
- Deployment
- JSX
- Fragments
- Linter
- Clean code
- Typescript
- Components
- Router
- Navigation / Link
- Queries
- Params
- Children
- Pages
- Layout
- useState
- Lifecycles
- Props
- Hooks
- Dynamic styling
- SASS
- Fetching
- Events
- Context
- Conditional Rendering
- Lists
- Forms
- React-use
- useEffect
- useCallback
- useTransition
- Suspense
- View transition - trouver une librairie
- Shadcn
- Desktop apps
- Axios
- React-Query
- Portals
- useMemo
- useReducer
Thank you !