I am new to react, I am trying to run a simple code example I found, the perpuse of the code is to show a few tabs. I am running into some technical problems.
I am getting this error: " Uncaught ReferenceError: require is not defined " on the first line of my JS code: import React from 'react';
it seems like it doesnt recognize my react code.
please help,
Thank you very much :)
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Dashboard Support Tool Center</title>
<script type="application/javascript" src="https://unpkg.com/react#16.0.0/umd/react.production.min.js"></script>
<script type="application/javascript" src="https://unpkg.com/react-dom#16.0.0/umd/react-dom.production.min.js"></script>
<script type="application/javascript" src="https://unpkg.com/babel-standalone#6.26.0/babel.js"></script>
</head>
<body>
</body>
<script type="text/babel" src="/dashboards/react/dashboardCenter.js"></script>
</html>
React/JS:
import React from 'react';
import { render } from "react-dom";
import Tabs from './Tabs';
require('/dashboards/css/tabStyles.css');
function App() {
return (
<div>
<h1>Tabs Demo</h1>
<Tabs>
<div label="Gator">
See ya later, <em>Alligator</em>!
</div>
<div label="Croc">
After 'while, <em>Crocodile</em>!
</div>
<div label="Sarcosuchus">
Nothing to see here, this tab is <em>extinct</em>!
</div>
</Tabs>
</div>
);
}
const container = document.createElement('div');
document.body.appendChild(container);
render(<App />, container);
You have to include a reference to requrejs library in your html:
<script type="application/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.min.js" ></script>
Edit
import and require in your js file are not recognizable by most browsers. You have to use a ES6 module system. You have a long road ahead ;)
Related
I am trying to inject some React code into an HTML document. I am following React's own documentation and feeding their starter code (a simple like button) into the page. Everything was working great. I changed it to use JSX, changed it to a functional component using hooks instead of a class component with state. No problems.
However, whenever I include an import call and try to bring in another component, the component breaks on the page and stops displaying, but doesn't throw any kind of error I can see.
How do I develop in a "react-y" way with components and modularity while injecting it into an html page?
Here is the code I'm working with at the moment:
HTML document
<body>
<div id="react-root"></div>
<!-- inject react, reactDOM and JSX engine -->
<script src="https://unpkg.com/react#16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom#16/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/babel-standalone#6/babel.min.js"></script>
<!-- point to component -->
<script src="transpiled/app.js"></script>
</body>
React Component
'use strict';
import {SecondComponent} from './components/SecondComponent';
const e = React.createElement;
const LikeButton = () => {
const [liked, setLiked] = React.useState(false);
if (liked) return 'You liked this functional component.'
const handleLikeClick = () => {
setLiked(true);
}
return (
<div>
<button onClick={handleLikeClick}>new like button with jsx</button>
{liked && <SecondComponent/>}
</div>
)
}
const domContainer = document.querySelector('#react-root');
ReactDOM.render(e(LikeButton), domContainer);
Like I said, any sort of import statement seems to be where it breaks. Can't find resources online about it. Thanks in advance for your help!
UPDATE: After a bit of research importing modules between several <script> tags is now possible.
This can be achieved adding the Babel Plugin attribute data-plugins and setting the value to "transform-es2015-modules-umd" which will enable the UMD pattern.
You'll also need to set type="text/babel" on each <script> tag.
This will allow you to use the import statements directly inside each file. Like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>React</title>
<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/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script data-plugins="transform-es2015-modules-umd" type="text/babel" src="./Header.js"></script>
<script data-plugins="transform-es2015-modules-umd" type="text/babel" src="./App.js"></script>
</body>
</html>
Working Gist Example
i'm new in react.js, i used CDN links to compile some simple react.js code into my html, but i get this error:
"Uncaught SyntaxError: Unexpected token <"
then i searched and i saw somebody said that i should add:
type="text/babel" or type="text/jsx"
to my script tag, i did, but after that, my html didn't know my .js file!
this is my html:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head lang="fa">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<title> title </title>
</head>
<body>
<div id="app"> </div>
<script src="https://unpkg.com/babel-standalone#6/babel.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 type="text/babel" src="myreact.js"> </script>
</body>
</html>
and this is my react.js file:
'use strict';
class MyComponent extends React.Component{
render()
{
return "hello";
}
}
ReactDOM.render(
<MyComponent/> , document.getElementById('app')
);
please help me to code in react.js.
If you are using CDN, first two you need are to render React into a DOM and the third one (babel) enables JSX and ES6. I have reordered the imports, have included cdn for babel after importing react and react-dom.
<!DOCTYPE html>
<html lang="en">
<body>
<div id="app"></div>
<script crossorigin src="https://unpkg.com/react#16/umd/react.development.js"></script>
<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 type="text/babel">
'use strict'
class Application extends React.Component {
render() {
return(
<div>React App</div>
);
}
}
ReactDOM.render(<Application />, document.getElementById('app'));
</script>
</body>
</html>
I'm trying to add the react app I made to my existing website, I followed the existing documentation here but apparently the navigator doesn't regconize the import parts of my code, brobably because the babel parser isn't working properly?
Here's my index.js code:
I tried the babel as a type in my script, but no luck
here's my index.js code:
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();
here's my index.html code:
<head>
<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/react-content-loader#3.4.1/dist/react-content-loader.min.js" crossorigin ></script>
<script src="https://unpkg.com/babel-standalone#6/babel.min.js"></script>
</head><body>
<div id="root"></div>
<script src="index.js"></script>
</body>
the console output:
Uncaught SyntaxError: Unexpected identifier in index.js:1
You are loading your dependencies as globals using dedicated <script> elements.
Don't use import as well.
You are using JSX. You need to mark the script containing it as text/babel.
Here is the code that should render a "raised" paper-button:
All the code is in a script tag and renders a paper-button that is not RAISED (see screen shot). I can click and see the RIPPLE effect, seems perfect except the appearance.
UPDATE :
for the moment the only way to get the correct rendering is by replacing
<paper-button raised>test</paper-button>
BY
<div dangerouslySetInnerHTML={{__html: '<paper-button raised>test</paper-button>'}} />
ANY WORKAROUND avoiding this 'dangerous' way?
<!DOCTYPE html>
<html>
<head>
<script src="bower_components/webcomponentsjs/webcomponents.min.js"></script>
<link rel="import" href="bower_components/polymer/polymer.html">
<link rel="import" href="bower_components/paper-button/paper-button.html">
<title>Hello React</title>
<script src="bower_components/react/react.min.js"></script>
<script src="bower_components/react/JSXTransformer.js"></script>
</head>
<body>
<div id="content">
</div>
<script type="text/jsx">
var ButtonT = React.createClass({
render: function() {
return (
<div>
<paper-button raised="true">test</paper-button>
</div>
);
}
});
React.render(
<ButtonT />,
document.getElementById('content')
);
</script>
</body>
</html>
Should the "raised" attribute be passed as a this.props...?
It won't work in the current version of React. Custom attribute support is an open issue, though. For now, I've found this patch works well.
In JSX if you want a custom HTML attribute, you should prefix it with data-, it then will be resolved to actual name without prefix. See docs;
I tried to extend a <button>, but so far did not succeed.
What am I doing wrong. I'm using the Dart Editor+SDK 1.5.2
In pubspec.yaml the version for Polymer is set to:
polymer: ">=0.11.0 <0.12.0"
index.html
<!DOCTYPE html>
<html>
<head>
<!-- <script src="packages/web_components/platform.js"></script>
not necessary anymore with Polymer >= 0.14.0 -->
<script src="packages/web_components/dart_support.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Extended Button - Dart v1.5.2</title>
<!--Extended Button-->
<link rel="import" href="view/ext_button.html" />
</head>
<body>
<button is="ext-button">Test Button</button>
<script type="application/dart">export "package:polymer/init.dart";</script>
</body>
</html>
view/ext_button.dart
import "dart:html";
import "package:polymer/polymer.dart";
#CustomTag("ext-button")
class ExtButton extends ButtonElement {
ExtButton.created() : super.created();
factory ExtButton(){
onClick.listen(clicked);
}
void clicked(MouseEvent e){
print("Ext-Button clicked");
}
}
view/ext_button.html
<!DOCTYPE html>
<link rel="import" href="packages/polymer/polymer.html">
<polymer-element name="ext-button" extends="button">
<template>
</template>
<script type="application/dart" src="ext_button.dart"></script>
</polymer-element>
So the code above does not work, but as soon as write it like below (just to validate the ext-button works) it tells me the following:
"web/index.html:20:7: custom element "ext-button" extends from "button", but this tag will not include the default properties of "button".
To fix this, either write this tag as <button is="ext-button"> or remove the "extends" attribute from the custom element declaration."
<ext-button>Test Button</ext-button>
So a little bit confused ;-) I think the fix is easy and simple - but I just don't see the problem ;-(
Just for further references, the two things above solved the problem.
Here are the updated parts, now it works.
view/ext_button.dart
import "dart:html";
import "package:polymer/polymer.dart";
#CustomTag("ext-button")
class ExtButton extends ButtonElement with Polymer {
ExtButton.created() : super.created()
{
polymerCreated();
onClick.listen(clicked);
}
void clicked(MouseEvent e){
print("Ext-Button clicked");
}
}
view/ext_button.html
<!DOCTYPE html>
<link rel="import" href="packages/polymer/polymer.html">
<polymer-element name="ext-button" extends="button">
<template>
<content></content>
</template>
<script type="application/dart" src="ext_button.dart"></script>
</polymer-element>
As far as I see, you are missing thwo things:
a call to polymerCreated() inside the custom elements constructor.
and extends ButtonElement with Polymer
There are already similar question. I'll look them up later when I have more time. Maybe you find them yourself in the meantime. Please add a comment with a link if you do.