add warning
This commit is contained in:
@@ -0,0 +1,2 @@
|
|||||||
|
/dist
|
||||||
|
/node_modules
|
||||||
@@ -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
|
||||||
|
```
|
||||||
|
|||||||
+1
-2
@@ -1,10 +1,8 @@
|
|||||||
import React from "react";
|
import React from "react";
|
||||||
import ReactDOM from "react-dom";
|
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";
|
import css from "./styles.css";
|
||||||
|
|
||||||
|
|
||||||
class FormInput extends React.Component {
|
class FormInput extends React.Component {
|
||||||
constructor(props) {
|
constructor(props) {
|
||||||
super(props);
|
super(props);
|
||||||
@@ -75,6 +73,7 @@ class SheetEditor extends React.Component {
|
|||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
<FormInput newSheetFormHandler={this.newSheetFormHandler}/>
|
<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
|
<ReactCSSTransitionGroup
|
||||||
transitionName="sheetNames"
|
transitionName="sheetNames"
|
||||||
transitionAppear={true}
|
transitionAppear={true}
|
||||||
|
|||||||
Reference in New Issue
Block a user