README.md in render_react-1.0.0 vs README.md in render_react-1.0.1

- old
+ new

@@ -9,20 +9,24 @@ } } ``` ```html -RenderReact.on_client_and_server("ExampleComponent", { example: "prop" }) +RenderReact.on_client_and_server("ExampleComponent", { example: "!" }) # => <div id="RenderReact-caac405e-1714-495e-aeb4-77b42be42291"> <marquee data-reactroot="" data-reactid="1" data-react-checksum="441921122"> <!-- react-text: 2 -->Hello Ruby <!-- /react-text --><!-- react-text: 3 -->!<!-- /react-text --> </marquee> </div> <script> - RenderReact.ReactDOM.render(RenderReact.React.createElement(RenderReact.components.ExampleComponent, {"example":"!"}), - document.getElementById('RenderReact-caac405e-1714-495e-aeb4-77b42be42291')) + RenderReact.ReactDOM.render( + RenderReact.React.createElement( + RenderReact.components.ExampleComponent, {"example":"!"} + ), + document.getElementById('RenderReact-caac405e-1714-495e-aeb4-77b42be42291') + ) </script> ``` It is *bring your own tooling*: React is not included, nor any ES6 transpilers or module bundlers. It expects you to prepare the JavaScript bundle file in a specific format, which must contain React and all of your components. @@ -40,21 +44,25 @@ **RenderReact** expects the JavaScript bundle to include a global variable called `RenderReact` with the following contents: ```javascript { - React: [variable which contains React, see first paragraph of https://facebook.github.io/react/docs/react-api.html], - ReactDOM: [variable which contains ReactDOM, see first paragraph of https://facebook.github.io/react/docs/react-dom.html] - ReactDOMServer: [variable which contains ReactDOMServer, see first paragraph of https://facebook.github.io/react/docs/react-dom-server.html], + React: [variable which contains React], + ReactDOM: [variable which contains ReactDOM], + ReactDOMServer: [variable which contains ReactDOMServer], components: { ComponentIdentifier1: [variable which contains the component 1], ComponentIdentifier2: [variable which contains the component 2], ... } } ``` +- Where is **React**? See first paragraph of https://facebook.github.io/react/docs/react-api.html +- Where is **ReactDOM**? See first paragraph of https://facebook.github.io/react/docs/react-dom.html +- Where is **ReactDOMServer**? See first paragraph of https://facebook.github.io/react/docs/react-dom-server.html + You can have two different javascript bundle files - one for server rendering, and one for client-rendering. - The client bundle has to be included into your application by a method of your choice. You may skip passing in `ReactDOMServer` for the client bundle - The server bundle has to be passed to `RenderReact` (see Usage section). You may skip passing in `ReactDOM` for the server bundle @@ -75,16 +83,16 @@ ExampleComponent: ExampleComponent } } ``` -(gets later imported as `RenderReact`) +Gets imported as `RenderReact` #### Example (With Browser Globals) ```javascript -window.RenderReact { +window.RenderReact = { React: React, ReactDOM: ReactDOM, ReactDOMServer: ReactDOMServer, components: { ExampleComponent: ExampleComponent @@ -98,10 +106,12 @@ ```ruby RenderReact.create_context! File.read('path/to/your/server-bundle.js'), mode: :client_and_server ``` +You can use it without a server-side bundle by not passing any file source. + The optional `mode:` keyword argument can have one of the following values - `:client_and_server` (default) - component will be rendered server-side and mounted in the client - `:client` - component will be mounted in the client - `:server` - component will be render statically @@ -122,6 +132,6 @@ ## MIT License Copyright (C) 2017 Jan Lelis <http://janlelis.com>. Released under the MIT license. -React is BSD licensed. \ No newline at end of file +React is BSD licensed.