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.
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.
- Basic understanding of HTML, CSS, and JavaScript
- A code editor (VS Code recommended)
- Node.js and npm installed, OR access to GitHub Codespaces
You can view these materials in two ways:
- Online (GitHub Pages): Visit the workshop website
- 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 startInstallation Guide - Set up your React development environment
- GitHub Codespaces setup
- Local setup for macOS and Windows
- VS Code installation
- Node.js and npm installation
Introduction - Understanding React basics
- React project structure
- How React renders components
- Making your first React app modifications
- Basic HTML, CSS, and React integration
| 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 |
- React components and JSX
- State management with hooks
- Event handling
- Component lifecycle
- Styling in React
- React Router for navigation
- API integration with Axios
- Building a Node.js/Express backend
- Frontend-backend communication
- File-based persistent storage
Create a video player component that displays external videos in your React app.
Key Concepts: Functional components, JSX, props, CSS modules
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
Create a custom cursor that follows mouse movements and changes style on hover.
Key Concepts: useEffect hook, event listeners, DOM manipulation, dynamic positioning
Build a responsive navigation bar with routing between multiple pages.
Key Concepts: react-router-dom, styled-components, react-icons, responsive design
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
- 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)
- Start with the Installation Guide - Follow index.html to set up your development environment
- Complete the Introduction - Work through intro.html to understand React basics
- Choose Your Challenge - Pick any challenge based on your skill level, or complete them in order
- Build and Experiment - Each challenge includes complete code and customization suggestions
- Ask Questions - Don't hesitate to experiment and modify the code!
This project is open source and available under the MIT License.
Created by Frontera Devs for the developer community.
Happy Coding! 🚀
If you complete the challenges, share your creations and tag us!