Skip to content

README.md

Latest commit

 

History

History
129 lines (89 loc) · 4.93 KB

README.md

File metadata and controls

129 lines (89 loc) · 4.93 KB

Getting Reactive: A React Workshop

A comprehensive hands-on workshop for learning React fundamentals through practical challenges. This workshop is designed by Frontera Devs to help beginners get started with React development.

🎯 Workshop Overview

This workshop consists of an installation guide, an introduction to React basics, and 5 progressive challenges that increase in difficulty. Each challenge teaches different React concepts and best practices.

📋 Prerequisites

  • Basic understanding of HTML, CSS, and JavaScript
  • A code editor (VS Code recommended)
  • Node.js and npm installed, OR access to GitHub Codespaces

🚀 Getting Started

View the Workshop Materials

You can view these materials in two ways:

  1. Online (GitHub Pages): Visit the workshop website
  2. Locally: Clone this repository and open the HTML files in your browser
git clone https://github.com/[YOUR-USERNAME]/GettinReactive.git
cd GettinReactive
# Open index.html in your browser to start

📚 Workshop Structure

Pre-Workshop Setup

Installation Guide - Set up your React development environment

  • GitHub Codespaces setup
  • Local setup for macOS and Windows
  • VS Code installation
  • Node.js and npm installation

Workshop Introduction

Introduction - Understanding React basics

  • React project structure
  • How React renders components
  • Making your first React app modifications
  • Basic HTML, CSS, and React integration

Challenges

Challenge Difficulty Topics Covered View
Challenge 1 ⭐ Beginner Component creation, Props, Embedding media View
Challenge 2 ⭐⭐ Beginner+ State management (useState), Event handlers, Dynamic styling View
Challenge 3 ⭐⭐⭐ Intermediate Effects (useEffect), Event listeners, Dynamic UI View
Challenge 4 ⭐⭐⭐⭐ Intermediate+ Routing (react-router-dom), Multi-page apps, Navigation View
Challenge 5 ⭐⭐⭐⭐⭐ Advanced Full-stack development, Backend API, HTTP requests, Persistent storage View

🎓 What You'll Learn

Core Concepts

  • React components and JSX
  • State management with hooks
  • Event handling
  • Component lifecycle
  • Styling in React

Advanced Topics

  • React Router for navigation
  • API integration with Axios
  • Building a Node.js/Express backend
  • Frontend-backend communication
  • File-based persistent storage

💡 Challenge Details

Challenge 1: Embed a Video

Create a video player component that displays external videos in your React app.

Key Concepts: Functional components, JSX, props, CSS modules

Challenge 2: Dynamic Color-Changing Background

Build an interactive app where users can change the background color with a button click.

Key Concepts: useState hook, random generation, event handlers, conditional styling

Challenge 3: Dynamic Custom Cursor

Create a custom cursor that follows mouse movements and changes style on hover.

Key Concepts: useEffect hook, event listeners, DOM manipulation, dynamic positioning

Challenge 4: Creating a Navbar

Build a responsive navigation bar with routing between multiple pages.

Key Concepts: react-router-dom, styled-components, react-icons, responsive design

Challenge 5: Full-stack React

Create a complete application with a React frontend and Express backend with data persistence.

Key Concepts: REST API, Express.js, Axios, HTTP methods (GET/POST), file system operations

🛠️ Technologies Used

  • React - Frontend framework
  • Node.js & npm - JavaScript runtime and package manager
  • Express.js - Backend framework (Challenge 5)
  • React Router DOM - Client-side routing (Challenge 4)
  • Styled Components - CSS-in-JS styling (Challenge 4)
  • Axios - HTTP client (Challenge 5)
  • React Icons - Icon library (Challenge 4)

📖 How to Use This Workshop

  1. Start with the Installation Guide - Follow index.html to set up your development environment
  2. Complete the Introduction - Work through intro.html to understand React basics
  3. Choose Your Challenge - Pick any challenge based on your skill level, or complete them in order
  4. Build and Experiment - Each challenge includes complete code and customization suggestions
  5. Ask Questions - Don't hesitate to experiment and modify the code!

📝 License

This project is open source and available under the MIT License.

🙏 Acknowledgments

Created by Frontera Devs for the developer community.

Happy Coding! 🚀

If you complete the challenges, share your creations and tag us!