Created
April 29, 2017 02:49
-
-
Save raphaelkross/06fdcf79faae3a4c7652290827ebf769 to your computer and use it in GitHub Desktop.
React Components in PHP
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?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 ` | |
`; | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?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 ` | |
`; | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment