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:
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'.
A react class must always begin with an Upper case letter:
var MyComponent = react.createClass({
Not only your React Component must begin with a Upper case letter, See this:
React - Adding component after AJAX to view
but you must also Import react like
var React = require("react"),
ReactDom = require("react-dom");
i.e UpperCase Letters since internally JSX is transpiled to React.createElement() in which case it will say that react is not defined.
You code must look like
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"));
import React from 'react'
import './Aboutus.css'
import Header from '../Home/Header/Header.jsx'
import Footer from '../Home/Footer/Footer.jsx'
var stylesheader = {
paddingTop: 50,
textAlign:'center',
color: '#204871'
};
var stylehead = {
paddingLeft: 200,
paddingRight:200,
paddingTop:20,
color: '#204871'
};
var styles = {
paddingTop: 120, paddingLeft:20,
color: '#128bea',
fontSize: 26
};
var style1 = {
paddingTop:100,
color: '#204871'
};
class Aboutus extends React.Component {
render() {
var title = "we are a team";
var leadership = [
{
"name":"abc",
"department":"abc",
"phone":"abc",
"email":"abc"
},
{
"name":"abc",
"department":"abc",
"phone":"abc",
"email":"abc"
}
];
var business = [
{
"name":"abc",
"department":"abc",
"email":"abc"
},
{
"name":"abc",
"department":"abc",
"email":"abc"
},
];
var algorithm = [
{
"name":"abc",
"department":"abc",
"email":"abc"
},
{
"name":"abc",
"department":"abc",
"email":"abc"
},
{
"name":"abc",
"department":"abc",
"email":"abc"
},
{
"name":"abc",
"department":"abc",
"email":"abc"
}
];
var developer = [
{
"name":"abc",
"department":"abc",
"email":"abc"
},
{
"name":"abc",
"department":"abc",
"email":"abc"
},
{
"name":"abc",
"department":"abc",
"email":"abc"
}
];
var row1=leadership.map(row => {
return <div className="column">
<div className="card">
<div className="container">
<h2>{row.name}</h2>
<p>{row.department}</p>
<p>{row.phone}</p>
<p>{row.email}</p>
</div>
</div>
</div>
});
var row2=business.map(row => {
return <div className="column">
<div className="card">
<div className="container">
<h2>{row.name}</h2>
<p>{row.department}</p>
<p>{row.email}</p>
</div>
</div>
</div>
});
var row3=algorithm.map(row => {
return <div className="column">
<div className="card">
<div className="container">
<h2>{row.name}</h2>
<p>{row.department}</p>
<p>{row.email}</p>
</div>
</div>
</div>
});
var row4=developer.map(row => {
return <div className="column">
<div className="card">
<div className="container">
<h2>{row.name}</h2>
<p>{row.department}</p>
<p>{row.email}</p>
</div>
</div>
</div>
});
return (
<div className="home-component">
<div className="home-header">
<Header/>
</div>
<div className="home-content" >
<h1 style={stylesheader}> Meet the team </h1>
<h2 style={stylehead}>{title}</h2>
<h2 style={styles}> Leadership </h2>
<div className="row" style={style1}>
{row1}
</div>
<h2 style={styles}> Business Development </h2>
<div className="row" style={style1}>
{row2}
</div>
<h2 style={styles}> Algorithm Development </h2>
<div className="row" style={style1} >
{row3}
</div>
<h2 style={styles}>Software Development </h2>
<div className="row" style={style1} >
{row4}
</div>
</div>
<Footer/>
</div>
);
}
}
export default Aboutus;
来源：https://stackoverflow.com/questions/40401224/need-help-on-react-js