{"action":"created","issue":{"url":"https://api.github.com/repos/code-dot-org/code-dot-org/issues/7000","repository_url":"https://api.github.com/repos/code-dot-org/code-dot-org","labels_url":"https://api.github.com/repos/code-dot-org/code-dot-org/issues/7000/labels{/name}","comments_url":"https://api.github.com/repos/code-dot-org/code-dot-org/issues/7000/comments","events_url":"https://api.github.com/repos/code-dot-org/code-dot-org/issues/7000/events","html_url":"https://github.com/code-dot-org/code-dot-org/pull/7000","id":136556831,"number":7000,"title":"React Wrapper Step 1: Simple React Wrapper that never updates","user":{"login":"islemaster","id":1615761,"avatar_url":"https://avatars.githubusercontent.com/u/1615761?v=3","gravatar_id":"","url":"https://api.github.com/users/islemaster","html_url":"https://github.com/islemaster","followers_url":"https://api.github.com/users/islemaster/followers","following_url":"https://api.github.com/users/islemaster/following{/other_user}","gists_url":"https://api.github.com/users/islemaster/gists{/gist_id}","starred_url":"https://api.github.com/users/islemaster/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/islemaster/subscriptions","organizations_url":"https://api.github.com/users/islemaster/orgs","repos_url":"https://api.github.com/users/islemaster/repos","events_url":"https://api.github.com/users/islemaster/events{/privacy}","received_events_url":"https://api.github.com/users/islemaster/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":{"login":"davidsbailey","id":8001765,"avatar_url":"https://avatars.githubusercontent.com/u/8001765?v=3","gravatar_id":"","url":"https://api.github.com/users/davidsbailey","html_url":"https://github.com/davidsbailey","followers_url":"https://api.github.com/users/davidsbailey/followers","following_url":"https://api.github.com/users/davidsbailey/following{/other_user}","gists_url":"https://api.github.com/users/davidsbailey/gists{/gist_id}","starred_url":"https://api.github.com/users/davidsbailey/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/davidsbailey/subscriptions","organizations_url":"https://api.github.com/users/davidsbailey/orgs","repos_url":"https://api.github.com/users/davidsbailey/repos","events_url":"https://api.github.com/users/davidsbailey/events{/privacy}","received_events_url":"https://api.github.com/users/davidsbailey/received_events","type":"User","site_admin":false},"milestone":null,"comments":2,"created_at":"2016-02-26T00:30:44Z","updated_at":"2016-02-26T00:43:19Z","closed_at":null,"pull_request":{"url":"https://api.github.com/repos/code-dot-org/code-dot-org/pulls/7000","html_url":"https://github.com/code-dot-org/code-dot-org/pull/7000","diff_url":"https://github.com/code-dot-org/code-dot-org/pull/7000.diff","patch_url":"https://github.com/code-dot-org/code-dot-org/pull/7000.patch"},"body":"Introduces two new React components, and uses them in all app types except for NetSim (which has its own top-level view).\r\n\r\n* `AppView` is an extremely simple wrapper component, designed to mount to `#codeApp` and hold everything currently rendered by [page.html.ejs](https://github.com/code-dot-org/code-dot-org/blob/staging/apps/src/templates/page.html.ejs).  It has two required properties:\r\n  * `renderCodeApp` should be a function that returns the rendered HTML from page.html.ejs (formerly the complete contents of `#codeApp`).\r\n  * `onMount` is a callback that gets called when the `AppView` and everything underneath it is rendered, mounted, and ready to use.\r\n* `ProtectedStatefulDiv` renders as an ordinary `<div>`, but it will never update its contents (via React) and it will throw an exception if it's ever unmounted.  It's designed to protect sections of the DOM that may be stateful (like `#designModeViz`) or should be controlled by our own non-React code or by another library (like droplet or blockly).\r\n\r\nEach app's init function has been modified to render `AppView`, with the `page.html.ejs` rendering happening inside `renderCodeApp`, and `studioApp.init()` and everything following happening inside the `onMount` callback.  Pseudocode:\r\n\r\n```javascript\r\n// Before\r\nApp.init = function (config) {\r\n  // pre-init work\r\n  config.html = page(options);\r\n  studioApp.init(config);\r\n  // post-init work\r\n};\r\n\r\n// After\r\nApp.init = function (config) {\r\n  // pre-init work\r\n  React.render(React.createElement(AppView, {\r\n    renderCodeApp: function () {\r\n      return page(options);\r\n    },\r\n    onMount: function () {\r\n      studioApp.init(config);\r\n      // post-init work\r\n    }\r\n  }), document.getElementById(config.containerId));\r\n};\r\n```\r\n\r\nIt's less concise for now, but this is the first in a series of changes that make it easier to extend our apps with React. See [this design document](https://docs.google.com/document/d/1itHwWa0ilE4FAMjDuqxkWXSqp_d0z7lhTeMFJybFH0w/edit?usp=sharing) for more details."},"comment":{"url":"https://api.github.com/repos/code-dot-org/code-dot-org/issues/comments/189054141","html_url":"https://github.com/code-dot-org/code-dot-org/pull/7000#issuecomment-189054141","issue_url":"https://api.github.com/repos/code-dot-org/code-dot-org/issues/7000","id":189054141,"user":{"login":"islemaster","id":1615761,"avatar_url":"https://avatars.githubusercontent.com/u/1615761?v=3","gravatar_id":"","url":"https://api.github.com/users/islemaster","html_url":"https://github.com/islemaster","followers_url":"https://api.github.com/users/islemaster/followers","following_url":"https://api.github.com/users/islemaster/following{/other_user}","gists_url":"https://api.github.com/users/islemaster/gists{/gist_id}","starred_url":"https://api.github.com/users/islemaster/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/islemaster/subscriptions","organizations_url":"https://api.github.com/users/islemaster/orgs","repos_url":"https://api.github.com/users/islemaster/repos","events_url":"https://api.github.com/users/islemaster/events{/privacy}","received_events_url":"https://api.github.com/users/islemaster/received_events","type":"User","site_admin":false},"created_at":"2016-02-26T00:43:18Z","updated_at":"2016-02-26T00:43:18Z","body":"CC @bcjordan @Bjvanminnen @joshlory @Hamms"}}