<?php echo get_bloginfo(), " – ", the

53 | -------------------------------------------------------------------------------- /src/js/Stores/DataStore.jsx: -------------------------------------------------------------------------------- 1 | import AppDispatcher from '../AppDispatcher.jsx'; 2 | import AjaxDispatcher from '../AjaxDispatcher.jsx'; 3 | import { ActionTypes } from '../Constants.jsx'; 4 | import { EventEmitter } from 'events'; 5 | 6 | class DataStore extends EventEmitter { 7 | constructor(props){ 8 | super(props); 9 | let _ = this; 10 | _.data = { 11 | wp_vars: [], 12 | current_page_id: null, 13 | menu_tree: [], 14 | pages_cache: [], 15 | wp_footer_hooks: '', 16 | isCachedPage: 0, 17 | current_object_id: null 18 | }; 19 | AppDispatcher.register(action => { 20 | switch(action.actionType){ 21 | case ActionTypes.GET_WP_VARS: 22 | _.data.wp_vars = action.data; 23 | _.emit('change'); 24 | break; 25 | case ActionTypes.SET_CURRENT_PAGE_ID: 26 | _.data.current_page_id = action.id; 27 | _.emit('onPageChange'); 28 | break; 29 | case ActionTypes.SET_MENU_TREE: 30 | console.log('3. In Store -> SET_MENU_TREE'); 31 | _.data.menu_tree = action.items; 32 | _.emit('onMenuTreeUpdate'); 33 | break; 34 | case ActionTypes.CACHE_UPDATED: 35 | _.emit('cacheUpdated'); 36 | break; 37 | default: 38 | } 39 | }); 40 | AjaxDispatcher.register(action => { 41 | switch(action.actionType){ 42 | case ActionTypes.SET_PAGE_IN_CACHE: 43 | Object.assign(_.data.pages_cache, action.id) 44 | _.emit('onGetPage'); 45 | break; 46 | case ActionTypes.GET_PAGE_FROM_CACHE: 47 | _.emit('onGetPage'); 48 | _.emit('onPageChange'); 49 | break; 50 | default: 51 | } 52 | }); 53 | } 54 | getData(val){ 55 | return this.data[val]; 56 | } 57 | setData(item, val){ 58 | return this.data[item] = val; 59 | } 60 | isCachedPage(){ 61 | return this.data.isCachedPage; 62 | } 63 | setIsCachedPage(val){ 64 | return this.data.isCachedPage = val; 65 | } 66 | getWpVars(val){ 67 | var _ = this; 68 | if( val && 69 | typeof _.data.wp_vars.constants != 'undefined' && 70 | typeof _.data.wp_vars.constants[val] != 'undefined' 71 | ){ 72 | return _.data.wp_vars.constants[val]; 73 | } 74 | return _.data.wp_vars; 75 | } 76 | getCurrentPageID(){ 77 | return this.data.current_page_id; 78 | } 79 | getCurrentPageURL(){ 80 | var _ = this, 81 | findItem = function(item) { 82 | return item.object_id == _.data.current_page_id; 83 | }, 84 | currItem = false, 85 | menus = _.data.wp_vars.constants.menus, 86 | items = Object 87 | .keys(menus) 88 | .map( (currentValue) => { 89 | if(menus[currentValue].find(findItem)){ 90 | currItem = menus[currentValue].find(findItem); 91 | return; 92 | } 93 | }); 94 | 95 | if(currItem == false){ 96 | return false; 97 | } else { 98 | return currItem.url; 99 | } 100 | } 101 | getMenuTree(menu_name){ 102 | return this.data.menu_tree[menu_name]; 103 | } 104 | getCachedPage(id, bool){ 105 | let _ = this; 106 | if(typeof _.data.pages_cache !== 'undefined' && typeof _.data.pages_cache[id] !== 'undefined'){ 107 | if(bool){ 108 | return true; 109 | } 110 | return _.data.pages_cache[id]; 111 | } else { 112 | return false; 113 | } 114 | } 115 | } 116 | 117 | export default new DataStore(); -------------------------------------------------------------------------------- /page-history.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import { 3 | NavLink 4 | } from 'react-router-dom'; 5 | import API from './src/js/API.jsx'; 6 | import DataStore from './src/js/Stores/DataStore.jsx'; 7 | import ServerActions from './src/js/Actions/ServerActions.jsx'; 8 | 9 | class Item extends Component { 10 | constructor(props){ 11 | super(props); 12 | let _ = this; 13 | _.deletePageFromCache = _.deletePageFromCache.bind(_); 14 | } 15 | deletePageFromCache(id){ 16 | delete DataStore.data.pages_cache[id]; 17 | ServerActions.cacheUpdated(); 18 | console.log('Deleted page ' + id + ' from cache.'); 19 | } 20 | render(){ 21 | let _ = this, 22 | { url } = _.props, 23 | { PATHINFO_BASENAME, siteurl } = _.props.wp_vars.constants, 24 | toUrl = '/'+PATHINFO_BASENAME+url.replace(siteurl, ''); 25 | 26 | return ( 27 |

28 |

Page title: {_.props.the_title}

29 |

Page ID: {_.props.page_id}

30 |

Page URL: {toUrl}

31 |

Request time: {_.props.date_formatted}

32 |

33 |

Delete from cache

34 |

35 | ); 36 | } 37 | } 38 | 39 | class History extends Component { 40 | constructor(props){ 41 | super(props); 42 | let _ = this; 43 | _.onCacheUpdated = _.onCacheUpdated.bind(_); 44 | } 45 | onCacheUpdated() { 46 | this.forceUpdate(); 47 | } 48 | componentWillMount() { 49 | let _ = this, 50 | ds = DataStore; 51 | ds.on('cacheUpdated', _.onCacheUpdated); 52 | } 53 | componentWillUnmount(){ 54 | let _ = this, 55 | ds = DataStore; 56 | ds.removeListener('cacheUpdated', _.onCacheUpdated); 57 | } 58 | componentDidUpdate(prevProps) { 59 | if (this.props.location !== prevProps.location) { 60 | API.transitionToCurrentPage(); 61 | } 62 | } 63 | render() { 64 | let _ = this, 65 | blogdescription = '', 66 | current_page_id = '', 67 | html = '

', 68 | pages_cache = DataStore.data.pages_cache, 69 | pages_cache_html = false; 70 | 71 | if( typeof _.props.current_page != 'undefined' && 72 | typeof _.props.current_page_id != 'undefined' && 73 | _.props.current_page_id == _.props.current_page.page_id 74 | ){ 75 | 76 | if( _.props.current_page_id.length > 0) { 77 | current_page_id = _.props.current_page_id; 78 | } 79 | 80 | if( typeof _.props.current_page.html != 'undefined' ) { 81 | html = _.props.current_page.html; 82 | } 83 | 84 | } 85 | 86 | pages_cache_html = Object 87 | .keys(pages_cache) 88 | .map( (currentValue, index, array) => { 89 | if(currentValue != 'last_page_id' && (_.props.current_page_id != currentValue.page_id)){ 90 | return pages_cache[currentValue]; 91 | } 92 | }) 93 | .map( (currentValue, index, array) => { 94 | if(typeof currentValue != 'undefined'){ 95 | var date = API.timeConvert(currentValue.server_request_time), 96 | dateSplit = date.split(/[- :]/), 97 | dateArr = new Date(dateSplit[0], dateSplit[1], dateSplit[2], dateSplit[3], dateSplit[4], dateSplit[5]), 98 | date_formatted = dateArr.toLocaleString('en-us', { month: "long" }) + ' ' + dateArr.getDate() + ', ' + dateArr.getFullYear() + ', ' + dateArr.getHours() + ':' + dateArr.getMinutes() + ':' + dateArr.getSeconds(); 99 | 100 | return ( 101 | 108 | ) 109 | } 110 | }); 111 | 112 | 113 | return ( 114 |

115 |

116 | { pages_cache_html.length > 1 ? 117 |

{pages_cache_html} 118 | : 119 |

Cache is empty.

120 | } 121 |

122 | ); 123 | } 124 | } 125 | 126 | export default History; 127 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # wordpress-react 2 | Componentized single-page [Wordpress](https://wordpress.com/) bootstrapped theme built with [React](https://facebook.github.io/react/) and [Flux](https://facebook.github.io/flux/), routing with [react-router](https://github.com/ReactTraining/react-router/tree/master/packages/react-router), and bundling with [Webpack](https://github.com/webpack/webpack). 3 | 4 | ## Features 5 | - No requirement to install any Wordpress plugins, works out-of-the-box 6 | - No requirement for special `.htaccess` settings 7 | - Ability to create regular Wordpress custom templates, and include shortcodes, JS, and PHP 8 | - Ability to create custom JSX React component templates (See [Custom JSX templates examples](#custom-react-components-in-jsx-templates-examples)) 9 | - Ability to use multiple menus (eg. header menu, footer menu) 10 | - Menus built on the client-side from flat trees 11 | - Separate `dev` and `production` builds (accessed with the `?dev` URL query param) (See [Examples](#examples) below) 12 | - Maintains non-WP URL query params thoughout the app (See [Query param examples](#query-param-examples) below) 13 | - Requested pages are cached for the session and not requested again 14 | - Ability to differ cached pages from non-cached 15 | - Ability to access pages not in the menu and maintain routing 16 | - Ability to access pages via any standard permalink type (See [Notes](#notes) below) 17 | - Dynamic `` tag, `wp_head()` and `wp_footer()` hooks 18 | - Ability install and use WP plugins regularly (See [Plugin test examples](#plugin-test-examples) below) 19 | - PageSpeed results near 100% out-of-the-box (while plugins deactivated): https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fzenitht.com%2Fwp%2Fblog%2F&tab=desktop 20 | 21 | ---- 22 | 23 | This is an experimental theme. Not recommended for use on a live site. 24 | 25 | ---- 26 | 27 | ## Installation 28 | 29 | 1. Download or clone this repository into your Wordpress 'themes' folder 30 | 2. Activate the theme in wp-admin 31 | 3. `cd` into this theme folder 32 | 4. Run `npm install` 33 | 5. Build with webpack: 34 | 35 | a. `npm run dev` to build the dev version 36 | 37 | b. `npm run prod` to build the production version 38 | 39 | 6. Set your WP Permalinks settings to Post name 40 | 41 | That's all! 42 | 43 | ---- 44 | 45 | ## Notes 46 | 47 | For internal routing purposes it's recommended above to set Permalinks to Post name. A user would still be able to access any page if they arrive to a page under other permalink types. 48 | 49 | ---- 50 | 51 | ## Examples 52 | 53 | Example of production build (default): 54 | 55 | [https://zenitht.com/wp/](https://zenitht.com/wp/) 56 | 57 | Example of dev build accessed with `dev` param: 58 | 59 | [https://zenitht.com/wp/?dev](https://zenitht.com/wp/?dev) 60 | 61 | Example of page not in the menu: 62 | 63 | [https://zenitht.com/wp/page-not-in-menu/](https://zenitht.com/wp/page-not-in-menu/) 64 | 65 | Example of accessing page via Plain permalink type: 66 | 67 | [https://zenitht.com/wp/?p=35](https://zenitht.com/wp/?p=35) 68 | 69 | Example of page with JS alert in content in Text editing mode: 70 | 71 | [https://zenitht.com/wp/level-1/](https://zenitht.com/wp/level-1/) 72 | 73 | Example of [custom template](page-CustomPage1.php) page, with multiple JS tags, and PHP: 74 | 75 | [https://zenitht.com/wp/page-using-custom-template/](https://zenitht.com/wp/page-using-custom-template/) 76 | 77 | Example of page with status set as 'Draft' 78 | 79 | [https://zenitht.com/wp/?page_id=1859](https://zenitht.com/wp/?page_id=1859) 80 | 81 | 82 | 83 | ## Custom React components in JSX templates examples 84 | 85 | ![screenshot_0](https://zenitht.com/screenshots/wp-react/screenshot_0.png) 86 | 87 | Example of custom JSX React component template, consisting of [page-history.jsx](page-history.jsx) and [page-history.php](page-history.php) pair: 88 | 89 | [https://zenitht.com/wp/history/](https://zenitht.com/wp/history/) 90 | 91 | See more details at [https://zenitht.com/wp/jsx-custom-templates/](https://zenitht.com/wp/jsx-custom-templates/). 92 | 93 | 94 | 95 | ## Query param examples 96 | 97 | Example of production build accessed with `page_id&someParam` params, maintaining `someParam` param: 98 | 99 | [https://zenitht.com/wp/?page_id=35&someParam=123123](https://zenitht.com/wp/?page_id=35&someParam=123123) 100 | 101 | Example of dev build accessed with `dev&p` params, maintaining `dev` param: 102 | 103 | [https://zenitht.com/wp/?p=35&dev](https://zenitht.com/wp/?p=35&dev) 104 | 105 | Example of dev build accessed with `dev&page_id` params, maintaining `dev` param: 106 | 107 | [https://zenitht.com/wp/?page_id=35&dev](https://zenitht.com/wp/?page_id=35&dev) 108 | 109 | Example of dev build accessed with `page_id&dev&p&someParam` params, maintaining `dev&someParam` params: 110 | 111 | [https://zenitht.com/wp/?page_id=35&dev&someParam=123123](https://zenitht.com/wp/?page_id=35&dev&someParam=123123) 112 | 113 | 114 | 115 | ## Plugin test examples 116 | 117 | Example of [wordpress-zSlider](https://github.com/zenithtech/wordpress-zSlider) within custom template: 118 | 119 | [https://zenitht.com/wp/wordpress-zslider-test/](https://zenitht.com/wp/wordpress-zslider-test/) 120 | 121 | Plugin test using BWS Captcha WP plugin: 122 | 123 | [https://zenitht.com/wp/bws-captcha-shortcode-plugin-test/](https://zenitht.com/wp/bws-captcha-shortcode-plugin-test/) 124 | 125 | Plugin test using ConvertPlug WP plugin: 126 | 127 | [https://zenitht.com/wp/wp-plugin-test-convertplug/](https://zenitht.com/wp/wp-plugin-test-convertplug/) 128 | 129 | Plugin test using Ninja Forms WP plugin: 130 | 131 | [https://zenitht.com/wp/plugin-test-ninja-forms/](https://zenitht.com/wp/plugin-test-ninja-forms/) 132 | 133 | 134 | ---- 135 | 136 | ## License ## 137 | 138 | This package is licensed under MIT license. See [LICENSE](LICENSE) for details. 139 | -------------------------------------------------------------------------------- /src/js/Components/Menu.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import { 3 | NavLink 4 | } from 'react-router-dom'; 5 | import API from '../API.jsx'; 6 | import DataStore from '../Stores/DataStore.jsx'; 7 | 8 | class Menu extends Component { 9 | constructor(props){ 10 | super(props); 11 | let _ = this; 12 | _.state = { 13 | menu_items: null 14 | }; 15 | _.onMenuTreeUpdate = _.onMenuTreeUpdate.bind(_); 16 | // _.onPageChange = _.onPageChange.bind(_); 17 | } 18 | onMenuTreeUpdate() { 19 | let _ = this; 20 | 21 | console.log('4. In View > react_page > onMenuTreeUpdate'); 22 | _.setState({ menu_items: DataStore.getMenuTree(_.props.menu_name) }); 23 | } 24 | // onPageChange() {} 25 | componentDidUpdate(prevProps, prevState) { 26 | let _ = this 27 | 28 | if( typeof _.props.current_page != 'undefined' ) { 29 | if( typeof prevProps.current_page == 'undefined' 30 | ) { 31 | API.evalScripts(_.props.current_page); 32 | return; 33 | } 34 | if( typeof prevProps.current_page.page_id != 'undefined' && 35 | prevProps.current_page.page_id != _.props.current_page.page_id ){ 36 | API.evalScripts(_.props.current_page); 37 | return; 38 | } 39 | } 40 | } 41 | componentWillMount() { 42 | let _ = this, 43 | ds = DataStore; 44 | 45 | ds.on('onMenuTreeUpdate', _.onMenuTreeUpdate); 46 | // ds.on('onPageChange', _.onPageChange); 47 | } 48 | componentWillUnmount(){ 49 | let _ = this, 50 | ds = DataStore; 51 | 52 | ds.removeListener('onMenuTreeUpdate', _.onMenuTreeUpdate); 53 | // ds.removeListener('onPageChange', _.onPageChange); 54 | } 55 | render() { 56 | let _ = this, 57 | nodes = '', 58 | wp_vars = '', 59 | constants = {}, 60 | current_page = {}, 61 | wp_head = ''; 62 | 63 | if( _.state.menu_items != null && typeof _.props.wp_vars != 'undefined' ) { 64 | wp_vars = _.props.wp_vars; 65 | constants = wp_vars.constants; 66 | nodes = _.state.menu_items.map(function(item) { 67 | return ( 68 | 74 | ); 75 | }); 76 | } 77 | 78 | if(_.props.current_page){ 79 | current_page = _.props.current_page; 80 | wp_head = current_page.wp_head; 81 | } 82 | 83 | return ( 84 | 87 | ); 88 | } 89 | } 90 | 91 | class Child extends Component { 92 | constructor(props){ 93 | super(props); 94 | let _ = this; 95 | _.callSetCurrentPageID = _.callSetCurrentPageID.bind(_); 96 | } 97 | callSetCurrentPageID(){ 98 | let _ = this, 99 | item = _.props.node, 100 | { object_id, url } = item; 101 | 102 | API.transitionToCurrentPage(object_id, url); 103 | } 104 | componentDidUpdate(prevProps) { 105 | let _ = this; 106 | if (_.props.location !== prevProps.location) { 107 | _.callSetCurrentPageID(); 108 | } 109 | } 110 | render() { 111 | let _ = this, 112 | { object_id, title, ID, url, not_in_menu } = _.props.node, 113 | toUrl = API.stripSiteUrl(url, object_id), 114 | childnodes = null, 115 | isActive = '', 116 | hasChildren = '', 117 | urlString = ''; 118 | 119 | if((_.props.location.pathname == toUrl && !API.getParameter('page_id') ) || 120 | API.getParameter('page_id').toString() == object_id 121 | ){ 122 | isActive = ' current_page_item'; 123 | } 124 | 125 | if(_.props.children) { 126 | childnodes = _.props.children.map(function(childnode) { 127 | return ( 128 | 134 | ); 135 | }); 136 | } 137 | 138 | hasChildren = childnodes.length > 0 ? ' menu-item-has-children' : ''; 139 | 140 | // Preserve query params throughout 141 | if( 142 | // Plain permalinks 143 | (_.props.location.search != '' && toUrl.match(/\?./)) || 144 | // Other permalinks 145 | (_.props.location.search != '' && !toUrl.match(/\?./)) 146 | ) { 147 | 148 | var searchParams = API.get_params(_.props.location.search.substr(1)), 149 | toUrlParams = API.get_params(toUrl.split('?')[1]), 150 | mappedParams = API.deepDiffMapper.map(toUrlParams, searchParams), 151 | paramsString = Object 152 | .keys(mappedParams) 153 | .map( (currentValue, index, array) => { 154 | if( currentValue != 'page_id' ){ 155 | var value = mappedParams[currentValue][0] == undefined ? '' : '='+mappedParams[currentValue][0]; 156 | urlString += currentValue + value; 157 | 158 | if( index+1 != array.length ){ 159 | urlString += '&'; 160 | } 161 | } 162 | }); 163 | 164 | // Plain permalinks 165 | if( (_.props.location.search != '' && toUrl.match(/\?./)) ){ 166 | if( toUrl.match(/page_id/) ){ 167 | toUrl += '&' + urlString; 168 | } else { 169 | toUrl = '?' + urlString; 170 | } 171 | } 172 | 173 | // Other permalinks 174 | if( (_.props.location.search != '' && !toUrl.match(/\?./))){ 175 | toUrl += '?' + urlString; 176 | } 177 | 178 | } 179 | 180 | return ( 181 | not_in_menu ? false : 182 |

184 | {title} 185 | { childnodes.length > 0 ?

{childnodes} : '' } 186 |

187 | ); 188 | } 189 | } 190 | 191 | export default Menu; 192 | -------------------------------------------------------------------------------- /src/index.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import update from 'immutability-helper'; 4 | import { 5 | BrowserRouter as Router, 6 | Route, 7 | browserHistory, 8 | IndexRedirect, 9 | IndexRoute 10 | } from 'react-router-dom'; 11 | import API from './js/API.jsx'; 12 | import DataStore from './js/Stores/DataStore.jsx'; 13 | import Menu from './js/Components/Menu.jsx'; 14 | import Page from './js/Components/Page.jsx'; 15 | import Footer from './js/Components/Footer.jsx'; 16 | import '../node_modules/bootstrap/dist/css/bootstrap.min.css'; 17 | import './css/main.css'; 18 | 19 | window.window_cache = API.clone(window); 20 | 21 | if(document.getElementById('react_header')){ 22 | class ReactHeader extends Component { 23 | constructor(props){ 24 | super(props); 25 | let _ = this; 26 | _.state = {}; 27 | _.onChange = _.onChange.bind(_); 28 | _.onGetPage = _.onGetPage.bind(_); 29 | } 30 | onChange() { 31 | let _ = this, 32 | appState = update(_.state, { 33 | $merge: { wp_vars: DataStore.getWpVars() } 34 | }); 35 | _.setState(appState); 36 | } 37 | onGetPage() { 38 | let _ = this, 39 | ds = DataStore, 40 | appState = update(_.state, { 41 | $merge: { 42 | current_page: ds.getCachedPage(ds.getCurrentPageID(), false) 43 | } 44 | }); 45 | _.setState(appState); 46 | } 47 | componentWillMount() { 48 | let _ = this, 49 | ds = DataStore; 50 | ds.on('change', _.onChange); 51 | ds.on('onGetPage', _.onGetPage); 52 | } 53 | componentWillUnmount(){ 54 | let _ = this, 55 | ds = DataStore; 56 | ds.removeListener('change', _.onChange); 57 | ds.removeListener('onGetPage', _.onGetPage); 58 | } 59 | render() { 60 | let _ = this, 61 | ds = DataStore, 62 | blogdescription = ''; 63 | 64 | if( ds.getWpVars('blogdescription') ) { 65 | blogdescription = ds.getWpVars('blogdescription'); 66 | } 67 | return ( 68 |

69 |

70 |

{blogdescription}

71 |

73 |

74 | ); 75 | } 76 | } 77 | 78 | ReactDOM.render(( 79 | 80 | 81 | 82 | ), document.getElementById('react_header') 83 | ); 84 | 85 | } 86 | 87 | if(document.getElementById('react_page')){ 88 | class ReactPage extends Component { 89 | constructor(props){ 90 | super(props); 91 | let _ = this; 92 | _.state = {}; 93 | _.onChange = _.onChange.bind(_); 94 | _.onPageChange = _.onPageChange.bind(_); 95 | _.onGetPage = _.onGetPage.bind(_); 96 | } 97 | onChange() { 98 | let _ = this, 99 | appState = update(_.state, { 100 | $merge: { wp_vars: DataStore.getWpVars() } 101 | }); 102 | 103 | _.setState(appState); 104 | } 105 | onPageChange() { 106 | let _ = this, 107 | ds = DataStore; 108 | 109 | _.setState({ current_page_id: ds.getCurrentPageID() }); 110 | 111 | if(ds.getCurrentPageID() != null) { 112 | API.AJAX_getPage(ds.getCurrentPageID(), ds.getCurrentPageURL()); 113 | } 114 | } 115 | onGetPage() { 116 | let _ = this, 117 | ds = DataStore, 118 | appState = update(_.state, { 119 | $merge: { 120 | current_page: ds.getCachedPage(ds.getCurrentPageID(), false) 121 | } 122 | }); 123 | 124 | _.setState(appState); 125 | } 126 | componentWillMount() { 127 | let _ = this, 128 | ds = DataStore; 129 | 130 | ds.on('change', _.onChange); 131 | ds.on('onPageChange', _.onPageChange); 132 | ds.on('onGetPage', _.onGetPage); 133 | } 134 | componentWillUnmount(){ 135 | let _ = this, 136 | ds = DataStore; 137 | 138 | ds.removeListener('change', _.onChange); 139 | ds.removeListener('onPageChange', _.onPageChange); 140 | ds.removeListener('onGetPage', _.onGetPage); 141 | } 142 | render() { 143 | let _ = this; 144 | 145 | return ( 146 | 147 | ); 148 | } 149 | } 150 | 151 | ReactDOM.render(( 152 | 153 | 154 | 155 | ), document.getElementById('react_page') 156 | ); 157 | 158 | } 159 | 160 | if(document.getElementById('footer')){ 161 | class ReactFooter extends Component { 162 | constructor(props){ 163 | super(props); 164 | let _ = this; 165 | _.state = {}; 166 | _.onChange = _.onChange.bind(_); 167 | _.onGetPage = _.onGetPage.bind(_); 168 | } 169 | onChange() { 170 | let _ = this, 171 | appState = update(_.state, { 172 | $merge: { wp_vars: DataStore.getWpVars() } 173 | }); 174 | _.setState(appState); 175 | } 176 | onGetPage() { 177 | let _ = this, 178 | appState = update(_.state, { 179 | $merge: { 180 | current_page: DataStore.getCachedPage(DataStore.getCurrentPageID(), false) 181 | } 182 | }); 183 | 184 | _.setState(appState); 185 | } 186 | componentWillMount() { 187 | let _ = this, 188 | ds = DataStore; 189 | ds.on('change', _.onChange); 190 | ds.on('onGetPage', _.onGetPage); 191 | } 192 | componentWillUnmount(){ 193 | let _ = this, 194 | ds = DataStore; 195 | ds.removeListener('change', _.onChange); 196 | ds.removeListener('onGetPage', _.onGetPage); 197 | } 198 | render() { 199 | let _ = this; 200 | 201 | return ( 202 |

Custom React component JSX WordPress template