Shivam Shivam - 29 days ago 8
React JSX Question

Need help on React Js

I am new to React Js and my code is not working. Please have a look below:

This is my script file Main.jsx. This file is compiled by react and output is put in main.js file under 'dist' folder.

var react = require("react"),
reactDom = require("react-dom");
var myComponent = react.createClass({
render: function () {
return <div><h4>I am rendered by react.</h4></div>;
}
});

reactDom.render(<myComponent />, document.getElementById("basicDiv"));


It is Index.html

<html>
<head>
<base href="./" />
<title>App title</title>
<script src="node_modules/react/dist/react.js"></script>
<script src="node_modules/react/dist/react-with-addons.js"></script>
<script src="node_modules/react-dom/dist/react-dom.js"></script>
</head>

<body>
<div id="basicDiv"></div>

<!-- React compiled code is in dist folder and is accessible -->
<script src="dist/main.js"></script>
</body>

</html>


When I run the index.html file in browser the Output is blank screen. Please see the below screenshot of chrome dev tools inspector window:

Output in browser

The content of 'myComponent' is not rendered in browser. I have seen many tutorials with the same code but it is not working... don't know why.

Please help on this and if possible, provide me some sample code / tutorials for latest releases also. Thanks in advance

Update

Please note that I have included React library reference in my HTML file which makes me to freely use "React" or "react" as a variable name while importing React in my script files. Taking "React" (with capital R) as variable name is not mandatory here in this case.

Final Update

So the solution (as answered by Damien Leroux) is to make the react component variable-name starting with a capital letter. 'var myComponent' must be 'var MyComponent' or 'var Mycomponent'.

Answer

A react class must always begin with an Upper case letter:

var MyComponent = react.createClass({

read user-defined-components-must-be-capitalized

Comments