Render
This package contains modules directly related to rendering an MWP React+Redux application.
Although the Meetup Web Platform is built on the principle of Universal
Javascript with a shared app codebase used for server and browser rendering,
consumer applications will still need to bundle the browser app and the server
app separately. The browser application will be instantiated in an entry point
script that calls ReactDOM.render(), while the server application will be
called from a route handler on the server.
Browser rendering
The root application component in the browser is BrowserApp.
<BrowserApp routes={routes} store={store} basename={basename} />Although consumer applications can supply the props directly, the platform
provides a helper function, resolveAppProps that should typically be used to
correctly instantiate the store, resolve the basename from the app data
provided by the server, and populate any asynchronous route components.
Example
The browser entry script would typically have the following structure:
import { resolveAppProps } from 'meetup-web-platform/lib/renderers/browser-render';
import makeRootReducer from 'meetup-web-platform/lib/store/reducer';
const appReducers = require('./reducers'); // map of reducer keys to reducer functions
const reducer = makeRootReducer(appReducers); // create the root reducer function
resolveAppProps(routes, reducer, middleware).then(props =>
ReactDOM.render(<BrowserApp {...props} />, document.getElementById('outlet'))
);Notes:
- Consumer apps must render the application at the element with an
idof'outlet'- this div is provided by the platform server renderer. - If you need direct access to the
store, it can be read fromprops.storein the resolved value fromresolveAppProps.
Server config values - AppContext
The server has access to the original browser HTTP request and passes information
about it into the React application through the AppContext React Context provider.
The available properties are documented in the
type AppContext
To access these properties, import the AppContext component and use the React
Context Consumer API
to expose the appContext object to child components.
Example:
import { AppContext } from 'mwp-app-render/lib/components/shared/PlatformApp';
const MyComponent = props => (
<AppContext.Consumer>
{appContext => <p>My language is {appContext.requestLanguage}</p>}
</AppContext.Consumer>
);Components
The React components in components/ are application-general wrappers of app-
specific UIs that provide the necessary React component lifecycle behavior to
enable navigation-related data fetching, and shared document structure like
<head> content and the icon SVG sprite.
-
The app wrapper components:
<BrowserApp>and<ServerApp>These components provide the top-level entry point for the React application tree. They should be used with
ReactDOM.renderandReactDOMServer.renderToString, respectively -
<PageWrap>The top-level rendering component for the React application - this should generally be used at root-level route in the passed in routes. This could be phased out as a public component, and instead built into
<BrowserApp>and<ServerApp>The code for
PageWrapis organized in a directory as a standalone 'package' because the relevant code is organized into a few separate 'internal' modules. -
<Dom>A React component used on the server to get a full
<html>document string fromReactDOMServer.renderToString(). The actual application markup must be supplied as a raw HTML string in theappMarkupprop.