7. React Components
With Gulp running, let’s create a new component and watch it automatically get transformed from a JSX file into a JS file under the lib folder.
Here is the component we’ll create as the Components/HelloWorld.jsx file.
var React = require('react')
module.exports = React.createClass({
render: function() {
return (
<div>
This is from the HelloWorld.jsx
component render function.
</div>
)
}
})
Now we will use this component from within index.jsx by first adding a require statement and then using an html-like JSX tag to reference the component.
var http = require('http')
, React = require('react')
, HelloWorld = require('./Components/HelloWorld')
http.createServer(function (req, res) {
res.writeHead(200, {'Content-Type': 'text/html'})
res.end(
React.renderToString(
<html>
<head>
<title>Hello World</title>
</head>
<body>
<HelloWorld />
<div>
Rendered from the Server!
</div>
</body>
</html>
)
)
}).listen(1337)
console.log('Server running at http://localhost:1337/')
Notice that in the require statement, we omit the file extension–the .js extension will be used automatically. It’s noteworthy that we’ve created the component as Components/HelloWorld.jsx but it will get transformed into lib/Components/HelloWorld.js. Likewise, even though we’re writing code in index.jsx, it will be running from lib/index.js where its relative path reference to ./Components/HelloWorld will result in finding lib/Components/HelloWorld.js. At first, I thought there would be some gymnastics or inconsistencies surfacing here, but since require infers the .js file extension, it comes together pretty cleanly.