├── .gitignore ├── LICENSE ├── README.md ├── package.json ├── server.js └── src ├── core ├── SiteBoilerPlate.js └── SiteBoilerPlateStyleRules.js ├── elements ├── Banner │ ├── Banner.js │ ├── BannerStyleRules.js │ ├── ReactPageLogo.png │ └── ReactPageLogo@2x.png ├── VectorWidget │ └── VectorWidget.js └── favicon │ └── favicon.ico ├── index.js └── pages └── about.js /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | npm-debug.log 3 | .DS_Store 4 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Apache License 2 | Version 2.0, January 2004 3 | http://www.apache.org/licenses/ 4 | 5 | TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION 6 | 7 | 1. Definitions. 8 | 9 | "License" shall mean the terms and conditions for use, reproduction, 10 | and distribution as defined by Sections 1 through 9 of this document. 11 | 12 | "Licensor" shall mean the copyright owner or entity authorized by 13 | the copyright owner that is granting the License. 14 | 15 | "Legal Entity" shall mean the union of the acting entity and all 16 | other entities that control, are controlled by, or are under common 17 | control with that entity. For the purposes of this definition, 18 | "control" means (i) the power, direct or indirect, to cause the 19 | direction or management of such entity, whether by contract or 20 | otherwise, or (ii) ownership of fifty percent (50%) or more of the 21 | outstanding shares, or (iii) beneficial ownership of such entity. 22 | 23 | "You" (or "Your") shall mean an individual or Legal Entity 24 | exercising permissions granted by this License. 25 | 26 | "Source" form shall mean the preferred form for making modifications, 27 | including but not limited to software source code, documentation 28 | source, and configuration files. 29 | 30 | "Object" form shall mean any form resulting from mechanical 31 | transformation or translation of a Source form, including but 32 | not limited to compiled object code, generated documentation, 33 | and conversions to other media types. 34 | 35 | "Work" shall mean the work of authorship, whether in Source or 36 | Object form, made available under the License, as indicated by a 37 | copyright notice that is included in or attached to the work 38 | (an example is provided in the Appendix below). 39 | 40 | "Derivative Works" shall mean any work, whether in Source or Object 41 | form, that is based on (or derived from) the Work and for which the 42 | editorial revisions, annotations, elaborations, or other modifications 43 | represent, as a whole, an original work of authorship. For the purposes 44 | of this License, Derivative Works shall not include works that remain 45 | separable from, or merely link (or bind by name) to the interfaces of, 46 | the Work and Derivative Works thereof. 47 | 48 | "Contribution" shall mean any work of authorship, including 49 | the original version of the Work and any modifications or additions 50 | to that Work or Derivative Works thereof, that is intentionally 51 | submitted to Licensor for inclusion in the Work by the copyright owner 52 | or by an individual or Legal Entity authorized to submit on behalf of 53 | the copyright owner. For the purposes of this definition, "submitted" 54 | means any form of electronic, verbal, or written communication sent 55 | to the Licensor or its representatives, including but not limited to 56 | communication on electronic mailing lists, source code control systems, 57 | and issue tracking systems that are managed by, or on behalf of, the 58 | Licensor for the purpose of discussing and improving the Work, but 59 | excluding communication that is conspicuously marked or otherwise 60 | designated in writing by the copyright owner as "Not a Contribution." 61 | 62 | "Contributor" shall mean Licensor and any individual or Legal Entity 63 | on behalf of whom a Contribution has been received by Licensor and 64 | subsequently incorporated within the Work. 65 | 66 | 2. Grant of Copyright License. Subject to the terms and conditions of 67 | this License, each Contributor hereby grants to You a perpetual, 68 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable 69 | copyright license to reproduce, prepare Derivative Works of, 70 | publicly display, publicly perform, sublicense, and distribute the 71 | Work and such Derivative Works in Source or Object form. 72 | 73 | 3. Grant of Patent License. Subject to the terms and conditions of 74 | this License, each Contributor hereby grants to You a perpetual, 75 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable 76 | (except as stated in this section) patent license to make, have made, 77 | use, offer to sell, sell, import, and otherwise transfer the Work, 78 | where such license applies only to those patent claims licensable 79 | by such Contributor that are necessarily infringed by their 80 | Contribution(s) alone or by combination of their Contribution(s) 81 | with the Work to which such Contribution(s) was submitted. If You 82 | institute patent litigation against any entity (including a 83 | cross-claim or counterclaim in a lawsuit) alleging that the Work 84 | or a Contribution incorporated within the Work constitutes direct 85 | or contributory patent infringement, then any patent licenses 86 | granted to You under this License for that Work shall terminate 87 | as of the date such litigation is filed. 88 | 89 | 4. Redistribution. You may reproduce and distribute copies of the 90 | Work or Derivative Works thereof in any medium, with or without 91 | modifications, and in Source or Object form, provided that You 92 | meet the following conditions: 93 | 94 | (a) You must give any other recipients of the Work or 95 | Derivative Works a copy of this License; and 96 | 97 | (b) You must cause any modified files to carry prominent notices 98 | stating that You changed the files; and 99 | 100 | (c) You must retain, in the Source form of any Derivative Works 101 | that You distribute, all copyright, patent, trademark, and 102 | attribution notices from the Source form of the Work, 103 | excluding those notices that do not pertain to any part of 104 | the Derivative Works; and 105 | 106 | (d) If the Work includes a "NOTICE" text file as part of its 107 | distribution, then any Derivative Works that You distribute must 108 | include a readable copy of the attribution notices contained 109 | within such NOTICE file, excluding those notices that do not 110 | pertain to any part of the Derivative Works, in at least one 111 | of the following places: within a NOTICE text file distributed 112 | as part of the Derivative Works; within the Source form or 113 | documentation, if provided along with the Derivative Works; or, 114 | within a display generated by the Derivative Works, if and 115 | wherever such third-party notices normally appear. The contents 116 | of the NOTICE file are for informational purposes only and 117 | do not modify the License. You may add Your own attribution 118 | notices within Derivative Works that You distribute, alongside 119 | or as an addendum to the NOTICE text from the Work, provided 120 | that such additional attribution notices cannot be construed 121 | as modifying the License. 122 | 123 | You may add Your own copyright statement to Your modifications and 124 | may provide additional or different license terms and conditions 125 | for use, reproduction, or distribution of Your modifications, or 126 | for any such Derivative Works as a whole, provided Your use, 127 | reproduction, and distribution of the Work otherwise complies with 128 | the conditions stated in this License. 129 | 130 | 5. Submission of Contributions. Unless You explicitly state otherwise, 131 | any Contribution intentionally submitted for inclusion in the Work 132 | by You to the Licensor shall be under the terms and conditions of 133 | this License, without any additional terms or conditions. 134 | Notwithstanding the above, nothing herein shall supersede or modify 135 | the terms of any separate license agreement you may have executed 136 | with Licensor regarding such Contributions. 137 | 138 | 6. Trademarks. This License does not grant permission to use the trade 139 | names, trademarks, service marks, or product names of the Licensor, 140 | except as required for reasonable and customary use in describing the 141 | origin of the Work and reproducing the content of the NOTICE file. 142 | 143 | 7. Disclaimer of Warranty. Unless required by applicable law or 144 | agreed to in writing, Licensor provides the Work (and each 145 | Contributor provides its Contributions) on an "AS IS" BASIS, 146 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or 147 | implied, including, without limitation, any warranties or conditions 148 | of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A 149 | PARTICULAR PURPOSE. You are solely responsible for determining the 150 | appropriateness of using or redistributing the Work and assume any 151 | risks associated with Your exercise of permissions under this License. 152 | 153 | 8. Limitation of Liability. In no event and under no legal theory, 154 | whether in tort (including negligence), contract, or otherwise, 155 | unless required by applicable law (such as deliberate and grossly 156 | negligent acts) or agreed to in writing, shall any Contributor be 157 | liable to You for damages, including any direct, indirect, special, 158 | incidental, or consequential damages of any character arising as a 159 | result of this License or out of the use or inability to use the 160 | Work (including but not limited to damages for loss of goodwill, 161 | work stoppage, computer failure or malfunction, or any and all 162 | other commercial damages or losses), even if such Contributor 163 | has been advised of the possibility of such damages. 164 | 165 | 9. Accepting Warranty or Additional Liability. While redistributing 166 | the Work or Derivative Works thereof, You may choose to offer, 167 | and charge a fee for, acceptance of support, warranty, indemnity, 168 | or other liability obligations and/or rights consistent with this 169 | License. However, in accepting such obligations, You may act only 170 | on Your own behalf and on Your sole responsibility, not on behalf 171 | of any other Contributor, and only if You agree to indemnify, 172 | defend, and hold each Contributor harmless for any liability 173 | incurred by, or claims asserted against, such Contributor by reason 174 | of your accepting any such warranty or additional liability. 175 | 176 | END OF TERMS AND CONDITIONS 177 | 178 | APPENDIX: How to apply the Apache License to your work. 179 | 180 | To apply the Apache License to your work, attach the following 181 | boilerplate notice, with the fields enclosed by brackets "[]" 182 | replaced with your own identifying information. (Don't include 183 | the brackets!) The text should be enclosed in the appropriate 184 | comment syntax for the file format. We also recommend that a 185 | file or class name and description of purpose be included on the 186 | same "printed page" as the copyright notice for easier 187 | identification within third-party archives. 188 | 189 | Copyright [yyyy] [name of copyright owner] 190 | 191 | Licensed under the Apache License, Version 2.0 (the "License"); 192 | you may not use this file except in compliance with the License. 193 | You may obtain a copy of the License at 194 | 195 | http://www.apache.org/licenses/LICENSE-2.0 196 | 197 | Unless required by applicable law or agreed to in writing, software 198 | distributed under the License is distributed on an "AS IS" BASIS, 199 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 200 | See the License for the specific language governing permissions and 201 | limitations under the License. 202 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -

Render [React](http://www.github.com/facebook/react/) pages on the server or client - _effortlessly_.

5 | -

Use CommonJS to build and share UI components.

6 | -

Develop rapidly - instant reloading.

7 | 8 |
9 | 10 | ##Install 11 | 12 | > Clone this project 13 | 14 | git clone https://github.com/facebook/react-page 15 | cd react-page 16 | npm install # install dependencies. 17 | 18 | > Try out the server rendering 19 | 20 | node server.js 21 | # open http://localhost:8080/index.html 22 | # Make changes to src/index.js, and refresh instantly! 23 | 24 | 25 | ##Philosophy 26 | 27 | ##### Why Server Rendering? 28 | 29 | - Faster Pages: Markup displayed before downloading JS (with SEO benefits) 30 | - Page generation on a fast server vs. low power client devices. 31 | - Instantly refresh while developing. 32 | - Static content sites: As easy as a single `wget` command. 33 | 34 | 35 | ##### Why React? 36 | 37 | - React is a client/server rendering framework from the ground up. 38 | - When performance constraints change, simply change _where_ you render it - don't change your app. 39 | - React is functional. Explore the documentation on the [React Github Page](http://www.github.com/facebook/react/). 40 | - Server rendering optional - you can always just use React as a declarative client side framework. 41 | 42 | 43 | ##Developing 44 | 45 | #### Default Project Structure 46 | 47 | The included directory structure suggests a way to organize a single _or_ multi-page app. 48 | `npm install` other components/libraries and they automatically work. It's the same commonJS 49 | that you know and love. 50 | 51 | 52 | react-page/ 53 | ├── package.json # Add npm dependencies here. 54 | ├── server.js # Start web server with `node server.js` 55 | ├── ... # Create more pages/directories here 56 | └── src # All your application JS. 57 | ├── elements/ # Shared React components. 58 | │ ├── SiteBoilerPlate.js # Reusable html/body component 59 | │ └── Banner.js # An example component for displaying text 60 | │ 61 | ├── index.js # localhost:8080/index.html routed here 62 | └── pages # Make your site structure 63 | └── about.js # localhost:8080/pages/about.html 64 | 65 | 66 | #### Everything Is A Component 67 | 68 | React's philosophy is that mutation-minimal functions and composition are the 69 | best tools for building sophisticated applications with low complexity. In React, 70 | _"components"_ are the tool for composing. `react-page` embraces this simplicity, 71 | even allowing the _entire page_ to be expressed as an arbitrarily deep composition 72 | of components. 73 | 74 | `react-page/src/index.js` corresponds to `index.html`. `index.js` is a React 75 | component that renders the ``,``, and all the contents of the page. 76 | 77 | If you look at `index.js`, you'll notice that it doesn't output all the `
`s 78 | and ``s directly - it _composes_ other components that take on much of that 79 | responsibility. `index.js` composes a `` component, and inside of `Banner.js`, 80 | you'll see that the implementation of `` outputs an `

` DOM component. 81 | Even DOM representations such as `

` are components in React 82 | 83 | To build out your app, just add or install more components with `npm`. 84 | 85 | #### Simple Default Page Routing 86 | 87 | Requests to `path/file.html` are routed to your React component located at 88 | `src/path/file.js`. By default all page requests are routed to the `src` 89 | directory, but you can customize that behavior via the `pageRouteRoot` setting. 90 | 91 | Here are a couple of examples of the default configuration: 92 | 93 | http://localhost:8080/index.html => react-page/src/pages/index.js 94 | http://localhost:8080/docs/hello.html => react-page/src/pages/docs/hello.js 95 | http://localhost:8080/pages/about.html => react-page/src/pages/about/index.js 96 | http://localhost:8080/path/img.png => react-page/src/path/img.png 97 | 98 | 99 | - Currently, every `html` routing must map to a `.js` file that exports a single React 100 | component, that renders the page, including `html/body` tags. 101 | - Routing is customizable (more later). 102 | 103 | 104 | ## How Does Server Rendering Work? 105 | 106 | - `react-page` computes page markup on the server, sends it to the client so the 107 | user can see it quickly. 108 | - The corresponding JavaScript is then packaged and sent. 109 | - The browser runs that JavaScript, so that all of the event handlers, 110 | interactions and update code will run seamlessly on top of the server 111 | generated markup. 112 | - From the developer's (and the user's) perspective, it's just as if the 113 | rendering occurred on the client, only faster. 114 | 115 | 116 | 117 | ## Command Line Usage: 118 | 119 | # --useSourceMaps=true # default:true 120 | # --useBrowserBuiltins=false # Allow node modules (util) - default:false 121 | # --logTiming=true # Shows colored timing metrics - default:true 122 | # --pageRouteRoot= # page URLs root - default: react-page/src 123 | 124 | # for example: 125 | node server.js --useSourceMaps=true 126 | 127 | 128 | **Node Modules in the Browser:** You can use modules installed via `npm`, 129 | but if anything requires builtin modules (such as `util`), make sure to 130 | enable the `useBrowserBuiltins` option. 131 | 132 | 133 | 134 | ## React As A Blogging Engine: 135 | 136 | React can power dynamic, network-connected apps. But with `react-page`, React 137 | can also be used to build a static blog, Github documentation, or any other 138 | static site. Because `react-page` uses server rendering, creating a static site 139 | is as easy as a single `wget` command. 140 | 141 | node server.js 142 | wget -mpck --user-agent="" -e robots=off http://localhost:8080/index.html 143 | # get wget on OS X: try http://osxdaily.com/2012/05/22/install-wget-mac-os-x/ 144 | # or if you have brew: brew install wget 145 | 146 | This prebuilds your entire interactive site, so it can be served from a file server or github etc. 147 | **Don't forget** to enable gzip on your file server! React markup is large but compresses very well. 148 | 149 | 150 | 151 | ## Motivations/Next-Steps: 152 | 153 | -`react-page` is a rapid development environment for experimenting with new ways of 154 | building production web apps powered by React. It provides a common environment 155 | that allows sharing of modules client/server architecture prototypes. 156 | 157 | In order to use this technology in a production environment, you must audit and 158 | verify that the server rendering strategy is safe and suitable for your purposes. 159 | 160 | - You must ensure that a proper server sandbox is enforced. However, `react-page` 161 | _does_ run your UI rendering code inside of contextify as a preliminary sandbox. 162 | 163 | - In production, the js packaging features of `react-page` should be performed 164 | ahead of time and stored in a CDN. However, dynamic server rendering 165 | is a compelling production feature. 166 | 167 | - Additional connect middleware should be added to prevent stack traces from showing 168 | up in browser. 169 | 170 | 171 | #### TODO: 172 | 173 | - Allow sharing of css/images through npm packages. 174 | - Experiments with optimizing page load time - incremental streaming of 175 | markup/resources. 176 | - Advanced packaging such as splitting projects into several independently 177 | cacheable sub-packages. 178 | - require('image/path/img.jpg') should resolve to image path. 179 | - A way to automatically package/bundle css, regardless of file path of 180 | depending js resource. (using require('commonJSPath/to/css.css')) 181 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-page", 3 | "version": "0.2.0", 4 | "description": "Starter Application for React, CommonJS, JSX, Server Rendering.", 5 | "main": "index.js", 6 | "dependencies": { 7 | "React": "git://github.com/facebook/react.git", 8 | "react-styles": "git://github.com/hedgerwang/react-styles.git", 9 | "optimist": "0.6.0", 10 | "react-page-middleware": "git://github.com/facebook/react-page-middleware.git", 11 | "connect": "2.8.3" 12 | }, 13 | "author": { 14 | "name": "Jordan Walke", 15 | "email": "jordwalke@facebook.com", 16 | "url": "http://github.com/jordwalke" 17 | }, 18 | "engines": { 19 | "node": ">=0.10.0" 20 | }, 21 | "license": "Apache-2.0" 22 | } 23 | -------------------------------------------------------------------------------- /server.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright 2013 Facebook, Inc. 3 | * 4 | * Licensed under the Apache License, Version 2.0 (the "License"); 5 | * you may not use this file except in compliance with the License. 6 | * You may obtain a copy of the License at 7 | * 8 | * http://www.apache.org/licenses/LICENSE-2.0 9 | * 10 | * Unless required by applicable law or agreed to in writing, software 11 | * distributed under the License is distributed on an "AS IS" BASIS, 12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | * See the License for the specific language governing permissions and 14 | * limitations under the License. 15 | */ 16 | "use strict"; 17 | var connect = require('connect'); 18 | var http = require('http'); 19 | var optimist = require('optimist'); 20 | var path = require('path'); 21 | var reactMiddleware = require('react-page-middleware'); 22 | 23 | var argv = optimist.argv; 24 | 25 | var PROJECT_ROOT = __dirname; 26 | var FILE_SERVE_ROOT = path.join(PROJECT_ROOT, 'src'); 27 | 28 | var port = argv.port; 29 | 30 | var isServer = !argv.computeForPath; 31 | 32 | var serverDefaults = { 33 | useBrowserBuiltins: false, 34 | logTiming: true, 35 | useSourceMaps: true, 36 | pageRouteRoot: FILE_SERVE_ROOT 37 | }; 38 | 39 | var computeDefaults = { 40 | useBrowserBuiltins: false, 41 | logTiming: false, 42 | useSourceMaps: false, 43 | pageRouteRoot: FILE_SERVE_ROOT 44 | }; 45 | 46 | var defaults = isServer ? serverDefaults : computeDefaults; 47 | 48 | var buildOptions = { 49 | projectRoot: PROJECT_ROOT, 50 | useBrowserBuiltins: // Include node util modules. 51 | 'useBrowserBuiltins' in argv ? 52 | argv.useBrowserBuiltins === 'true' : 53 | defaults.useBrowserBuiltins, 54 | logTiming: 'logTiming' in argv ? // Colored timing logs. 55 | argv.logTiming === 'true' : 56 | defaults.logTiming, 57 | pageRouteRoot: 'pageRouteRoot' in argv ? 58 | argv.pageRouteRoot : defaults.pageRouteRoot, // URLs based in this directory 59 | useSourceMaps: 'useSourceMaps' in argv ? 60 | argv.useSourceMaps === 'true' : 61 | defaults.useSourceMaps, // Generate client source maps. 62 | ignorePaths: function(p) { // Additional filtering 63 | return p.indexOf('__tests__') !== -1; 64 | }, 65 | blacklistRE: argv.blacklistRE && new RegExp(argv.blacklistRE), 66 | dev: argv.dev === 'true' 67 | }; 68 | 69 | if (!isServer) { 70 | reactMiddleware.compute(buildOptions)(argv.computeForPath, function(str) { 71 | process.stdout.write(str); 72 | }); 73 | } else { 74 | var app = connect() 75 | .use(reactMiddleware.provide(buildOptions)) 76 | .use(connect['static'](FILE_SERVE_ROOT)) 77 | .use(connect.favicon(path.join(FILE_SERVE_ROOT, 'elements', 'favicon', 'favicon.ico'))) 78 | .use(connect.logger()) 79 | .use(connect.compress()) 80 | .use(connect.errorHandler()); 81 | 82 | var portToUse = port || 8080; 83 | http.createServer(app).listen(portToUse); 84 | console.log('Open http://localhost:' + portToUse + '/index.html'); 85 | } 86 | -------------------------------------------------------------------------------- /src/core/SiteBoilerPlate.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright 2013 Facebook, Inc. 3 | * 4 | * Licensed under the Apache License, Version 2.0 (the "License"); 5 | * you may not use this file except in compliance with the License. 6 | * You may obtain a copy of the License at 7 | * 8 | * http://www.apache.org/licenses/LICENSE-2.0 9 | * 10 | * Unless required by applicable law or agreed to in writing, software 11 | * distributed under the License is distributed on an "AS IS" BASIS, 12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | * See the License for the specific language governing permissions and 14 | * limitations under the License. 15 | * 16 | * @jsx React.DOM 17 | */ 18 | 19 | var React = require('React'); 20 | var ReactStyle = require('ReactStyle'); 21 | var ReactStyleHead = require('ReactStyleHead'); 22 | var SiteBoilerPlateStyleRules = require('./SiteBoilerPlateStyleRules.js'); 23 | 24 | /** 25 | * We should support/experiment with modelling css dependencies using the exact 26 | * same commonJS resolution, so that we can include CSS files in our React npm 27 | * modules. An npm module should include everything needed to work with your 28 | * component - and it is impossible to know where your component will be 29 | * installed to. 30 | * 31 | * // Depends on css from my project - relative paths automatically resolved. 32 | * require('./SiteBoilerPlate.css'); 33 | * 34 | * // Depends on css from dependency 'bootstrap' in package.json 35 | * require('bootstrap/Text-Input.css'); 36 | * 37 | * For now, you have to use {ReactStyle#addRules} to make sure the 38 | * index.js page includes the styles that your project depends on directly. 39 | * Even in that case, we'll use commonJS resolution for css files as well, 40 | * so that if you whitelist things in node_modules for inclusion in your 41 | * bundle, the resources in those will be 42 | * accessible as well. 43 | */ 44 | 45 | /** 46 | * Component for performing some redundant site wrapping. Customize to your 47 | * liking, or create a new, similar module. `react-page` automatically ensures 48 | * that all fo the JavaScript used to generate the page, will be bundled and 49 | * sent into the response so that all the event handlers will work. 50 | * 51 | * Usage: 52 | * 53 | * var React = require('React'); 54 | * var SiteBoilerPlate = require('./components/SiteBoilerPlate.jsx'); 55 | * var MyPage = React.createClass({ 56 | * render: function() { 57 | * return ( 58 | * 59 | *
Hello This Is My App!
60 | * 61 | * ); 62 | * } 63 | * }); 64 | */ 65 | 66 | ReactStyle.addRules(SiteBoilerPlateStyleRules); 67 | 68 | var SiteBoilerPlate = React.createClass({ 69 | render: function() { 70 | return ( 71 | 72 | 73 | 74 | React Page | Client-Server JavaScript Rendering 75 | 79 | 80 | 81 | {this.props.children} 82 | 83 | 84 | ); 85 | } 86 | }); 87 | 88 | module.exports = SiteBoilerPlate; 89 | -------------------------------------------------------------------------------- /src/core/SiteBoilerPlateStyleRules.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright 2013 Facebook, Inc. 3 | * 4 | * Licensed under the Apache License, Version 2.0 (the "License"); 5 | * you may not use this file except in compliance with the License. 6 | * You may obtain a copy of the License at 7 | * 8 | * http://www.apache.org/licenses/LICENSE-2.0 9 | * 10 | * Unless required by applicable law or agreed to in writing, software 11 | * distributed under the License is distributed on an "AS IS" BASIS, 12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | * See the License for the specific language governing permissions and 14 | * limitations under the License. 15 | */ 16 | "use strict"; 17 | 18 | var ReactStyle = require('ReactStyle'); 19 | 20 | var SiteBoilerPlateStyleRules = ReactStyle.create({ 21 | '*': { 22 | boxSizing: 'border-box' 23 | } 24 | }); 25 | 26 | module.exports = SiteBoilerPlateStyleRules; 27 | -------------------------------------------------------------------------------- /src/elements/Banner/Banner.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright 2013 Facebook, Inc. 3 | * 4 | * Licensed under the Apache License, Version 2.0 (the "License"); 5 | * you may not use this file except in compliance with the License. 6 | * You may obtain a copy of the License at 7 | * 8 | * http://www.apache.org/licenses/LICENSE-2.0 9 | * 10 | * Unless required by applicable law or agreed to in writing, software 11 | * distributed under the License is distributed on an "AS IS" BASIS, 12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | * See the License for the specific language governing permissions and 14 | * limitations under the License. 15 | * 16 | * @jsx React.DOM 17 | */ 18 | "use strict"; 19 | 20 | var React = require('React'); 21 | var BannerStyleRules = require('./BannerStyleRules.js'); 22 | var ReactStyle = require('ReactStyle'); 23 | 24 | /** 25 | * We should support/experiment with modelling css dependencies using the exact 26 | * same commonJS resolution, so that we can include CSS files in our React npm 27 | * modules. An npm module should include everything needed to work with your 28 | * component - and it is impossible to know where your component will be 29 | * installed to. 30 | * 31 | * // Depends on css from my project - relative paths automatically resolved. 32 | * require('./Banner.css'); 33 | * 34 | * // Depends on css from dependency 'bootstrap' in package.json 35 | * require('bootstrap/Text-Input.css'); 36 | * 37 | * For now, you have to use {ReactStyle#addRules} to make sure the 38 | * index.js page includes the styles that your project depends on directly. 39 | * Even in that case, we'll use commonJS resolution for css files as well, 40 | * so that if you whitelist things in node_modules for inclusion in your 41 | * bundle, the resources in those will be 42 | * accessible as well. 43 | */ 44 | 45 | ReactStyle.addRules(BannerStyleRules); 46 | 47 | /** 48 | * Look at Banner, Michael! 49 | */ 50 | var Banner = React.createClass({ 51 | getInitialState: function() { 52 | return {initialized: false}; 53 | }, 54 | 55 | componentDidMount: function() { 56 | this.setState({initialized: true}); 57 | }, 58 | 59 | render: function() { 60 | 61 | var classes = [ 62 | BannerStyleRules.banner, 63 | this.state.initialized ? BannerStyleRules.fadeIn : '' 64 | ].join(' '); 65 | return ( 66 |

67 | {this.props.bannerMessage} 68 |

69 | ); 70 | } 71 | }); 72 | 73 | module.exports = Banner; 74 | -------------------------------------------------------------------------------- /src/elements/Banner/BannerStyleRules.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright 2013 Facebook, Inc. 3 | * 4 | * Licensed under the Apache License, Version 2.0 (the "License"); 5 | * you may not use this file except in compliance with the License. 6 | * You may obtain a copy of the License at 7 | * 8 | * http://www.apache.org/licenses/LICENSE-2.0 9 | * 10 | * Unless required by applicable law or agreed to in writing, software 11 | * distributed under the License is distributed on an "AS IS" BASIS, 12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | * See the License for the specific language governing permissions and 14 | * limitations under the License. 15 | */ 16 | "use strict"; 17 | 18 | var ReactStyle = require('ReactStyle'); 19 | 20 | var BannerStyleRules = ReactStyle.create({ 21 | 'h1.banner': { 22 | opacity: '0', 23 | fontFamily: 'Helvetica', 24 | color: '#444', 25 | fontWeight: 'bold', 26 | marginTop: '60px', 27 | marginBottom: '0', 28 | textAlign: 'center', 29 | '-webkit-user-select': 'none', 30 | fontSize: '5vh', /* Chrome bug prevents resizing on window resize! */ 31 | width: '100%' /* Putting width 100% causes repaint on resize */ 32 | }, 33 | 'h1.banner.fadeIn': { 34 | opacity: '1', 35 | transition: 'opacity 3s ease-in' 36 | } 37 | }); 38 | 39 | module.exports = BannerStyleRules; 40 | -------------------------------------------------------------------------------- /src/elements/Banner/ReactPageLogo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jordwalke/react-page/eb2efe1d10f5a2f5134edf564e6934f3f0c86ae3/src/elements/Banner/ReactPageLogo.png -------------------------------------------------------------------------------- /src/elements/Banner/ReactPageLogo@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jordwalke/react-page/eb2efe1d10f5a2f5134edf564e6934f3f0c86ae3/src/elements/Banner/ReactPageLogo@2x.png -------------------------------------------------------------------------------- /src/elements/VectorWidget/VectorWidget.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright 2013 Facebook, Inc. 3 | * 4 | * Licensed under the Apache License, Version 2.0 (the "License"); 5 | * you may not use this file except in compliance with the License. 6 | * You may obtain a copy of the License at 7 | * 8 | * http://www.apache.org/licenses/LICENSE-2.0 9 | * 10 | * Unless required by applicable law or agreed to in writing, software 11 | * distributed under the License is distributed on an "AS IS" BASIS, 12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | * See the License for the specific language governing permissions and 14 | * limitations under the License. 15 | * 16 | * @jsx React.DOM 17 | */ 18 | "use strict"; 19 | 20 | var React = require('React'); 21 | var path = React.DOM.path; 22 | 23 | var MOUSE_UP_DRAG = 0.978; 24 | var MOUSE_DOWN_DRAG = 0.9; 25 | var MAX_VEL = 11; 26 | var CLICK_ACCEL = 3; 27 | var BASE_VEL = 0.15; 28 | 29 | /** 30 | * An animated SVG component. 31 | */ 32 | var VectorWidget = React.createClass({ 33 | /** 34 | * Initialize state members. 35 | */ 36 | getInitialState: function() { 37 | return {degrees: 0, velocity: 0, drag: MOUSE_UP_DRAG}; 38 | }, 39 | 40 | /** 41 | * When the component is mounted into the document - this is similar to a 42 | * constructor, but invoked when the instance is actually mounted into the 43 | * document. Here's, we'll just set up an animation loop that invokes our 44 | * method. Binding of `this.onTick` is not needed because all React methods 45 | * are automatically bound before being mounted. 46 | */ 47 | componentDidMount: function() { 48 | this._interval = window.setInterval(this.onTick, 20); 49 | }, 50 | 51 | componentWillUnmount: function() { 52 | window.clearInterval(this._interval); 53 | }, 54 | 55 | onTick: function() { 56 | var nextDegrees = this.state.degrees + BASE_VEL + this.state.velocity; 57 | var nextVelocity = this.state.velocity * this.state.drag; 58 | this.setState({degrees: nextDegrees, velocity: nextVelocity}); 59 | }, 60 | 61 | /** 62 | * When mousing down, we increase the friction down the velocity. 63 | */ 64 | handleMouseDown: function() { 65 | this.setState({drag: MOUSE_DOWN_DRAG}); 66 | }, 67 | 68 | /** 69 | * Cause the rotation to "spring". 70 | */ 71 | handleMouseUp: function() { 72 | var nextVelocity = Math.min(this.state.velocity + CLICK_ACCEL, MAX_VEL); 73 | this.setState({velocity: nextVelocity, drag: MOUSE_UP_DRAG}); 74 | }, 75 | 76 | /** 77 | * This is the "main" method for any component. The React API allows you to 78 | * describe the structure of your UI component at *any* point in time. 79 | */ 80 | render: function() { 81 | var rotationStyle = { 82 | '-webkit-transform-origin': '50% 50%', 83 | '-webkit-transform': 'rotate(' + this.state.degrees + 'deg)' 84 | }; 85 | return ( 86 | 94 | {this.renderGraphic(rotationStyle)} 95 | 96 | ); 97 | }, 98 | 99 | /** 100 | * Better SVG support for React coming soon. 101 | */ 102 | renderGraphic: function(rotationStyle) { 103 | 104 | return ( 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | 121 | 122 | 123 | 124 | 125 | ); 126 | } 127 | }); 128 | 129 | var BORDER_PATH = "M3.00191459,4 C1.34400294,4 0,5.34785514 0,7.00550479 L0,220.994495 C0,222.65439 1.34239483,224 3.00191459,224 L276.998085,224 C278.655997,224 280,222.652145 280,220.994495 L280,7.00550479 C280,5.34561033 278.657605,4 276.998085,4 L3.00191459,4 Z M3.00191459,4"; 130 | var BG_PATH = "M3.00191459,1 C1.34400294,1 0,2.34785514 0,4.00550479 L0,217.994495 C0,219.65439 1.34239483,221 3.00191459,221 L276.998085,221 C278.655997,221 280,219.652145 280,217.994495 L280,4.00550479 C280,2.34561033 278.657605,1 276.998085,1 L3.00191459,1 Z M3.00191459,1"; 131 | var BAR_PATH = "M3.00191459,0 C1.34400294,0 0,1.34559019 0,3.00878799 L0,21 C0,21 0,21 0,21 L280,21 C280,21 280,21 280,21 L280,3.00878799 C280,1.34708027 278.657605,0 276.998085,0 L3.00191459,0 Z M3.00191459,0"; 132 | var RED_DOT_PATH = "M12.5,17 C16.0898511,17 19,14.0898511 19,10.5 C19,6.91014895 16.0898511,4 12.5,4 C8.91014895,4 6,6.91014895 6,10.5 C6,14.0898511 8.91014895,17 12.5,17 Z M12.5,17"; 133 | var YELLOW_DOT_PATH = "M31.5,17 C35.0898511,17 38,14.0898511 38,10.5 C38,6.91014895 35.0898511,4 31.5,4 C27.9101489,4 25,6.91014895 25,10.5 C25,14.0898511 27.9101489,17 31.5,17 Z M31.5,17"; 134 | var GREEN_DOT_PATH = "M50.5,17 C54.0898511,17 57,14.0898511 57,10.5 C57,6.91014895 54.0898511,4 50.5,4 C46.9101489,4 44,6.91014895 44,10.5 C44,14.0898511 46.9101489,17 50.5,17 Z M50.5,17"; 135 | var CENTER_DOT_PATH = "M84,105 C92.8365564,105 100,97.8365564 100,89 C100,80.1634436 92.8365564,73 84,73 C75.1634436,73 68,80.1634436 68,89 C68,97.8365564 75.1634436,105 84,105 Z M84,105"; 136 | var RING_ONE_PATH = "M84,121 C130.391921,121 168,106.673113 168,89 C168,71.3268871 130.391921,57 84,57 C37.6080787,57 0,71.3268871 0,89 C0,106.673113 37.6080787,121 84,121 Z M84,121"; 137 | var RING_TWO_PATH = "M84,121 C130.391921,121 168,106.673113 168,89 C168,71.3268871 130.391921,57 84,57 C37.6080787,57 0,71.3268871 0,89 C0,106.673113 37.6080787,121 84,121 Z M84,121"; 138 | var RING_THREE_PATH = "M84,121 C130.391921,121 168,106.673113 168,89 C168,71.3268871 130.391921,57 84,57 C37.6080787,57 0,71.3268871 0,89 C0,106.673113 37.6080787,121 84,121 Z M84,121"; 139 | var RING_TWO_ROTATE = "translate(84.000000, 89.000000) rotate(-240.000000) translate(-84.000000, -89.000000)"; 140 | var RING_THREE_ROTATE = "translate(84.000000, 89.000000) rotate(-300.000000) translate(-84.000000, -89.000000)"; 141 | 142 | module.exports = VectorWidget; 143 | 144 | -------------------------------------------------------------------------------- /src/elements/favicon/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jordwalke/react-page/eb2efe1d10f5a2f5134edf564e6934f3f0c86ae3/src/elements/favicon/favicon.ico -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright 2013 Facebook, Inc. 3 | * 4 | * Licensed under the Apache License, Version 2.0 (the "License"); 5 | * you may not use this file except in compliance with the License. 6 | * You may obtain a copy of the License at 7 | * 8 | * http://www.apache.org/licenses/LICENSE-2.0 9 | * 10 | * Unless required by applicable law or agreed to in writing, software 11 | * distributed under the License is distributed on an "AS IS" BASIS, 12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | * See the License for the specific language governing permissions and 14 | * limitations under the License. 15 | * 16 | * @jsx React.DOM 17 | */ 18 | 19 | var Banner = require('./elements/Banner/Banner.js'); 20 | var React = require('React'); 21 | var SiteBoilerPlate = require('./core/SiteBoilerPlate.js'); 22 | var VectorWidget = require('./elements/VectorWidget/VectorWidget.js'); 23 | 24 | var index = React.createClass({ 25 | render: function() { 26 | return ( 27 | 28 | 29 | 30 | 31 | ); 32 | } 33 | }); 34 | 35 | module.exports = index; 36 | -------------------------------------------------------------------------------- /src/pages/about.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright 2013 Facebook, Inc. 3 | * 4 | * Licensed under the Apache License, Version 2.0 (the "License"); 5 | * you may not use this file except in compliance with the License. 6 | * You may obtain a copy of the License at 7 | * 8 | * http://www.apache.org/licenses/LICENSE-2.0 9 | * 10 | * Unless required by applicable law or agreed to in writing, software 11 | * distributed under the License is distributed on an "AS IS" BASIS, 12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | * See the License for the specific language governing permissions and 14 | * limitations under the License. 15 | * 16 | * @jsx React.DOM 17 | */ 18 | 19 | 20 | var React = require('React'); 21 | var SiteBoilerPlate = require('../core/SiteBoilerPlate.js'); 22 | var Banner = require('../elements/Banner/Banner.js'); 23 | 24 | var index = React.createClass({ 25 | 26 | render: function() { 27 | return ( 28 | 29 | 30 | 31 | ); 32 | } 33 | }); 34 | 35 | module.exports = index; 36 | --------------------------------------------------------------------------------