React starter guide

Check it out on your browser: React starter guide

Note

No Create-React-App

Intro

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. Keep in mind the best resource for React is always their official docs

• 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.

Some aditional resources

Tip

Try checking these out while or after finishing this guide

• Eve Porcello - React Essential Training (2022)
• PedroTech - ReactJS Course (2023)
• Ihechikara Abba - React Best Practices to up your game (2024)
• Reed Barger - React Router Cheatsheet (2021)
• GeeksforGeeks - Functional vs Class components (2023)

Other stuff

Additional thanks to orderedlist for the fantastic gh pages theme.