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 (
        This is from the HelloWorld.jsx
        component render function.

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'})
          <title>Hello World</title>
          <HelloWorld />
            Rendered from the Server!
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.

Next » Passing Properties to Components