Skip to main content
Version: 1.x.x

Understand Your App

Let's take a closer look at the code of your first app. The source code lives in the src/ directory, containing these three files:

// root.jsx
import quip from "quip";
import App from "./App.jsx";
quip.apps.initialize({
    initializationCallback: function(rootNode) {
        ReactDOM.render(<App/>, rootNode);
    },
});
// App.jsx
import Styles from "./App.less";
export default class App extends React.Component {
    render() {
        return <div className={Styles.hello}>YES it worked!</div>;
    }
}
// App.less
.hello {
    display: flex;
    justify-content: center;
}

What's going on​

  • quip.apps.initialize() is the starting point. By calling it, your app notifies the Quip document that its code has loaded and it is ready for setup.
  • The Quip document then calls back into your app via initializationCallback to notify that setup is complete and all data for your app instance is ready.
  • Your app lives in an iframe — inside there, rootNode is the empty HTML element where your app must live. Your code can add anything to this HTML element, with or without React.
  • This code uses React to render <App/> into the HTML element.
    • Styles.hello refers to the .hello class name imported from App.less.
  • As you develop your app, you'll add new .jsx and .less files to the src/ directory (or subdirectories).