2. React's JSX Syntax
npm install react --save
- Rename
index.js
toindex.jsx
Update index.jsx
to the following:
var http = require('http') var React = require('react') http.createServer(function (req, res) { res.writeHead(200, {'Content-Type': 'text/html'}) res.end( React.renderToString( <html> <head> <title>Hello World</title> </head> <body> index.jsx compiled into index.js by hand on the server </body> </html> ) ) }).listen(1337) console.log('Server running at http://localhost:1337/')
Get the react-tools installed
This will allow us to use React’s JSX syntax and compile it to raw JS
npm install react-tools --global
npm install react-tools --save-dev
Compile the JSX manually
Now if you run jsx index.jsx > index.js
the JSX file will be compiled into raw JavaScript. The output will match the following.
var http = require('http') var React = require('react') http.createServer(function (req, res) { res.writeHead(200, {'Content-Type': 'text/html'}) res.end( React.renderToString( React.createElement("html", null, React.createElement("head", null, React.createElement("title", null, "Hello World") ), React.createElement("body", null, "index.jsx compiled into index.js by hand on the server") )) ) }).listen(1337) console.log('Server running at http://localhost:1337/')
You can now run node index.js
and verify that the server still responds, now with “index.jsx compiled into index.js”. There’s one more detail hidden under the covers here though; React has marked up the HTML with React data attributes that will allow React in the browser to understand the components that were rendered on the server.
If you view source in the browser, you’ll see something like the following.
<html data-reactid=".qa6th1tqf4" data-react-checksum="-1942403816"> <head data-reactid=".qa6th1tqf4.0"> <title data-reactid=".qa6th1tqf4.0.0">Hello World</title> </head> <body data-reactid=".qa6th1tqf4.1"> index.jsx compiled into index.js by hand on the server </body> </html>