React Ecosystem Learning Repository

A comprehensive collection of learning projects and exercises covering the React ecosystem, including React, React Native, Redux, TypeScript with React, and Next.js.

📁 Repository Structure

🔧 Core Technologies

• React - JavaScript library for building user interfaces
• React Native - Mobile app development framework
• Redux - State management library
• TypeScript - Type-safe JavaScript development
• Next.js - Full-stack React framework

📚 Projects & Learning Paths

📱 React Native (/react-native/)

Udemy Course - Maximilian Schwarzmüller (/udemy-max/)

A comprehensive React Native course covering mobile app development from basics to advanced topics:

1. Add Goal App - Basic list management app
2. Guess Number Game - Interactive game with user input
3. Adaptive UI - Responsive design for different screen sizes
4. Navigation - Tab and drawer navigation patterns
5. State Management - Context API and local state
6. Expense Tracker - Financial tracking app
7. User Input & Validation - Form handling and validation
8. Backend Integration - API communication and data persistence
9. User Authentication - Login/signup functionality
10. Phone Features - Camera, location, and device APIs
11. Production Builds - App deployment and optimization
12. Meals App - Complete production-ready application

Technologies Used:

• React Native 0.79.3
• Expo SDK ~53.0.10
• TypeScript ~5.8.3

⚛️ React (/react/)

Scrimba Course - React Basics (/scrimba/react-basic/)

Progressive learning path through React fundamentals:

1. Static Page - HTML/CSS conversion to React components
2. Data-Driven React - Props, state, and dynamic content
3. Interactive Web Apps - Event handling and user interactions
4. Side Effects - useEffect hook and lifecycle methods
5. Tenzies Game - Complete game implementation
6. Assembly Endgame - Advanced project combining all concepts

React Router (/scrimba/react-routers/)

• Van Life Project - Multi-page application with React Router

🔄 Redux (/redux/)

State management learning with Redux Toolkit:

Technologies Used:

• Redux Toolkit 2.8.2
• React Redux 9.2.0
• TypeScript 5.8.3
• Vite 6.3.5

📝 TypeScript with React (/react-with-ts/)

Type-safe React development practices:

Technologies Used:

• React 19.1.0
• TypeScript 5.8.3
• Vite 6.3.5
• React Confetti (for interactive elements)

🚀 Next.js (/next-js/)

Full-stack React applications with server-side rendering:

Project 1 & Project 2

Modern Next.js applications showcasing:

• Server-side rendering (SSR)
• Static site generation (SSG)
• API routes
• File-based routing
• Modern React features

Technologies Used:

• Next.js 15.5.2
• React 19.1.0
• TypeScript 5
• Tailwind CSS 4
• Turbopack (build tool)

🛠️ Development Setup

Prerequisites

• Node.js (v18 or higher)
• npm or yarn package manager
• For React Native: Expo CLI

Getting Started

1. Clone the repository

   git clone https://github.com/Alexander-NM/react-ecosystem.git
   cd react-ecosystem

2. Navigate to any project directory

   cd react-with-ts
   # or
   cd next-js/project-1
   # or
   cd redux

3. Install dependencies

   npm install

4. Start development server

   npm run dev

React Native Projects

For React Native projects, ensure you have Expo CLI installed:

npm install -g @expo/cli
cd react-native/udemy-max/1-add-goal-app
npm install
npm start

📖 Learning Objectives

This repository demonstrates proficiency in:

React Fundamentals

• ✅ Component composition and reusability
• ✅ Props and state management
• ✅ Event handling and user interactions
• ✅ React Hooks (useState, useEffect, custom hooks)
• ✅ Context API for state sharing

Advanced React Patterns

• ✅ Higher-order components
• ✅ Render props pattern
• ✅ Component lifecycle management
• ✅ Performance optimization techniques

State Management

• ✅ Local component state
• ✅ React Context API
• ✅ Redux and Redux Toolkit
• ✅ Async state management

TypeScript Integration

• ✅ Type-safe component development
• ✅ Interface definitions
• ✅ Generic components
• ✅ Type inference and utilities

Mobile Development

• ✅ React Native fundamentals
• ✅ Cross-platform mobile apps
• ✅ Navigation patterns
• ✅ Device API integration
• ✅ Platform-specific code

Full-Stack Development

• ✅ Next.js application architecture
• ✅ Server-side rendering
• ✅ API route development
• ✅ Static site generation
• ✅ Modern build tools (Turbopack)

🎯 Project Highlights

🎲 Tenzies Game (React)

Interactive dice game demonstrating state management and game logic

📱 Expense Tracker (React Native)

Complete mobile app with CRUD operations, authentication, and backend integration

🏠 Van Life Project (React Router)

Multi-page application showcasing routing and navigation patterns

🍽️ Meals App (React Native)

Production-ready mobile application with advanced features

🚀 Technologies & Tools

• Frontend Frameworks: React, Next.js
• Mobile Development: React Native, Expo
• State Management: Redux, Context API
• Type Safety: TypeScript
• Build Tools: Vite, Webpack, Turbopack
• Styling: CSS3, Tailwind CSS, React Native StyleSheet
• Development Tools: ESLint, Prettier

📅 Last Updated

June 2025

📄 License

This repository is for educational purposes. Individual projects may have their own licensing terms.

---

This repository serves as a comprehensive learning journey through the React ecosystem, showcasing practical implementations and best practices across different platforms and use cases.