From 2c2a96a18311cc1e57ed2ed2cde7ee6fc0967331 Mon Sep 17 00:00:00 2001 From: Nicolas Gallagher Date: Wed, 29 Jun 2016 17:42:06 -0700 Subject: [PATCH] update rendering docs --- docs/guides/rendering.md | 66 ++++++++-------------------------------- 1 file changed, 12 insertions(+), 54 deletions(-) diff --git a/docs/guides/rendering.md b/docs/guides/rendering.md index 4a5545c5..fd1edd4d 100644 --- a/docs/guides/rendering.md +++ b/docs/guides/rendering.md @@ -21,80 +21,38 @@ module.exports = { Rendering without using the `AppRegistry`: ```js +import React from 'react' import ReactNative from 'react-native' +// component that renders the app +const AppHeaderContainer = (props) => { /* ... */ } + // DOM render -ReactNative.render(
, document.getElementById('react-app')) +ReactNative.render(, document.getElementById('react-app-header')) // Server render -ReactNative.renderToString(
) -ReactNative.renderToStaticMarkup(
) +ReactNative.renderToString() +ReactNative.renderToStaticMarkup() ``` Rendering using the `AppRegistry`: ```js -// App.js - import React from 'react' +import ReactNative, { AppRegistry } from 'react-native' // component that renders the app const AppContainer = (props) => { /* ... */ } -export default AppContainer -``` -```js -// client.js +// register the app +AppRegistry.registerComponent('App', () => AppContainer) -import App from './App' -import { AppRegistry } from 'react-native' - -// registers the app -AppRegistry.registerComponent('App', () => App) - -// mounts and runs the app within the `rootTag` DOM node +// DOM render AppRegistry.runApplication('App', { initialProps: {}, rootTag: document.getElementById('react-app') }) -``` -React Native for Web extends `AppRegistry` to provide support for server-side -rendering. - -```js -// AppShell.js - -import React from 'react' - -const AppShell = (html, styleElement) => ( - - - - - {styleElement} - - -
- - -) -export default AppShell -``` - -```js -// server.js - -import App from './App' -import AppShell from './AppShell' -import ReactNative, { AppRegistry } from 'react-native' - -// registers the app -AppRegistry.registerComponent('App', () => App) - -// prerenders the app +// prerender the app const { html, style, styleElement } = AppRegistry.prerenderApplication('App', { initialProps }) - -// renders the full-page markup -const renderedApplicationHTML = ReactNative.renderToStaticMarkup() ```