Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 2 years ago.
The community reviewed whether to reopen this question 3 months ago and left it closed:
Original close reason(s) were not resolved
Improve this question
Has anyone tried deploying a React front end to a Google Apps Script web app? I'm trying to build a single page front end that calls some of the Google Apps Script apis, like get a list of drive files and save some results to a spreadsheet. However, all the React docs seem to assume I'm using a Node.js backend and don't focus much on custom build/deploy situations. If you have seen even a simple hello world for React with Google Apps Script, would be much appreciated! Thanks.
I have zero experience with React, but their starter 'Hello, World' example from the docs is working as expected inside HTML templates. The script below is spreadsheet-bound, but the same is applicable to web apps.
Note that the attribute type="text/babel" for the <script> tag is required.
sidebar.html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<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 id="root">
<script type="text/babel">
ReactDOM.render(<h1>Hello, world!</h1>, document.getElementById('root'));
</script>
</body>
</html>
Result in Google Sheets sidebar:
Lot of great projects here. Also including a full-featured demo app, showing how to use React with google apps script:
https://github.com/enuchi/React-Google-Apps-Script
It uses clasp and webpack, so you can use all the new javascript you want for your .gs server-side code (such as arrow functions, const/let, etc.)
https://github.com/marth141/react-gas
Know this question was asked a long time ago but I just wrote up a thing on Google Apps Script that is React.
You can use this as like a boilerplate. Use clasp in the src folder to push and pull code to Google Apps Script
I was totally inspired by Anton's amazing idea!! So great!! To add to his idea here is an appscript with module like behaviour and a base App class and I have added redux into the mix.
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 - without redux
<script type="text/babel">
ReactDOM.render(<App />, document.getElementById('root'));
</script>
index.js.html - with 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>
Related
Can you use React js static website only using cdn link?
Im trying to create a static website on webhosting service.
Yes, you can — in fact, that's how the Stack Snippets feature here supports React.
Here's an example that uses createElement instead of JSX (but keep reading):
const Example = () => {
return React.createElement("div", null, "Hello, React!");
};
ReactDOM.render(React.createElement(Example), document.getElementById("root"));
<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.development.js"></script>
That's probably want you want to do. You can still write JSX code, just compile it to non-JSX code (perhaps using Babel) before you put the compiled result in your public page. Or just write code using createElement directly.
You don't have to pre-compile JSX code, but you really, really should. It's possible to compile on-the-fly in the browser, but it takes a while, causing a significant delay on page load. But for completeness, here's how you can do that using the browser-hosted "standalone" Babel library:
<!-- Your code that needs compiling goes in a type="text/babel" `script` tag -->
<script type="text/babel" data-presets="react,stage-3">
const Example = () => {
return <div>Hello, React!</div>;
};
ReactDOM.render(<Example />, document.getElementById("root"));
</script>
<div id="root"></div>
<!-- This is what supports JSX compilation (and other transformations) -->
<script src="https://unpkg.com/#babel/standalone#7.10.3/babel.min.js"></script>
<!-- These are for React -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.development.js"></script>
Notice the delay on startup.
Just for completeness, if you need to compile async/await to non-async/await for obsolete browsers, you need another script:
<!-- This example supports `async` functions in obsolete environments that don't support them natively -->
<script type="text/babel" data-presets="es2017,react,stage-3">
function delay(ms, ...args) {
return new Promise(resolve => setTimeout(resolve, ms, ...args));
}
// Example component that has a `useEffect`
const { useState, useEffect } = React;
const Example = () => {
const [message, setMessage] = useState("Hello, React!");
useEffect(() => {
// A contrived async function for demo purposes only
(async () => {
await delay(800);
setMessage("Hello again React!");
})();
}, []);
return <div>{message}</div>;
};
ReactDOM.render(<Example />, document.getElementById("root"));
</script>
<div id="root"></div>
<!-- This is the script providing runtime support for compiled `async`/`await` code -->
<script src="https://unpkg.com/regenerator-runtime#0.13.2/runtime.js"></script>
<!-- This is what supports JSX compilation (and other transformations) -->
<script src="https://unpkg.com/#babel/standalone#7.10.3/babel.min.js"></script>
<!-- These are for React -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.development.js"></script>
Notice, again, the big delay on startup.
I suggest pre-compiling the code before putting it on the page, so it's more like the first snippet above that uses createElement, which is much faster.
From what I am understanding is, you want to make a simple react app using CDN in suppose index.html
Create one HTML file
Create index.html file and add the following content. This file contains the basic HTML boiler plate code.
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
Include CDN links
Inside head section add
<script crossorigin src="https://unpkg.com/react#17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom#17/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/#babel/standalone/babel.min.js"></script>
Create react component like this in the file
MainComponent is our react component
React component name should start with Capital letter
<script type="text/babel">
const MainContent = () => {
return (
<div>
<p>Main content goes here...</p>
</div>
);
}
//render the component to the DOM
ReactDOM.render(<MainContent />, document.getElementById('main-content'));
</script>
Open file
Open index.html file and you are done.
I have a massive JSON schema and I want to generate an HTML/JS form from it. It appears that the react-jsonschema-form is a good solution to this problem. The framework has great documentation, but it focuses on development using npm. For reasons that are out of scope for this question, I have to use it only via CDN + React without JSX. Unfortunately, I am not a Web developer and I am having a hard time to figure out how I can use different themes when developing with the CDN + React with no JSX. For far I have the following index.html working as expected:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<script src="react.development.js"></script>
<script src="react-dom.development.js"></script>
<script src="react-jsonschema-form.js"></script>
</head>
<body>
<div id="app"></div>
<script type="text/javascript">
const schema = {
title: "Todo",
type: "object",
required: ["title"],
properties: {
title: {type: "string", title: "Title", default: "A new task"}
}
};
var e = React.createElement;
const Form = JSONSchemaForm.default;
ReactDOM.render(
e(Form, {schema: schema}),
document.getElementById("app")
);
</script>
</body>
</html>
The .js files are downloaded and copied in the same directory with index.html. I am using version 2.5.1 of react-jsonschema-form.
I would be more than grateful if someone could point me to the right direction as to how I can render this using the different themes of the framework (e.g., Material UI).
Thank you
your HTML is only missing the inclusion of the CSS
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
React noob here, I am working on a simple JSX based component with the code below:
<!DOCTYPE html>
<html>
<head>
<title>React Boot camp Day 1</title>
</head>
<body>
<div id='app'></div>
<!--Needed for react code-->
<script crossorigin src="https://unpkg.com/react#16/umd/react.development.js"></script>
<!--Needed for react dom traversal-->
<script crossorigin src="https://unpkg.com/react-dom#16/umd/react-dom.development.js"></script>
<script src='https://unpkg.com/babel-standalone#6/babel.min.js'></script>
<script>
console.log('Test React', window.React)
const name = "Callat"
const handle = "#latimeks"
// create components and use jsx
function FirstComponent(props){
return <h1>{props.name}</h1>
}
function TestJSX(){
return (<FirstComponent name={name}/>)
}
ReactDOM.render(<TestJSX/>, document.getElementById('app'))
</script>
</body>
</html>
Running this code yields no UI and in dev tools I see this
Uncaught SyntaxError: Unexpected token < index.html:42
Which is the
function FirstComponent(props){
return <h1>{props.name}</h1>
}
What is wrong here? According to everything I've seen online and in the bootcamp instructions my syntax is correct and this should work.
Can anyone give some insight?
I found an answer to this. Including the CDN was only part of the fix. The second part is to include the following:
<script type="text/babel">//My react code</script>
Once that's done reloading the page works. I really should get more used to the native react ecosystem though.
I have the following react html page contents, and I would like to know the problems with this style of react development. Mainly I do not use any bundling tools. I am a newbie and finds this very easy for development and integration with server side languages.
<!DOCTYPE html>
<html lang="en">
<head>
<title>My First React Example</title>
</head>
<body>
<div id="greeting-div"></div>
<script src="react.development.js"></script>
<script src="react-dom.development.js"></script>
<script src="browser.min.js"></script>
<script>
</script>
<script type="text/babel">
class Greeting extends React.Component{
render() {
return (
<p id="test">Hello, Universe</p>
)
}
};
ReactDOM.render(
<Greeting/>,
document.getElementById('greeting-div')
);
</script>
</body>
</html>
You can't have hot reloading which is pretty awesome in React.
It will also scale awfully as you will have all your elements inside of the same html.
It will probably be bad to run a linter / any code analysis tool for it.
You should probably try create-react-app: https://github.com/facebookincubator/create-react-app, it's really simple to get started and you'll get a really good development setup.
just began to learn React and here are my very simple JSX and HTML files. I don't see any error in Console (Chrome) when I run it from my http-server. However the button Im expecting to see won't show in the browser. I'm not sure why it does not and what is missing.
Can anyone please help? Also why should we specify type=text/babel" in the tag? If I don't do this, I get an error (unexpected syntax <) in console.
Thanks!
Prem
HTML Code:
<html>
<head>
<title>
!My first React JS Component!
</title>
</head>
<body>
<div id="root"></div>
<script src="react.js"></script>
<script src="script.jsx" type="text/babel"></script>
</body>
</html>
my JSX File:
var Button = React.createClass({
render: function () {
return (
<button> Go! </button>
)
}
});
ReactDOM.render(<Button />, document.getElementById("root"));
You cannot just include the jsx in your site like that - it won't work :)
You need to transpile your jsx via a tool like Webpack.
The official documentation really is excellent and easy to understand, and it should explain how you setup a basic environment.
Also, there are dozens of tutorials on this, but here's a free one that I found helpful and easy to understand on youtube:
React + Redux + Webpack (Feel free to skip the redux part for a starter - really just a popular addon to React for managing state, which you can expand upon later)
For good measure, something like this should work:
<html>
<head>
<meta charset="UTF-8"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-dom.js"></script>
</head>
<body>
<div id="app"></div>
<script type="text/babel" src="app.jsx"></script>
</body>
</html>
App.jsx:
ReactDOM.render(
<h1>Hello React!</h1>,
document.getElementById('app')
);