I'm trying to use React as part of a firefox addon I'm working on. React works fine as long as I don't use jsx. Babel isn't working - because I can't specify the type of the script I add.
I'm doing:
tabs.open({
url: 'index.html',
onReady: function( tab ){
var worker = tab.attach({
contentScriptFile: [
'./jquery-2.1.4.min.js',
'../node_modules/react/dist/react.js',
'../node_modules/react-dom/dist/react-dom.js',
'../node_modules/babel-preset-react/index.js',
'./js/main.js', // the file i need to specify as type: text/babel
],
});
}
);
Ideally I'd be able to set a type property on the './js/main.js' script, but the docs don't appear to have anything.
The trick is to load react, jquery, babel and your jsx directly in your html, as you usually do. The javascripts files that you'll have to load using the contentScriptFile param are those one that you need to load the logic to communicate with the addon main js file.
An example for a valid html will be:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<script src="react-with-addons.js"></script>
<script src="react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
</head>
<body>
<h1>Hello!</h1>
<div id="example"></div>
<script type="text/babel">
ReactDOM.render(
<p>Hello, world!</p>,
document.getElementById('example')
);
</script>
</body>
</html>
If you tell me what you need to do in that html/content script I can give you an example of how you can do to communicate it with the main script.
Related
I am trying to call the function popup from within index.html. When I view this code below in the browser I get this error ReferenceError: popup is not defined. The reason why I am trying to do this is to better organize my code when I have many functions, I thought it might be easier to import them all into one file and then import that file into my index.html file. I don't know if this is best practice or not, but I thought it would help.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>title</title>
<link rel="stylesheet" href="style.scss">
<script type="module" src="main.js"></script>
</head>
<body>
<script>popup("testing")</script>
</body>
</html>
main.js
import { popup } from './main/popup.js';
popup.js
export function popup(x) {
alert(x);
}
Your main.js runs in a module, not on the top level. If you want to be able to reference it outside, from a non-module script, either explicitly put it onto the window to make it global:
import { popup } from './main/popup.js';
window.popup = popup;
(though, that kind of defeats the purpose of using modules at all)
Or put the script that calls popup into a module as well (rather than in an inline script):
<body>
<script type="module" src='bodyScript.js'></script>
</body>
// bodyScript.js
import { popup } from './main/popup.js';
popup("testing");
I cannot seem to figure out what I shall do to correct the issue:
I always got no display on the browser, where I expect to see "Hello React".
Here is the HelloWorld code:
ReactDOM.render(Hello, React!,document.getElementById('root'));
You can use following code base to understand basic of React JS (have been used latest version react-15.0.0) -
<!DOCTYPE html>
<html lang="en">
<head>
<title>My First React Example</title>
<!-- use this as script file "fb.me/react-15.0.0.js"
"fb.me/react-dom-15.0.0.js"
cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js" -->
</head>
<body>
<div id="greeting-div"></div>
<script type="text/babel">
var Greeting = React.createClass({
render: function() {
return ( <div>{this.props.children} </div>)
}
});
ReactDOM.render(
<div>
<Greeting>hello Aby</Greeting>
<h1>HELLO</h1>
</div>,
document.getElementById('greeting-div') );
</script>
</body>
</html>
check your example here, https://codesandbox.io/s/ElRmqWK5Y
what I will suggest download the react package and run your code there in the beginning, and what I think about your code is you should add react library first than react-dom.
there is a missing < body > in your code , try to add it and tell us if it works
So basically the problem is that you don't transpile your jsx. For your simple example what you can do if you don't want to configure transpiling 'explicitly' with some bundler you can add Babel library and change
<script type="text/jsx">
to
<script type="text/babel">
Let's have a look here, but please remember that jsfiddle uses babel behind (quite sure):
https://jsfiddle.net/69z2wepo/83023/
Also let me paste example from babel docs. Especially take a look for added babel lib + script type.
<div id="output"></div>
<!-- Load Babel -->
<script src="https://unpkg.com/babel-standalone#6/babel.min.js"></script>
<!-- Your custom script here -->
<script type="text/babel">
const getMessage = () => "Hello World";
document.getElementById('output').innerHTML = getMessage();
</script>
This question already has answers here:
React - component in seperate script does not work
(3 answers)
Closed 6 years ago.
I want to create a simple Reactjs app without using npm and server.py, server.js etc. I just want to run my index.html in a browser. Currently what I am getting is nothing will get rendered and browser shows blank white screen, there are no errors in console as well. I have included the following scripts.
Here is my index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<script src="https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-xpa1/t39.3284-6/12350972_1539644969670605_801198237_n.js"></script>
<script src="https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-xfa1/t39.3284-6/12056978_1723186904561917_1347349243_n.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel" src="app.js">
</script>
</body>
</html>
Here app.js is my js which renders certain components into DOM.
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('example')
);
This is my app.js
Update
Now I am getting this error message
Cross origin requests are only supported for protocol schemes: http,
data, chrome, chrome-extension, https, chrome-extension-resource.
Maybe this instructions and starter kit might be useful for you: https://facebook.github.io/react/docs/getting-started.html
The problem is the react jsx which isn't being processed with babel on the fly. Removing the JSX works fine:
https://jsfiddle.net/zevndLog/
var MyComponent = React.createClass({
displayName: 'MyComponent',
render: function render() {
return React.createElement(
'div',
null,
'Hello'
);
}
});
ReactDOM.render(React.createElement(MyComponent, null), document.getElementById('container'));
Can't remember off the top of my mind if / how you tell babel to compile jsx on the fly
I am beginning to learn React through a tutorial, however I ran into this error when I ran the code that I created.
The error seems to be one that has to do with the framework of the languages. Perhaps with the version of Babel that I imported for the translation.
Does anyone know the actual situation and how to find a soulution.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.1/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.1/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/6.1.19/browser.js"></script>
<title>ReactJs</title>
</head>
<body>
<script type="text/babel">
var HelloWorld = ReactDOM.createClass({
render: function() {
return <div>
<h1>Hello World</h1>
<p>This is some text></p>
</div>
}
});
ReactDOM.render(<HelloWorld/>, document.body);
</script>
</body>
</html>
I'm not sure if you have found the results yet, but I got the same error and found out it's the cdn version mismatch issues.
If you use these cdn's:
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.29/browser.js"></script>
and change your
ReactDOM.render(<HelloWorld/>, document.body);
to
React.render(<HelloWorld/>, document.body);
it will work now.
babel-browser is deprecated. use babel-standalone https://github.com/babel/babel-standalone instead:
<script src="https://unpkg.com/babel-standalone#6/babel.min.js"></script>
React.render has been deprecated since React 0.14 (released October 7, 2015):
https://facebook.github.io/react/blog/2015/10/07/react-v0.14.html
I'd strongly recommend the awesome Create React App NPM module from Facebook, which creates React apps with no configuration, but still uses the latest ES6 and Babel features. Also it comes with hot reloading out of the box and has a build option, for creating a minified, bundled .js file ready for production.
https://github.com/facebookincubator/create-react-app
Currently working through this tutorial on using Backbone.js with coffeescript.
Leveraging the following index.html file:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CoffeeScript, Meet Backbone.js: Part N</title>
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script src="http://ajax.cdnjs.com/ajax/libs/json2/20110223/json2.js"></script>
<script src="http://ajax.cdnjs.com/ajax/libs/underscore.js/1.1.6/underscore-min.js"></script>
<script src="http://ajax.cdnjs.com/ajax/libs/backbone.js/0.3.3/backbone-min.js"></script>
<script type="text/javascript" src="./index.js"></script>
</head>
<body>
<header>
<h1>CoffeeScript, Meet Backbone.js: Part 1</h1>
</header>
</body>
</html>
which loads an index.js file after loading Backbone, jQuery, etc from a cdn. Hoping to work within a script.coffee file that I'd like to have automatically compile into the script.js file loaded by index.html above by running something like coffee script.coffee -c -w.
Trouble is, I'm getting ReferenceErrors when I try to run the above command on the following script.coffee file:
jQuery ->
class ListView extends Backbone.View
el: $ 'body'
initialize: ->
_.bindAll #
#render()
render: ->
$(#el).append '<ul><li>Hello, Backbone!</li></ul>'
list_view = new ListView
For instance:
ReferenceError: jQuery is not defined
...
because, clearly, jQuery is being loaded in the index.html file.
Is there a way to suppress the error reporting from the coffeescript compiler so that it just converts the code without the error?
The options must go before the file, e.g.:
coffee -cw script.coffee
Otherwise, it will try to run script.coffee right then and there as a Node.js script, passing it the options -c and -w. That's not what you want; if you want the CoffeeScript compiler to get the options, it's got to be before the file name.