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
Related
I'm having a really difficult time figuring out what I possibly could do wrong as probably most scenarios has been tested.
I'm writing web app using Spring Boot and ReactJS for frontend. I'm trying for now to write simple script showing some plain text which is imported from separate file to html one. After doing so, I ended up with nothing really showing up.
Here is my structure of project:
and here is my app.js in which I have my component defined:
var CommentBox = React.createClass({
render: function() {
return (
<div className="commentBox">
Hello, world! I am a CommentBox.
</div>
);
}
});
ReactDOM.render(<CommentBox />, document.getElementById('content')
);
Below is the cardists.html page:
<!DOCTYPE html>
<html>
<head>
<title>Cardists</title>
<link rel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/
3.3.7/css/bootstrap.min.css"/>
</head>
<body>
<div id='root'></div>
<script src="react-15.0.1.js"></script>
<script src="react-dom-15.0.1.js"></script>
<script src="cdnjs.cloudflare.com/ajax/libs/babel-
core/5.8.23/browser.min.js"></script>
<script type="text/babel" src="../public/js/app.js"></script>
</body>
</html>
[PROBLEM]
Where could I possibly made a mistake as everything for first glance seems ok to me, but I'm getting blank page ;/
You are rendering your application in content div like
ReactDOM.render(<CommentBox />, document.getElementById('content')
But in you html file there is no div with content id. There is one div with id root so you need to render your component in that div like
ReactDOM.render(<CommentBox />, document.getElementById('root')
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
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.
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)