zoriya/react-native-web
1
0
Fork 0
mirror of https://github.com/zoriya/react-native-web.git synced 2026-05-28 16:45:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

update rendering docs

Browse Source
This commit is contained in:
Nicolas Gallagher
2016-06-29 17:42:06 -07:00
parent b4a3053b5b
commit 2c2a96a183
1 changed files with 12 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/guides/rendering.md
+12 -54
View File
@@ -21,80 +21,38 @@ module.exports = {
Rendering without using the `AppRegistry`: Rendering without using the `AppRegistry`:
```js ```js
import React from 'react'
import ReactNative from 'react-native' import ReactNative from 'react-native'
// component that renders the app
const AppHeaderContainer = (props) => { /* ... */ }
// DOM render // DOM render
ReactNative.render(<div />, document.getElementById('react-app')) ReactNative.render(<AppHeaderContainer />, document.getElementById('react-app-header'))
// Server render // Server render
ReactNative.renderToString(<div />) ReactNative.renderToString(<AppHeaderContainer />)
ReactNative.renderToStaticMarkup(<div />) ReactNative.renderToStaticMarkup(<AppHeaderContainer />)
``` ```
Rendering using the `AppRegistry`: Rendering using the `AppRegistry`:
```js ```js
// App.js
import React from 'react' import React from 'react'
import ReactNative, { AppRegistry } from 'react-native'
// component that renders the app // component that renders the app
const AppContainer = (props) => { /* ... */ } const AppContainer = (props) => { /* ... */ }
export default AppContainer
```
```js // register the app
// client.js AppRegistry.registerComponent('App', () => AppContainer)
import App from './App' // DOM render
import { AppRegistry } from 'react-native'
// registers the app
AppRegistry.registerComponent('App', () => App)
// mounts and runs the app within the `rootTag` DOM node
AppRegistry.runApplication('App', { AppRegistry.runApplication('App', {
initialProps: {}, initialProps: {},
rootTag: document.getElementById('react-app') rootTag: document.getElementById('react-app')
}) })
```
React Native for Web extends `AppRegistry` to provide support for server-side // prerender the app
rendering.
```js
// AppShell.js
import React from 'react'
const AppShell = (html, styleElement) => (
<html>
<head>
<meta charSet="utf-8" />
<meta content="initial-scale=1,width=device-width" name="viewport" />
{styleElement}
</head>
<body>
<div id="react-app" dangerouslySetInnerHTML={{ __html: html }} />
</body>
</html>
)
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
const { html, style, styleElement } = AppRegistry.prerenderApplication('App', { initialProps }) const { html, style, styleElement } = AppRegistry.prerenderApplication('App', { initialProps })
// renders the full-page markup
const renderedApplicationHTML = ReactNative.renderToStaticMarkup(<AppShell html={html} styleElement={styleElement} />)
``` ```