需要帮助React Js [英] Need help on React Js
问题描述
我是React Js的新手，我的代码无效。请看下面的内容：
I am new to React Js and my code is not working. Please have a look below:
这是我的脚本文件 Main.jsx 。这个文件由react编译，输出放在'dist'文件夹下的main.js文件中。
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"));
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>
当我在浏览器中运行index.html文件时，输出为空屏幕。请参阅chrome dev工具检查器窗口的以下屏幕截图：
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:
'myComponent'的内容未在浏览器中呈现。我看过许多教程使用相同的代码，但它不起作用...不知道为什么。
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
更新
请注意我已包含React库参考在我的HTML文件中，这使我在脚本文件中导入React时可以自由地使用React或react作为变量名。在这种情况下，将React（使用大写R）作为变量名称不是强制性的。
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.
最终更新
所以解决方案（由Damien Leroux回答）是使反应组件变量名以大写字母开头。 'var myComponent'必须是'var MyComponent'或'var Mycomponent'。
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'.
推荐答案
反应类必须始终以一个Upper开头大小写：
A react class must always begin with an Upper case letter:
var MyComponent = react.createClass({
这篇关于需要帮助React Js的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
