I am trying to set up a simple Flask app which uses React and Material UI (I cannot use Node/NPM for this). react, react-dom and material-ui.js are all being served by Flask out of the static resources path. They load up just fine, but in the very first text/babel function the Button element can't be found. Its there in the material-ui.js but my JSX function can't see it. Is there a way to import the component from the material-ui.js?
My index.html:
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js">
<!--<![endif]-->
<head>
<!-- Metas -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width" />
<title>F.L.O.P.</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Fonts -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
<!-- Icons -->
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
</head>
<body>
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience.</p>
<![endif]-->
<h1>Hello World!!</h1>
<div id="test"></div>
<!-- Local React Lib -->
<script src="static/js/react/react.js"></script>
<!-- Local React DOM lib-->
<script src="static/js/react/react-dom.js"></script>
<!-- Local Material UI Lib -->
<script src="static/js/material/material-ui.js"></script>
<!-- Babel -->
<script src="https://unpkg.com/#babel/standalone/babel.min.js"></script>
<script type="text/babel">
function App() {
return (
<Button variant="contained" color="primary">
Hello World
</Button>
);
}
ReactDOM.render(<App />, document.querySelector('#test'));
</script>
</body>
</html>
This results in a
Uncaught ReferenceError: Button is not defined
in the console from:
Inline Babel script:4
Which is the:
<Button variant="contained" color="primary">
line.
The example for the button is here: https://material-ui.com/getting-started/usage/
The components will be available inside the MaterialUI object. For the Button component, access it via MaterialUI.Button or destructure it.
<body>
<div id="test"></div>
<!-- React -->
<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>
<!-- Babel -->
<script src="https://unpkg.com/babel-standalone#6/babel.min.js"></script>
<!-- MUI -->
<script src="https://unpkg.com/#material-ui/core#latest/umd/material-ui.development.js"></script>
<script type="text/babel">
const { Button } = MaterialUI;
ReactDOM.render(
(<Button variant="contained" color="primary">
Hello
</Button>),
document.getElementById("test")
);
</script>
</body>
Related
I'm newbie on AngularJs. I made website with angularJS template.
Everything works fine but, after clicking and loading some page content, I got flickering screen problem. I have included angular.min.js in header.
How I can solve the flickering problem ?
HTML - HERE IS MY CODE
<!DOCTYPE html>
<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">
<title>MYAPP</title>
<link href="stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" />
<script src="https://use.fontawesome.com/81204b271a.js"></script>
<script src="js/jquery.min.js"></script>
<script src="js/angular.min.js"></script>
<script src="js/angular-route.min.js"></script>
<script src="js/angular-animate.js"></script>
<script src="js/angular-css.min.js"></script>
<script src="js/app.js"></script>
<style>
[ng:cloak],
[ng-cloak],
[data-ng-cloak],
[x-ng-cloak],
.ng-cloak,
.x-ng-cloak {
display: none !important;
}
</style>
</head>
<body ng-app="myapp" ng-cloak>
<!-- VIEWS-->
<div class="page {{ pageClass }}" ng-view=""></div>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="js/slick.min.js"></script>
<script src="js/wow.min.js"></script>
<script>
new WOW().init();
</script>
</body>
</html>
You might be looking for ng-cloak. I have used this and it has alleviated my issues with cloaking.
https://docs.angularjs.org/api/ng/directive/ngCloak
Add ng-cloak at the angular js root element(ag-app). This will display the view on screen only after the angular complies the DOM elememts (Angular extended HTML attributes)
I just started to explore react and trying to understand how do I use react-bootstrap if is installed over bower I just followed the getting started part but I do not really understand how does should work.
here I have my markup
<!DOCTYPE html>
<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">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="styles/main.css" rel="stylesheet">
<script src="vendor/react/react.js"></script>
<script src="vendor/react-bootstrap/react-bootstrap.js"></script>
<script src="vendor/react/JSXTransformer.js"></script>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<script>
var Alert = ReactBootstrap.Alert;
console.log(Alert)
</script>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
</body>
</html>
How do I generate bootsrap component with this package?
Update
I think I got it but I'm not sure if I use it right so in my markup
<script>
var Alert = ReactBootstrap.Alert;
</script>
<script src="components/Alert.js"></script>
Alert.js is the compiled jsx
const alertInstance = (
<Alert bsStyle='warning'>
<strong>Holy guacamole!</strong> Best check yo self, you're not looking too good.
</Alert>
);
React.render(alertInstance, document.body);
#dmasi mentioned it right in comments. This looks like a namespace issue and its missing from the examples mentioned on react-bootstrap website.
Here is an example of using Bootstrap's ButtonGroup via React-Bootstrap. You can adopt a similar approach for your code.
<h2>React-Bootstrap Testing</h2>
<div id="myBtn"></div>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/JSXTransformer.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-bootstrap/0.25.1/react-bootstrap.js"></script>
<script type="text/jsx">
var MyReactBootstrapButton = React.createClass({
render: function() {
var ButtonGroup = ReactBootstrap.ButtonGroup,
Button = ReactBootstrap.Button;
return (<div>
<ButtonGroup>
<Button>Left</Button>
<Button>Middle</Button>
<Button>Right</Button>
</ButtonGroup>
</div>);
}
});
React.render(<MyReactBootstrapButton />, document.getElementById("myBtn"));
</script>
Working Fiddle link: fiddle
I ended my Angular JS app...
and now what?
I have a app with 10 scripts src in index.html, 6 ng includes,...
All this are http requests, and have a relative size...
There are some particular way or command for "compile/build/generate/deploy" end app code? with all included, minified,...
Or I must do this with grunt/gulp :(?
<!DOCTYPE html>
<!--[if lt IE 7]> <html lang="en" ng-app="Bit2Card" class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html lang="en" ng-app="Bit2Card" class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html lang="en" ng-app="Bit2Card" class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html lang="en" ng-app="Bit2Card" class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>App</title>
<meta name="description" content="Generate a credit card on fly with Bitcoins">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
<link href="reset.css" rel="stylesheet">
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="app.css">
<script src="bower_components/html5-boilerplate/js/vendor/modernizr-2.6.2.min.js"></script>
</head>
<body>
<!--[if lt IE 7]>
<p class="browsehappy">
You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience.
</p>
<![endif]-->
<div id="app" ng-controller="appController" class="{{viewBack ? 'viewBack' : ''}}">
<ng-include src="'partials/overlays/load.html'"></ng-include>
<ng-include src="'partials/overlays/error.html'"></ng-include>
<ng-include src="'partials/overlays/terms.html'"></ng-include>
<ng-include src="'partials/overlays/qr.html'"></ng-include>
<ng-include src="'partials/overlays/payout.html'"></ng-include>
<ng-include src="'partials/overlays/restart.html'"></ng-include>
<div id="flip">
<div id="frontCard">
<ng-include src="'partials/header.html'"></ng-include>
<div id="panels">
<div id="select" class="panel{{panel === 1 ? ' visible' : ''}}" ng-include="'partials/panels/select.html'"></div>
<div id="pay" class="panel{{panel === 2 ? ' visible' : ''}}" ng-include="'partials/panels/pay.html'"></div>
<div id="get" class="panel{{panel === 3 ? ' visible' : ''}}" ng-include="'partials/panels/get.html'"></div>
</div>
<ng-include src="'partials/footer.html'"></ng-include>
</div>
<div id="backCard" ng-include="'partials/backside.html'"></div>
</div>
</div>
<!--
In production use:
<script src="//ajax.googleapis.com/ajax/libs/angularjs/x.x.x/angular.min.js"></script>
-->
<script type="text/javascript" src="bower_components/angular/angular.min.js"></script>
<script type="text/javascript" src="bower_components/zeroclipboard/dist/ZeroClipboard.min.js"></script>
<script type="text/javascript" src="bower_components/ng-clip/dest/ng-clip.min.js"></script>
<script type="text/javascript" src="bower_components/qrcode/lib/qrcode.min.js"></script>
<script type="text/javascript" src="bower_components/angular-qr/angular-qr.min.js"></script>
<script type="text/javascript" src="bower_components/angular-translate/angular-translate.min.js"></script>
<script type="text/javascript" src="bower_components/angular-translate-loader-static-files/angular-translate-loader-static-files.min.js"></script>
<script type="text/javascript" src="scripts/lin2a.min.js"></script>
<script type="text/javascript" src="scripts/app.js"></script>
</body>
</html>
I think you should check out: https://www.npmjs.org/package/gulp-html-replace. It will read through that html for you and insert a new script tag in there that points to a bundled version of all those deps.
I seem not to be able to redo a simple directive tutorial in cloud9. Basically it does not produce the output "Here I am to save the day".
main2.js
var app = angular.module("superhero", []);
app.directive("superman", function() {
return {
restrict: "E",
template: "<div>Here I am to save the day</div>"
}
})
This function is loaded in the index file here as shown below. In addition I have another file called main.js where I declare the app "myApp", but even removing that does not help.
index.html
<!DOCTYPE html>
<!--[if lt IE 7]> <html lang="en" ng-app="myApp" class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html lang="en" ng-app="myApp" class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html lang="en" ng-app="myApp" class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html lang="en" ng-app="myApp" class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>My AngularJS App</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bower_components/html5-boilerplate/css/normalize.css">
<link rel="stylesheet" href="bower_components/html5-boilerplate/css/main.css">
<link rel="stylesheet" href="app.css">
<script src="bower_components/html5-boilerplate/js/vendor/modernizr-2.6.2.min.js"></script>
</head>
<body>
<div ng-app="superhero">
<superman></superman>
</div>
<!-- In production use:
<script src="//ajax.googleapis.com/ajax/libs/angularjs/x.x.x/angular.min.js"></script>
-->
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="app.js"></script>
<script src="main.js"></script>
<script src="main2.js"></script>
<script src="view1/view1.js"></script>
<script src="view2/view2.js"></script>
<script src="components/version/version.js"></script>
<script src="components/version/version-directive.js"></script>
<script src="components/version/interpolate-filter.js"></script>
</body>
</html>
You need to load the main2.js script (and the angular files) before
<div ng-app="superhero">
<superman></superman>
</div>
I tried in jsfiddle.net and it only appears to work when the javascript is loaded in the head of the page before the HTML.
I have a AngularJS page that I am attempting to display in IE 8.
Below is my HTML
<html id="ng-app" ng-app="">
<head>
<script type='text/javascript' src='http://cdnjs.cloudflare.com/ajax/libs/json3/3.3.0/json3.min.js'></script>
<script src="http://docs.angularjs.org/angular.min.js"></script>
</head>
<BODY ng-app="">
<script type="text/javascript">
function cstScope($scope) {
$scope.LEVEL = "x1 ";
$scope.change = function() {
alert("changed");
};
}
</script>
<div ng-controller="cstScope">
<input type=text ng-model="LEVEL" ng-change="change()"></input>
</div>
</BODY>
</html>
It falls over when the page is loading with
Line: 30
Error: [$sce:iequirks] http://errors.angularjs.org/1.2.14-build.2316+sha.24fe163/$sce/iequirks
I have tried adding JSON3 and ieshiv but no luck.
Add this meta tag in inside of Header tag
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
Look like
<head>
<meta charset="utf-8">
<title>Sample App</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
</head>
I hopes, it's helps to you. Cheer's...
Just a shot here, but make sure you do not have compatibility mode turned on. I wasted some time on a similar error, and had accidentally clicked the compatibility button when I meant to click on the refresh button.
for Angularjs working correctly in Internet Explorer you also need jQuery version which is under 2.0. Here is the solution which works for me.
<head>
<!--[if lt IE 9]>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<script type="text/javascript" src="../../js/jquery.1.9.0.min.js"></script>
<![endif]-->
<!--[if gte IE 9]><!-->
<script type="text/javascript" src="../../js/jquery.2.0.min.js"></script>
<!--<![endif]-->
<title>App Title</title>
<script type="text/javascript" src="../../js/angular.min.js"></script>
<script type="text/javascript" src="../../js/jquery.plugin.min.js"></script>