https://github.com/letstayfoolish/advanced-react
Deep dives, investigations, performance patterns and techniques
https://github.com/letstayfoolish/advanced-react
Last synced: 8 months ago
JSON representation
Deep dives, investigations, performance patterns and techniques
- Host: GitHub
- URL: https://github.com/letstayfoolish/advanced-react
- Owner: letStayFoolish
- Created: 2024-09-08T10:39:58.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2024-09-14T08:00:00.000Z (almost 2 years ago)
- Last Synced: 2024-09-15T01:37:00.024Z (almost 2 years ago)
- Language: TypeScript
- Size: 110 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Advanced React Best Practices Repository
This repository contains code examples and projects based on the book [*Advanced React*](https://www.advanced-react.com/). The book is designed to elevate your React knowledge to the next level, covering advanced concepts, strategies, techniques, patterns, and performance optimizations.
## Table of Contents
- [Overview](#overview)
- [Chapters](#chapters)
- [Tech Stack](#tech-stack)
- [Getting Started](#getting-started)
- [Folder Structure](#folder-structure)
- [Best Practices](#best-practices)
- [Contributing](#contributing)
- [License](#license)
## Overview
The goal of this repository is to help developers master advanced React concepts by providing practical examples, best practices, and strategies. The repository is organized into multiple chapters, where each chapter covers a different topic from the book *Advanced React*.
Key topics include:
- Advanced React patterns
- Performance optimizations
- Best-practice architectures
- In-depth investigations of React features
## Chapters
Each chapter corresponds to a chapter from the book and is contained in its own folder within the project. These chapters focus on specific React techniques, strategies, or optimizations.
| Chapter | Description |
|-----------|-------------|
| Chapter 1 | Introduction to Advanced React Concepts |
| Chapter 2 | Elements, children as props, and re-renders |
| Chapter 3 | Configuration concerns with elements as props |
| Chapter 4 | Advanced configuration with render props |
| Chapter 5 | Memoization with useMemo, useCallback and React.memo |
| Chapter 6 | Deep dive into diffing and reconciliation |
| ... | ... |
## Tech Stack
This project uses the following tech stack:
- **React** - A JavaScript library for building user interfaces
- **Vite** - A fast development server and build tool
- **TypeScript** - Strongly typed JavaScript
- **pnpm** - Fast, disk space-efficient package manager
## Getting Started
To get started with this project, you can follow these steps:
1. **Clone the repository:**
```bash
git clone https://github.com/letStayFoolish/advanced-react
2. **Install dependencies using pnpm:**
```bash
pnpm install
```
3. **Navigate to a specific chapter folder:**
```bash
cd chapter-01
```
4. **Run the project:**
```bash
pnpm run dev
```
## Folder Structure
The repository is organized with each chapter as a subfolder in the root directory:
```
├── chapter-01/
│ ├── src/
│ ├── public/
│ └── vite.config.ts
├── chapter-02/
│ ├── src/
│ ├── public/
│ └── vite.config.ts
├── rest of the chapters...
│ ...
└── README.md
```
## Best Practices
Throughout this project, the following best practices are followed:
* Emphasis on clean code and readable architecture
* Use of TypeScript for type safety and maintainability
* Focus on performance optimization with techniques such as memoization, lazy loading, and code splitting
* Implementation of React hooks to simplify state management and side effects
* Following the Component-driven development approach
## Contributing
Contributions are welcome! Please feel free to submit a pull request or open an issue if you have suggestions or improvements.
1. Fork the project
2. Create a feature branch
3. Commit your changes
4. Open a pull request
## License
This repository is licensed under the MIT License.