README

Quick Start

Repository

GitHub: https://github.com/shubham-ynr/larareact-jsx

Create a New Project

To create a new Laravel + React (JSX) project using this boilerplate, run:

laravel new react-jsx-app --using=shubham-ynr/larareact-jsx

This command will scaffold a new Laravel application with the PanelMaster/larareact-jsx boilerplate, ready for development.

Introduction

This Laravel + React boilerplate provides a clean and scalable foundation for building modern web applications using Laravel as the backend and React (JSX) as the frontend with Inertia.js.

Unlike the official TypeScript (TSX) starter, this boilerplate is built using standard React JSX, making it simpler and faster to start for developers who prefer JavaScript.

It combines:

⚡ Laravel powerful backend
⚛️ React 19 (JSX)
🚀 Inertia.js (SPA experience without API complexity)
🎨 Tailwind CSS
🧩 shadcn/ui components
🔗 Ziggy for Laravel route usage inside React
⚡ Vite for lightning-fast development

This setup allows you to build modern single-page applications while keeping Laravel’s routing, controllers, middleware, and validation system.

Tech Stack

Backend

Laravel 12+
PHP 8.2+
Inertia.js

Frontend

React 19 (JSX)
Tailwind CSS
shadcn/ui
Radix UI
Ziggy
Vite

Features

Server-side routing with SPA experience
Laravel named routes available in React via Ziggy
Clean project structure
Modern UI setup with Tailwind + shadcn
Hot module reload with Vite
Production-ready build setup

Routing with Ziggy

This boilerplate integrates Ziggy, allowing you to use Laravel named routes inside React components.

Example:

route("users.index");
route("users.show", 1);

shadcn/ui Component Library

This boilerplate comes pre-configured to use shadcn/ui, a modern React component library built on top of Radix UI and Tailwind CSS.

Adding a shadcn/ui Component

To add a new component (e.g., Button) to your project, run:

npx shadcn@latest add button

This will install the component and its dependencies, and generate the files in your project. You can then import and use the component in your React code:

import { Button } from "@/components/ui/button";

export default function Example() {
    return <Button>Click me</Button>;
}

Explore all available components and usage examples in the shadcn/ui documentation.

Tailwind CSS

This boilerplate uses Tailwind CSS for utility-first styling. Tailwind is already configured and ready to use out of the box.

You can start using Tailwind classes in your React components and Blade views immediately. For more details on how Tailwind works with Vite, see the official Tailwind CSS + Vite guide.

Inertia.js

This project uses Inertia.js to provide a modern single-page application (SPA) experience while keeping server-side routing, controllers, and validation. Inertia acts as a bridge between Laravel and React, allowing you to build dynamic apps without writing a separate API.

Key Points:

Use Laravel controllers to return Inertia responses.
React pages are rendered as views, with props passed from the backend.
No need for client-side routing libraries—use Laravel routes as usual.

Learn more in the Inertia.js documentation.

Vite

Vite is used as the build tool for both development and production. It provides lightning-fast hot module replacement (HMR) and optimized builds.

Common scripts:

# Start development server
npm run dev

# Build for production
npm run build

# For dev Server (This will run php artisan serve and npm run dev)
npm run start

Ziggy Usage

Ziggy makes Laravel named routes available in your React components. This enables you to generate URLs in JavaScript just like you do in PHP.

Example:

const userUrl = route("users.show", 1); // /users/1

See the Ziggy documentation for more details.

Project Scripts

The following npm scripts are available:

"scripts": {
	"dev": "vite",
	"build": "vite build",
	"start": "concurrently \"npm run dev\" \"php artisan serve\""
}

Directory Structure

resources/js/ — React app source code (components, pages, hooks, etc.)
resources/views/ — Blade templates
routes/web.php — Laravel routes
app/Http/Controllers/ — Laravel controllers
config/ — Laravel configuration files

Contributing

Feel free to open issues or submit pull requests to improve this boilerplate!

shubham-ynr / larareact-jsx

Maintainers

Package info

Statistics

Security