diff --git a/.eslintignore b/.eslintignore index e69de29..246d599 100644 --- a/.eslintignore +++ b/.eslintignore @@ -0,0 +1,2 @@ +/dist +/node_modules \ No newline at end of file diff --git a/README.md b/README.md index edc1350..f66bb5b 100644 --- a/README.md +++ b/README.md @@ -1,2 +1,33 @@ -# React-Google-Apps-Script -# React-Google-Apps-Script +#React + Google Apps Script + +Use this repo as your boilerplate React app for use with Google Apps Script html dialogs. + +It uses labnol's excellent [apps-script-starter](https://github.com/labnol/apps-script-starter) project as a starting point, but adds support for client-side dialogs built with React, and shows how React pages can interact with Google Apps server-side script. + +**Installation** + + Set up the sample project: +``` +mkdir my-gas-react-app && cd my-gas-react-app +clone https://github.com/enuchi/React-Google-Apps-Script.git +npm install +``` +Create a new Google Sheets spreadsheet. Open the Script Editor (Tools --> Script Editor) and copy the ScriptId (File --> Project properties). + +Add the ScriptId to the .clasp.json file: +``` +// .clasp.json +{ + "rootDir": "dist", + "scriptId":"...paste scriptId here..." +} +``` +Log into CLASP, which lets you develop Apps Script projects locally, and follow the authorization flow: +``` +npx clasp login +``` +Build and deploy the app! +``` +npm run build +npm run deploy +``` diff --git a/src/index.jsx b/src/index.jsx index 1500458..70078a8 100644 --- a/src/index.jsx +++ b/src/index.jsx @@ -1,10 +1,8 @@ import React from "react"; import ReactDOM from "react-dom"; -import ReactCSSTransitionGroup from 'react-addons-css-transition-group'; - +import ReactCSSTransitionGroup from 'react-addons-css-transition-group'; import css from "./styles.css"; - class FormInput extends React.Component { constructor(props) { super(props); @@ -75,6 +73,7 @@ class SheetEditor extends React.Component { return (