React Components in PHP

dumb-component.php

<?php
/*
 * Declare example of Agent Profile Component.
 */

namespace App\Agent\Profile;

use App\Agent\Avatar;
use App\Agent\Designations;
use App\Agent\Awards;
use App\Agent\Listings;

public class Profile extends Modulus_Component {

    $props = null;

    public function __constructor( $props = null ) {
        $this->props = $props;
    }

    public function componentSetup() {
        // Enqueue dependencies.
    }

    public function componentWillMount() {
        // Do something with data before render is called.
    }

    public function componentDidMount() {
        // You have access to all data and render was called.
    }

    public function render() {
        // Any var here will be accessible to the include template.

        return ``;
    }

    public function styles() {
        // The style is automatically wrapper by an unique var, unless using @global.
        return `
        
        `;
    }

    public function scripts() {
        return `
        
        `;
    }

}

smart-component.php

<?php
/*
 * Declare example of Agent Profile Component.
 */

namespace App\Agent\Profile;

use App\Agent\Avatar;
use App\Agent\Designations;
use App\Agent\Awards;
use App\Agent\Listings;

public class Profile extends Modulus_Component {

    $props = null;

    public function __constructor( $props = null ) {
        $this->props = $props;
    }

    public function componentSetup() {
        // Enqueue dependencies.

        // Grab data that should be availble by render time.
        $getUserAndLikes = `
            query getUserAndLikes($id: ID!) {
                user(userId: $id) { name }
                likes(userId: $id) { count }
            }
        `;

        // This will fill the $this->props->data field.
        $this->gql_query( $getUserAndLikes );

        /*
        data: {
            user: { name: "James" },
            likes: { count: 10 },
            loading: false,
            error: null,
            variables: { id: 'asdf' },
            refetch() { ... },
            fetchMore() { ... },
        }
        */
    }

    public function componentWillMount() {
        // Do something with data before render is called.
    }

    public function componentDidMount() {
        // You have access to all data and render was called.
    }

    public function render() {
        // Any var here will be accessible to the include template.

        return ``;
    }

    public function styles() {
        // The style is automatically wrapper by an unique var, unless using @global.
        return `
        
        `;
    }

    public function scripts() {
        return `
        
        `;
    }

}