The index.html works but when I try to run app.jsx code it does not show anything.
Server.js page
var express = require('express');
server.js page
var app = express();
app.use(express.static('public'));
var listen = app.listen(4040, function() {
console.log('Express server is up on port 4040');
});
index.html page
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.5.4/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-faux-dom/3.1.0/ReactFauxDOM.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.38/browser.min.js"></script> /*If something wrong with babel script *\
</head>
<body>
<div id="app"></div>
/*<h1>This text would display on server</h1>*\
<script type="text/babel" src="app.jsx"></script>
</body>
</html>
app.jsx-page
var Greeter = React.createClass({ /*This jsx code wont deploy on server*\
render: function() { /*Maybe there is an error*\
return (
name: 'React',
message: 'This is the default message!'
};
},
render: function() {
var name = this.props.name;
var message = this.props.message;
return ()
}
<div>
<h1>Hello {name}!</h1>
<p>{message + "!!"}</p>
</div>
);
}
});
var firstName = "Andrew";
ReactDOM.render(
<Greeter name={firstName}/>,
docucument.getElementById('app')
);
As you suggest in your comment, Are you trying to set default props value or something?. Your app.jsx should look like.
var Greeter = React.createClass({
render: function() {
var name = this.props.name;
var message = this.props.message;
return (
<div>
<h1>Hello {name}!</h1>
<p>{message + "!!"}</p>
</div>
);
};
});
var firstName = "Andrew";
var message = "This is the default message!";
ReactDOM.render(
<Greeter name={firstName} message = {message}/>,
docucument.getElementById('app')
);