add warning

Author: enuchi

.eslintignore

@@ -0,0 +1,2 @@
+/dist
+/node_modules

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
+```

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 (
       <div>
         <FormInput newSheetFormHandler={this.newSheetFormHandler}/>
+        <span>Clicking on the X will delete the respective sheet. This cannot be undoed. It is recommended you use this sample tool on a new, empty Spreadsheet.</span>
         <ReactCSSTransitionGroup
           transitionName="sheetNames"
           transitionAppear={true}