| import React from 'react'; | |
| export default (req, res, callback) => { | |
| // Do async work, consuming data off req if needed | |
| // Potentially set headers or other data on res | |
| // When all the data is loaded, call the callback with the component | |
| callback(React.createClass({ | |
| render() { | |
| return ( | |
| <html> |
| saveAuthor(event) { | |
| event.preventDefault(); | |
| if (!this.authorFormIsValid()) { | |
| return; | |
| } | |
| if (this.state.author.id) { | |
| this.props.actions.updateAuthor(this.state.author); | |
| } else { |
| const StatelessToggler = (props) => ( | |
| <div onClick={props.onToggle}> | |
| <div>{props.label}</div> | |
| {props.isOpen && props.children} | |
| </div> | |
| ) | |
| const Toggler = React.createClass({ | |
| getInitialState() { |
| // if I wanted to make this: | |
| <select> | |
| <option>(01) January</option> | |
| <option>(02) February</option> | |
| ... | |
| </select> | |
| // angular | |
| // | |
| // - $index, ng-each, "month in months", pipe (|) all have |
| import React, { Component } from 'react' | |
| import logo from './logo.svg' | |
| import './App.css' | |
| import { Route, Link, Redirect } from './Zero' | |
| const paths = [ 'one', 'two', 'three' ] | |
| class App extends Component { | |
| render() { |
| <body> | |
| <div id="⚛️"></div> | |
| <script src="https://unpkg.com/react@16.0.0/umd/react.development.js"></script> | |
| <script src="https://unpkg.com/react-dom@16.0.0/umd/react-dom.development.js"></script> | |
| <script src="https://unpkg.com/babel-standalone@6.26.0/babel.js"></script> | |
| <script type="text/babel"> | |
| ReactDOM.render(<div>Hello World!</div>, document.getElementById('⚛️')) | |
| </script> | |
| </body> |
| import React, { Component } from 'react' | |
| import Subapp from './subapp/Root' | |
| class BigApp extends Component { | |
| render() { | |
| return ( | |
| <div> | |
| <Subapp /> | |
| <Subapp /> | |
| <Subapp /> |
| // create a React context Provider/Consumer pair that | |
| // validates the consumer is rendered within a provider | |
| function createRequiredContext(name) { | |
| const Context = React.createContext() | |
| function Consumer(props) { | |
| return ( | |
| <Context.Consumer {...props}> | |
| {val => { | |
| if (!val) { |
| // Promise.all is good for executing many promises at once | |
| Promise.all([ | |
| promise1, | |
| promise2 | |
| ]); | |
| // Promise.resolve is good for wrapping synchronous code | |
| Promise.resolve().then(function () { | |
| if (somethingIsNotRight()) { | |
| throw new Error("I will be rejected asynchronously!"); |
Note:
When this guide is more complete, the plan is to move it into Prepack documentation.
For now I put it out as a gist to gather initial feedback.
If you're building JavaScript apps, you might already be familiar with some tools that compile JavaScript code to equivalent JavaScript code: