Check it out on your browser: React starter guide
Note
No Create-React-App
This guide will walk you through setting up a React project using Vite.js as an alternative to Create-React-App (CRA). This guide is structured in a way to introduce you to essential concepts.
- Part 1: Project Setup, Structure and Basic React Info
- Project Initialization with Vite.js
- Directory Structure
- Introduction to React
- JSX
- Part 2: Components and Props
- Function Components
- Class Components
- Component Composition
- Props
- Part 3: State
- State and Lifecycle
- useState Hook
- useEffect Hook
- Part 4: Material UI Implementation
- Installing Material UI
- Using Material UI Components
- Part 5: React Router DOM Implementation
- Installing React Router DOM
- Basic Routing
- Part 6: Final Adjustments
- Optimization
- Deployment
Feel free to navigate through each part. GLHF.
Tip
Try checking these out while or after finishing this guide
- Eve Porcello - React Essential Training
- Joel Olawanle - Getting started React
- Jean-Marc Mockel - React Best Practices
- Ihechikara Vincent Abba - React Router v6
- Reed Barger - React Router Cheatsheet
- Understanding Functional Components vs Class Components
Additional thanks to orderedlist for the fantastic gh pages theme.