I'm using ReactJS CDN to build a web app. I am thinking of hosting it in a qliksense server that acts as a web server. The code runs fine without any issues and the users can access the app with the URL.
I have a few questions before I go into production.
I would like to know the cons of doing it this way.
Are there any factors that I should consider?
How can I minify the code?
Below is an outline structure of my code.
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>App</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"/>
<script crossorigin src="https://unpkg.com/react#17/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom#17/umd/react-dom.production.min.js">
</script>
<script crossorigin src="https://unpkg.com/#mui/material#5.0.2/umd/material-ui.production.min.js"></script>
<script src="https://unpkg.com/#babel/standalone#7.15.7/babel.min.js"></script>
<script type="text/babel" src="AppPage.js"></script>
<script type="text/babel" src="App.js"></script>
<link id="u-theme-google-font" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i|Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i">
<link id="u-page-google-font" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i">
</head>
<body>
<div id="root"></div>
<script type="text/babel">
ReactDOM.render(
<App/>,
document.getElementById('root')
);
</script>
</body>
</html>
App.js
function App(){
const [state, setState] = React.useState(false);
React.useEffect(()=> {
//Do Something
//setState(object)
},[])
return (
<div id="appcontainer">
{state.errorMessage !== null ?
<div>
<h6>{state.errorMessage}</h6>
<h6>Refresh page or Contact support </h6>
</div>
: state.app ?
<Box> <AppPage/> </Box> : null}
</div>
)
}
AppPage.js
function AppPage(){
return (
<h1>hello</h1>
)
}
The only cons I can think of is the possibility that the end users might not have access to the CDN. If you are behind corporate proxy/firewall and for some reason the CDN is blocked then the mashup will not work.
I'm right assuming that you are developing inside the Qlik Dev Hub? If this is the case then in order to minify the code you'll have to download the code minify it (using webpack for example) and then re-upload it back to Qlik
Our web developers are actually developing mashups outside Qlik - developing on localhost and establishing connection with Qlik directly. Once they are happy with the result they minify it and upload it. So their development is done completely outside Dev Hub. The downside here is that a bit more work is needed to set the authentication because when developing inside the Dev Hub the authentication is already made.
Related
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.
I'm following a guide in a book about creating React apps. This is the very first example in the book and I copied it exactly as it was, but the page won't render.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8" />
<title> Pro MEAN Stack </title>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/react/15.2.1/react.js">
</script>
<script src=
"https://cdjns.cloudflare.com/ajax/libs/react/15.2.1/react-dom.js">
</script>
<script src=
"https://cdjns.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js">
</script>
</head>
<body>
<div id="contents"></div> <!-- this is where the component will appear -->
<script type="text/babel">
var contentNode = document.getElementById('content');
var component = <h1> Hello World </h1>; // A simple JSX component
ReactDOM.render(component, contentNode); // Render the conponent
</script>
</body>
</html>
Here's what the console says,
react-dom.js Failed to load resource: net::ERR_NAME_NOT_RESOLVED
browser.min.js Failed to load resource: net::ERR_NAME_NOT_RESOLVED
I'm not sure what to do at this point. I've never worked with React before
You should update your cdn links to valid ones, use these:
<script src="https://unpkg.com/react#15/dist/react.js"></script>
<script src="https://unpkg.com/react-dom#15/dist/react-dom.js"></script>
contents => content
The preferred way to use react is with some kind of module bundler like webpack. If webpack seems like a hustle you could use create-react-app to have a full react application up and running in no time. it's great.
Fix the links to cdnjs, you misspell it. Also you are creating a div with id "contents", then you select an element with id "content".
The following example works:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8" />
<title>ReactJS Hello World</title>
<script src="https://unpkg.com/react#15/dist/react.js"></script>
<script src="https://unpkg.com/react-dom#15/dist/react-dom.js"></script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.25.0/babel.min.js">
</script>
</head>
<body>
<div id="content"></div>
<script type="text/babel">
var contentNode = document.getElementById('content');
var component = <h1> Hello World </h1>; // A simple JSX component
ReactDOM.render(component, contentNode); // Render the conponent
</script>
</body>
</html>
References
Getting started with React the easy way | CodeUtopia
React without build steps - Babel Standalone
Actualize | Anyone Can Learn To Code
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')
);
I have simple add-in of loading SharePoint data on Outlook web add-in using ADAL.js, Angular.js & Office.js.
My add-in is of Task pane, When any user loads an appointment and select this add-in, it fetches data from SharePoint using ADAL js library using oAuth & REST API, and manipulates some values in new appointment form.
Here is the Guide link for Getting Started with adal.js and the Office 365 APIs.
Below is my index.html file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<title>My O365 Add-In</title>
<link href="../Content/Office.css" rel="stylesheet" type="text/css" />
<link href="../Content/Custom.css" rel="stylesheet" type="text/css" />
<script src="//appsforoffice.microsoft.com/lib/1/hosted/office.js" type="text/javascript"></script>
<script src="../Scripts/jquery-1.9.1.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.js" type="application/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular-route.js" type="application/javascript"></script>
<script src="../Scripts/adal.min.js" type="application/javascript"></script>
<script src="../Scripts/adal-angular.min.js" type="application/javascript"></script>
</head>
<body ng-app="OfficeApp">
<div ng-view></div>
<script src="Scripts/App.Module.js" type="application/javascript"></script>
<script src="Scripts/App.Routes.js" type="application/javascript"></script>
<script src="Scripts/Services/responseServices.js" type="application/javascript"></script>
<script src="Scripts/Controllers/addInController.js" type="application/javascript"></script>
</body>
</html>
Similar source can be found on GitHub here.
When I try to load the add-in for the first time it gives below error in office.js file, after first call, if I load that add-in again, it works properly.
Error is:
Value cannot be null. Parameter name: ConversationId
This issue is already logged on GitHub and tried all the possible solution. but nothing worked out for me.
Does anyone have encountered such error? I am very glad if you can help me on this.
Thanks in advance.
I'm going through some starter React.js courses to become more familiar with React, and the ES6 format. Unfortunately, the courses were created during 0.13 when the JSX Transformer was available, and I do not want to setup a node.js environment with each and every exercise file. It also seems that babel-browser was discontinued, and babel-standalone needs much more than a type in the script properties to compile, so neither seems to be a solution (Unless I misunderstood standalone).
Is there anything out there that handle transforms as simply as the JSX Transformer once did?
Thanks in advance!
The react site tutorial (http://facebook.github.io/react/docs/tutorial.html) seems to use babel dynamically.
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>React Tutorial</title>
<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>
<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/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.2/marked.min.js"></script>
</head>
<body>
<div id="content"></div>
<script type="text/babel" src="scripts/example.js"></script>
<script type="text/babel">
// To get started with this tutorial running your own code, simply remove
// the script tag loading scripts/example.js and start writing code here.
</script>
</body>
</html>