Getting Started

Minimal Steps

Installation:

composer require ghazniali95/ReactWithLaravelBlade
npm install react react-dom @vitejs/plugin-react

Configure Vite (if not already set up):

Ensure vite.config.js includes @vitejs/plugin-react:

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [
    laravel({
      input: ['resources/js/app.js'],
      refresh: true,
    }),
    react(),
  ],
});

Generate a React Component:
```
php artisan create:reactComponent MyComponent
```
- This creates a Blade file (resources/views/components/MyComponent.blade.php) with embedded React JSX.

Use in Blade:

@reactComponent('MyComponent', ['prop1' => 'value1', 'prop2' => 'value2'])

Run Dev Servers:
```
npm run dev
php artisan serve
```

First Use Case

Create a simple counter component:

php artisan create:reactComponent Counter --arg=initialCount

Edit the generated Blade file (resources/views/components/Counter.blade.php) to include JSX:

<div id="counter-root"></div>

<script type="text/babel">
  const { useState } = React;
  const Counter = ({ initialCount }) => {
    const [count, setCount] = useState(initialCount);
    return (
      <div>
        <p>Count: {count}</p>
        <button onClick={() => setCount(count + 1)}>Increment</button>
      </div>
    );
  };
  ReactDOM.render(<Counter initialCount={@json($initialCount)} />, document.getElementById('counter-root'));
</script>

Use it in a Blade template:

@reactComponent('Counter', ['initialCount' => 0])

Implementation Patterns

Workflows

Component Development:
- Generate components via Artisan:
```
php artisan create:reactComponent [Name] --arg=prop1,prop2
```
- Edit the generated Blade file to include JSX and logic.
- Use @reactComponent directive in Blade to render the component with props.

Props Handling:

Pass props as an associative array:

@reactComponent('UserCard', [
  'user' => $user,
  'isAdmin' => true,
])

Access props in JSX via destructuring:

const UserCard = ({ user, isAdmin }) => { ... }

State Management:
- Use React hooks (e.g., useState, useEffect) directly in Blade-embedded JSX.
- Example: Form handling with local state:
```
const [formData, setFormData] = useState({ name: '' });
const handleSubmit = (e) => { e.preventDefault(); ... };
```
Styling:
- Use Tailwind CSS or CSS modules in Blade:
```
<div class="p-4 bg-gray-100">
  @reactComponent('MyComponent')
</div>
```
- Import CSS in Vite for React-specific styles.

API Integration:

Fetch data in useEffect:

useEffect(() => {
  fetch('/api/data')
    .then(res => res.json())
    .then(data => setData(data));
}, []);

Integration Tips

Laravel Mix/Vite: Ensure Vite is configured to process .blade.php files. Add to vite.config.js:
```
laravel({
  input: ['resources/js/app.js', 'resources/views/**/*.blade.php'],
}),
```
TypeScript Support: Add @vitejs/plugin-react-swc for TypeScript:
```
import react from '@vitejs/plugin-react-swc';
```

Shared Logic: Extract reusable React logic into separate JS files and import them in Blade:

import { MyHook } from '/js/hooks/MyHook.js';

<script type="module" src="/js/hooks/MyHook.js"></script>

Gotchas and Tips

Pitfalls

Vite Hot Module Replacement (HMR):
- HMR may not work seamlessly with Blade-embedded React. Restart Vite (npm run dev) if changes aren’t reflected.
- Avoid inline JSX in Blade for complex logic; move to separate .jsx files.
Prop Serialization:
- Complex objects (e.g., Eloquent models) may not serialize correctly. Use @json:
```
@reactComponent('Component', ['user' => @json($user->toArray())])
```
Dependency Conflicts:
- Ensure react and react-dom versions match between Vite and Blade. Use npm ls react to check.
Build Process:
- Components must be manually added to Vite’s input array in vite.config.js for production builds:
```
input: [
  'resources/js/app.js',
  'resources/views/components/**/*.blade.php',
],
```
Caching:
- Blade caches may interfere with React updates. Clear caches:
```
php artisan view:clear
npm run build
```

Debugging

Console Errors: Check browser console for React errors. Blade-embedded JSX may fail silently if syntax is incorrect.

Artisan Command Issues: Verify the create:reactComponent command is registered in app/Console/Kernel.php:

protected $commands = [
   \Ghazniali95\ReactWithLaravelBlade\Console\Commands\CreateReactComponent::class,
];

Vite Dev Server: Ensure Vite is running and listening on the correct port (default: 5173). Blade may not auto-refresh React changes.

Tips

Component Organization:
- Group Blade components in resources/views/components/ and use @include for shared layouts:
```
@include('components.layouts.app', [
  'content' => @reactComponent('MyComponent')
])
```

Environment-Specific Builds:

Use Vite’s mode to conditionally load components:

// vite.config.js
export default defineConfig(({ mode }) => ({
  plugins: [
    react(),
    laravel({
      input: mode === 'production'
        ? ['resources/js/app.js']
        : ['resources/js/app.js', 'resources/views/**/*.blade.php'],
    }),
  ],
}));

Testing:

Test React components in isolation using Jest or React Testing Library. Mock Blade props:

// TestComponent.test.jsx
test('renders with props', () => {
  const props = { initialCount: 0 };
  render(<Counter {...props} />);
  expect(screen.getByText('Count: 0')).toBeInTheDocument();
});

Performance:

For heavy components, lazy-load with React.lazy:

const LazyComponent = React.lazy(() => import('./LazyComponent.jsx'));

Use Suspense for fallback UI:

<Suspense fallback={<div>Loading...</div>}>
  <LazyComponent />
</Suspense>

Extending the Package:
- Customize the Artisan command template in vendor/ghazniali95/react-with-laravel-blade/src/Console/Commands/CreateReactComponent.php.
- Add Blade directives by publishing the package’s config:
```
php artisan vendor:publish --provider="Ghazniali95\ReactWithLaravelBlade\ServiceProvider"
```

React With Laravel Blade Laravel Package