Hi I am working through the React.js tutorials and I ran into a snag. When using React it works fine with the jsx transformer on my page. Once I remove that script and compile the jsx to js it no longer works. I'm using the jsx compiler that React recommends on their page. Here's my code:
jsFiddle
<div id="content"></div>
<script src="https://fb.me/react-0.13.1.js"></script>
<script type="text/jsx">
var CommentBox = React.createClass({displayName: "CommentBox",
render: function() {
return (
React.createElement("div", {className: "commentBox"},
"Hello, world! I am a CommentBox."
)
);
}
});
React.render(
React.createElement(CommentBox, null),
document.getElementById('content')
);
</script>
Thanks for the help!
<script type="text/jsx">
If you don’t use JSX, you should remove that type. Then it will work as expected. (Fiddle)
Related
I want to render the simplest component ever in React, and after
any closing HTML markup in return() everything is highlited in SublimeText3,
and then it doesnt work at all
var UserTable = React.createClass({
render : function(){
return(
<h2> Random Content </h2>
);
}
});
ReactDOM.render(<UserTable />, document.getElementById('content'));
Maybe you forgot to import react and react-dom to your project. I managed to reproduce your code and it's up and running. However, if you mean simplest component as really simplest, I suggest using functional components:
var UserTable = React.createClass({
render: function(){
return (
<h2> Random Content </h2>
)
}
})
ReactDOM.render(
<UserTable />,
document.getElementById('content')
)
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="content"></div>
Welp, It was issue with http-server, it wasn't refresh at all ant thats why my content didn't upload.
It wasnt synthax or sublime problem. Sorry 4 being sloppy
I am learning reactjs through a tutorial and ran into this error. That says "Cannot read property 'keys' of undefined" My code is very minimal so I assume that it has to do with the structure of the language. Does anyone know the problem and a possible solution?
<!DOCTYPE html>
<html>
<head>
<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.min.js"></script>
<title>ReactJs</title>
</head>
<body>
<div id="app"></div>
<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.getElementById('app'));
</script>
</body>
</html>
Edit: oddly, after our comments above, I checked to see if it was indeed the babel core version, I am using this one in my fiddle:
https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js
The second I switch to your version above I get this:
Uncaught TypeError: Cannot read property 'keys' of undefined
Use React.createClass not ReactDOM.createClass and wrap multiple lines of html in parenthesis like so:
Working Example: https://jsfiddle.net/69z2wepo/38998/
var Hello = React.createClass({
render: function() {
return (
<div>
<h1>Hello World</h1>
<p>This is some text</p>
</div>
)
}
});
ReactDOM.render(
<Hello name="World" />,
document.getElementById('container')
);
Just to be clear, as the other answers are a bit convoluted. The problem was using "babel-core" instead of "babel-standalone". Just look up for a cdn for babel-standalone instead.
https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.js
Today is my first day with React, and I've faced this issue when I tried to use Babel to transpile the JSX!
The issue is the version you are trying to use, please use this one instead:
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.25.0/babel.min.js"></script>
Don't forget to write type="text/babel" in the <script> tag which you will write the JSX in to let Babel transpile it for you, if you don't, you will find this error (As I have faced it too! :D):
Uncaught SyntaxError: Unexpected token <
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.29/browser.js"></script>
This is the version of babel-core which isn't giving me the error as shown below:
If you want to use the latest version, You can use the latest standalone version. (as per 22-Nov-2018)
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.24.0/babel.js"></script>
But this gives the following warning :
"You are using the in-browser Babel transformer. Be sure to precompile your scripts for production - https://babeljs.io/docs/setup/"
I haven't worked with React before, but there are a few things that I see that may be causing your issues. First, React.createClass instead of ReactDOM.createClass. Second, you need to wrap your html in parentheses:
var HelloWorld = React.createClass({
render: function() {
return (
<div>
<h1>Hello World</h1>
<p>This is some text></p>
</div>
);
}
});
This should get it working
I'm trying to get React.js to work client side on my LAMP stack web application. I want to implement the following slider on my website: https://github.com/airbnb/rheostat. I have managed to get react.js to work using the following guide: https://gist.github.com/jineshshah36/4a0326abb191781184e9.
The following code works:
<div id="app"></div>
<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 type="text/babel">
var HelloComponent = React.createClass({
render: function() {
return (
<h1>Hello, World!</h1>
)
}
})
ReactDOM.render(<HelloComponent />, document.querySelector('#app'))
</script>
I tried to use the rheostat slider by changing the above to the following.
<div id="slider-root"></div>
<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://raw.githubusercontent.com/airbnb/rheostat/master/src/Slider.jsx"></script>
<link href="https://raw.githubusercontent.com/airbnb/rheostat/master/css/slider.css" rel="stylesheet" type="text/css">
<script type="text/babel">
import Rheostat from 'rheostat';
ReactDOM.render(<Rheostat />, document.getElementById('slider-root'));
</script>
Am I importing the files wrong? Do I need to process the jsx file before it can be executed by the browser? If yes, how do I do that?
Do I need to process the jsx file before it can be executed by the browser?
Yes, precisely. jsx is essentially a syntax extension primarily for working with React, and you will need to compile/transpile first. If you don't want to do that, you can simply leave jsx out altogether and just use:
ReactDOM.render(React.createElement(Rheostat), document.getElementById('slider-root'));
If you are interested in jsx, consider the following:
<div>
<span>Text here</span>
</div>
This is not valid JavaScript, the browser will barf up all sorts of syntax errors restlessly. This code first has to be compiled, or transpiled into valid JavaScript. When using React, the above is to be compiled into:
React.createElement(
"div",
null,
React.createElement(
"span",
null,
"Text here"
)
);
One of the most common tools for this is Babel. TypeScript also has built-in support for typed jsx, dubbed tsx.
Getting issue with simple ReactJs Example using from react website :
First i imported :
<script src="https://fb.me/react-0.14.3.min.js"></script>
<script src="https://fb.me/react-dom-0.14.3.min.js"></script>
Then i copy and pasted code :
// tutorial1.js
var CommentBox = React.createClass({
render: function() {
return (
<div>
<h1>Welcome</h1>
</div>
);
}
});
ReactDOM.render(<CommentBox/>, document.body);
When opened page nothing show. Also tried :
document.getElementById('example')
No error in console don't no what issue is.
I am using jquery in page and using Laravel with Blade templates let me know if that is issue.
Also tried to use external script :
<script src="/lib/react-example.js" type="text/jsx"></script>
This is my Live Server you can check here.
Thanks
If you want to use the JSX syntax, you need to mark your script tags with type=text/babel and also load the babel browser script with:
<script src="https://unpkg.com/react#16.5.2/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom#16.5.2/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/babel-standalone#6.26.0/babel.min.js"></script>
<script type="text/babel">
var CommentBox = React.createClass({
render: function() {
return (
<div>
<h1>Welcome</h1>
</div>
);
}
});
ReactDOM.render(<CommentBox/>, document.body);
</script>
Here is an example on jsfiddle, unfortunately it doesn't work on StackOverflow snippets.
Another option is to transcompile your .jsx it to javascript on the server side using a solution such as browserify or webpack.
I'm trying to get my head around React, Reflux and JSX. I have a simple file I'd like to try and get working.
<html>
<body>
<div id="counter"></div>
<script src="bower_components/react/react.js"></script>
<script src="bower_components/reflux/dist/reflux.js"></script>
<script src="bower_components/react-dom/react-dom.js"></script>
<script type="text/jsx">
var CounterComponent = React.createClass({
render: function() {
return (
<div>Hello, world</div>
);
}
});
React.render(<CounterComponent />, document.getElementById("counter"));
</script>
</body>
</html>
I've setup my actions, store and component. But React.render() doesn't actually create anything in my div. I've commented out much of the code to try and isolate why it's not rendering. I get no errors, so I assume it's something to do with the jsx not being seen...
Any ideas why this is failing to render my 'hello world'?
The JSX Transformer is available in Babel. Got this working by installing babel with bower, adding the following:
<script src="bower_components/babel/browser.js"></script>
and changing "text/jsx" to "text/babel"
After this the component rendered correctly.