Name: Laravel React Jsx Starter Kit
Author: ghostcompiler

# Laravel React JSX Starter Kit

A modern Laravel + React JSX starter kit that recreates Laravel’s React starter architecture using clean JSX instead of TypeScript.

Built for developers who prefer JavaScript while maintaining a scalable, production-ready full-stack structure.

This starter kit combines Laravel’s backend power with React’s component-driven frontend architecture, making it ideal for SaaS apps, dashboards, admin panels, CRM systems, and custom web applications.

Features

Laravel Backend
React with JSX
Vite Integration
Authentication Scaffolding
SPA-like Experience
Modern Frontend Workflow
Reusable Components
Organized Project Structure
Responsive UI Ready
Production Ready Setup
JavaScript First Approach
Clean Architecture

Installation

Laravel Installer (Recommended)

laravel new my-app --using=ghostcompiler/laravel-react-jsx-starter-kit

Composer Create Project

composer create-project ghostcompiler/laravel-react-jsx-starter-kit my-app

Git Clone

git clone https://github.com/ghostcompiler/laravel-react-jsx-starter-kit.git

cd laravel-react-jsx-starter-kit

Install Dependencies

composer install
npm install

Environment Setup

cp .env.example .env
php artisan key:generate

Database Setup

php artisan migrate

Start Development

php artisan serve
npm run dev

Project Structure

resources/
└── js/
    ├── Components/
    ├── Layouts/
    ├── Pages/
    ├── Hooks/
    ├── Utils/
    └── app.jsx

Why JSX?

No TypeScript overhead
Faster onboarding
Clean React workflow
Simple Laravel integration
Easy to customize and scale

Use Cases

SaaS Applications
Admin Dashboards
CRM Systems
Internal Tools
Startup MVPs
Client Portals
Business Applications
Multi-tenant Systems

Development Environment

Built using ServBay

Mac M4 Tested
macOS Apple Silicon
Powered by ServBay

Repository

https://github.com/ghostcompiler/laravel-react-jsx-starter-kit

License

MIT License

<!DOCTYPE html> <html lang="{{ str_replace('_', '-', app()->getLocale()) }}" @class(['dark' => ($appearance ?? 'system') == 'dark'])> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> {{-- Inline script to detect system dark mode preference and apply it immediately --}} <script> (function() { const appearance = '{{ $appearance ?? "system" }}'; if (appearance === 'system') { const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches; if (prefersDark) { document.documentElement.classList.add('dark'); } } })(); </script> {{-- Inline style to set the HTML background color based on our theme in app.css --}} <style> html { background-color: oklch(1 0 0); } html.dark { background-color: oklch(0.145 0 0); } </style> <link rel="icon" href="/favicon.ico" sizes="any"> <link rel="icon" href="/favicon.svg" type="image/svg+xml"> <link rel="apple-touch-icon" href="/apple-touch-icon.png"> @fonts @viteReactRefresh @vite(['resources/css/app.css', 'resources/js/app.jsx', "resources/js/pages/{$page['component']}.jsx"]) <x-inertia::head> <title>{{ config('app.name', 'Laravel') }}</title> </x-inertia::head> </head> <body class="font-sans antialiased"> <x-inertia::app /> </body> </html>

Laravel React Jsx Starter Kit