This repository contains a collection of projects created during a React.js 18 with TypeScript course. Each project focuses on different React concepts and patterns, built using modern tools like Vite, TypeScript, and various React libraries.
Description: First React project setup with Vite
Technologies: React 18, TypeScript, Vite
Focus: Basic React setup, components, and Vite configuration
Key Features:
- Initial project scaffolding with Vite
- Basic React component structure
- TypeScript configuration
Description: Introduction to React Hooks
Technologies: React 18, TypeScript, Vite
Focus: Understanding and implementing React Hooks
Key Features:
- Custom hooks implementation
- Built-in React hooks usage (useState, useEffect, etc.)
- Component examples using hooks
- Reusable components (Button, Card)
Description: Styling in React with styled-components
Technologies: React 18, TypeScript, Vite, styled-components
Focus: CSS-in-JS styling and theme management
Key Features:
- styled-components implementation
- Theme configuration and theming system
- Type-safe styling with TypeScript
- Custom styled components (Input)
Description: React Context API and state management
Technologies: React 18, TypeScript, Vite
Focus: Global state management using Context API and useReducer
Key Features:
- Context API implementation
- useReducer for complex state management
- Theme and user state management
- Auth components demonstration
- Reducer pattern implementation
Description: Client-side routing with React Router
Technologies: React 18, TypeScript, Vite, React Router DOM
Focus: Multi-page application navigation
Key Features:
- React Router DOM setup and configuration
- Route definitions and navigation
- Protected routes with middleware
- Multiple page components
- Route guards and authentication middleware
Description: State management with Redux Toolkit
Technologies: React 18, TypeScript, Vite, Redux Toolkit, React Redux
Focus: Centralized state management using Redux
Key Features:
- Redux Toolkit implementation
- Store configuration
- Slices and reducers
- React Redux integration
- Type-safe Redux with TypeScript
Description: HTTP requests and API integration
Technologies: React 18, TypeScript, Vite, Axios
Focus: Making API calls and handling HTTP requests
Key Features:
- Axios HTTP client setup
- API request handling
- Error handling
- Async operations in React
Description: Complete Todo List application
Technologies: React 18, TypeScript, Vite, Context API
Focus: Full-featured application with state management
Key Features:
- Todo creation, editing, and deletion
- Local storage persistence
- Context API for state management
- Custom hooks (useSaveTodos)
- Modern UI with CSS modules
- Component-based architecture (Header, TodoList, etc.)
Description: Full-stack personal finance management application
Technologies: React 18, TypeScript, Vite, Redux Toolkit, React Router, styled-components, Axios
Focus: Complete application with authentication, routing, state management, and API integration
Key Features:
- Authentication: JWT-based sign-in and sign-up
- Dashboard: Financial overview with balance and transaction filtering
- Transaction Management: Create, edit, and view transactions
- Protected Routes: Authentication middleware
- Theme Support: Light and dark themes with styled-components
- Redux State Management: Auth and theme state
- API Integration: Full CRUD operations with backend API
- Responsive Layout: Sidebar navigation and modern UI
- Account Management: User profile and settings
Architecture:
- Redux Toolkit for state management
- React Router for navigation
- Styled-components for theming
- Axios for HTTP requests
- Custom hooks (useAuth, useTheme)
- Middleware for route protection
- Type-safe implementation with TypeScript
- React 18.3.1: Latest React features and improvements
- TypeScript 5.6.2: Type-safe JavaScript
- Vite 6.0.1: Fast build tool and development server
- React Router DOM 6.28.0: Client-side routing
- Redux Toolkit 2.4.0: State management
- React Redux 9.1.2: React bindings for Redux
- styled-components 6.1.13: CSS-in-JS styling
- Axios 1.7.9: HTTP client
- React Icons 5.4.0: Icon library
- ESLint: Code linting and quality
reactjs-18-com-typescript/
├── primeiro-projeto-vite/ # Initial Vite setup
├── hooks-vite/ # React Hooks examples
├── estilizacoes-vite/ # Styled-components
├── context-api/ # Context API & useReducer
├── react-router-vite/ # React Router
├── redux/ # Redux Toolkit
├── requisicoes-vite/ # API requests with Axios
├── todo-list/ # Todo application
└── personal-finances/ # Finance management app
- Node.js (v16 or higher)
- npm or yarn package manager
- Navigate to the desired project directory:
cd <project-name>- Install dependencies:
npm install- Start the development server:
npm run dev- Open your browser at the URL shown in the terminal (usually
http://localhost:5173)
npm run buildThe production build will be generated in the dist directory of each project.
All projects include these standard scripts:
npm run dev: Start development servernpm run build: Build for productionnpm run preview: Preview production buildnpm run lint: Run ESLint
The projects are organized in a progressive learning path:
- Fundamentals: primeiro-projeto-vite, hooks-vite
- Styling: estilizacoes-vite
- State Management: context-api, redux
- Routing: react-router-vite
- API Integration: requisicoes-vite
- Complete Applications: todo-list, personal-finances
This project is for educational purposes.