Question

是否有人尝试将React前端部署到Google Apps脚本网络应用程序？我正在尝试构建一个调用某些Google Apps脚本API的单页前端，例如获取驱动器文件列表并将一些结果保存到电子表格中。但是，所有React文档似乎都假设我使用的是Node.js后端，并且不太关注自定义构建/部署情况。如果您已经看到React with Google Apps Script的简单问候世界，我们将不胜感激！感谢。

Answer 1

我对React没有任何经验，但是他们的首发“你好，世界＆＃39;来自文档的示例在HTML模板中按预期工作。下面的脚本是电子表格绑定的，但同样适用于网络应用程序。

请注意，＆lt; script＆gt; 标记的属性 type =＆＃34; text / babel＆＃34; 是必需的。

sidebar.html

send_from_directory

Google表格侧栏中的结果：

Answer 2

https://github.com/marth141/react-gas

很久以前就知道这个问题了，但是我只是在Google Apps脚本上写了一个React东西。

您可以像样板一样使用它。使用src文件夹中的clasp将代码推入和拉入Google Apps脚本

Answer 3

我完全受到安东奇妙想法的启发！！很好！！为了增加他的想法，这里有一个行为类似模块和基本App类的appscript，我将redux添加到了混合中。

Code.gs

function include(filename) {
Logger.log(filename)
  return HtmlService.createHtmlOutputFromFile(filename).getContent();
}

function onOpen() {
  SlidesApp.getUi().createMenu('Picker')
      .addItem('Start', 'showSidebar')
      .addToUi();
}

function showSidebar() {
        var ui = HtmlService.createTemplateFromFile('Index').evaluate().setTitle(
            'Flashcards');
        SlidesApp.getUi().showSidebar(ui);
}

App.js.html

<script type="text/babel">
class App extends React.Component {
  constructor(){
    super();
  }
  render() {
    return (
    <div>Hello World</div>
    )
  }
}

</script>

index.js.html-没有Redux

  <script type="text/babel">
   ReactDOM.render(<App />, document.getElementById('root'));
  </script>

index.js.html-带redux

<script type="text/babel">  
   const Provider = ReactRedux.Provider
   ReactDOM.render(
     <Provider store={store}>
       <App />
     </Provider>, 
     document.getElementById('root'));
</script>

Index.html

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    // Libraries for adding redux
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-redux/5.0.7/react-redux.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/redux/4.0.0/redux.min.js"></script>

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>

  </head>
  <body>
  <div id="root"></div>
  <?!= include('App.js'); ?>
  // pull in redux if and when needed
  <?!= include('redux.js'); ?>
  <?!= include('index.js'); ?>
  </body>
</html>

redux.js.html

<script type="text/babel">      
  const initialState = {
    result: 1, 
    lastValues: []
  }


  const reducer = (state = initialState, action) => {
    switch (action.type){
      case "ADD": 
          state = {
            ...state,
            result : state.result + action.payload,
            lastValues: [...state.lastValues, action.payload]
          }          
        break;
    }
    return state;
  };  
  const store = Redux.createStore(reducer);

  store.subscribe( () => {
    console.log('Store updated!', store.getState());
  })

  store.dispatch({ type: "ADD", payload: 10 })
</script>

Answer 4

这里有很多很棒的项目。还包括功能齐全的演示应用程序，展示了如何在Google Apps脚本中使用React：

accepted answer

它使用clasp和webpack，因此您可以将所有所需的新javascript用于.gs服务器端代码（例如箭头功能，default Optional<Correlation> findOne( @Nonnull final String value, @Nullable final String environment, @Nullable final String application, @Nullable final String service) { final QSome Some = QSome.some; final BooleanBuilder builder = new BooleanBuilder(); ofNullable(service).map(some.service::eq).map(builder::and); ofNullable(application).map(some.application::eq).map(builder::and); ofNullable(environment).map(some.environment::eq).map(builder::and); builder.and(some.value.eq(value)); return findOne(builder); } / const等）

与Google Apps脚本一起使用

4 个答案: