Controllers and React Views

Table of contents

1. Overview
2. Passing in Props
3. View Commands

1. Overview Table of Contents

Just like PHP views, configuring your React.js views occurs within your controllers. To facilitate this we have a renderJsx function and a $this->view->props variable.

2. Passing in Props Table of Contents

Below is the PHP version of this process:

$this->view->user = AuthService::currentUser() ?? 'Guest';
$this->view->render('home.index');

The React.js version is shown below:

// In your controller:
$props = ['user' => ['name' => 'Chad']];
$this->view->renderJsx('home.Index', $props); // maps to resources/js/pages/home/Index.jsx

or

$this->view->props = ['user' => ['name' => 'Chad']];
$this->view->renderJsx('home.Index');

Added each props object as a parameter:

export default function Index({ user }) {
    const name = user.fname ?? 'Guest';

    return (
        <>
            <h1>Hello {name}</h1>
        </>
    );
}

3. View Commands Table of Contents

We support several commands for managing views and layouts with React.

Layouts The default layout supports React integration. To create a support layout run:

php console make:layout <layout_name> --react

Views Generate a React view under resources/js/pages/<area>/<view_name>.jsx:

php console react:page <area>.<view_name>

Generating Built-in Views

Command	Description
php console react:auth	Generates page components for the auth controller
php console react:error	Restores error/NotFound.jsx page component
php console react:home	Generates Index.jsx page component for the home controller
php console react:profile	Generates page components for the profile controller