app title and meta tags with react-helmet

Phylodome · Sep 12, 2015 · b6a24a0 · b6a24a0
1 parent 50c8ab8
commit b6a24a0
Show file tree

Hide file tree

Showing 4 changed files with 54 additions and 0 deletions.
diff --git a/app/components/App.js b/app/components/App.js
@@ -1,10 +1,12 @@
 import React from 'react';
 import {Link} from 'react-router';
+import Helmet from "react-helmet";
 
 let App = React.createClass({
   render() {
     return (
       <div>
+        <Helmet title="Welcome"/>
         <ul>
           <li><Link to="/about">About</Link></li>
           <li><Link to="/contact">Contact</Link></li>

diff --git a/app/server.js b/app/server.js
@@ -3,6 +3,7 @@ import express from 'express';
 import React from 'react';
 import {renderToString} from 'react-dom/server';
 import createLocation from 'history/lib/createLocation';
+import Helmet from 'react-helmet';
 import {RoutingContext, match} from 'react-router';
 import routes from './routes';
 
@@ -24,10 +25,14 @@ app.use((req, res, next) => {
     if (renderProps == null) return next(error);
 
     let markup = renderToString(<RoutingContext {...renderProps}/>);
+    let helmet = Helmet.rewind();
     let html = [
       `<!DOCTYPE html>`,
       `<html>`,
         `<head>`,
+          `<title>${helmet.title}</title>`,
+          helmet.meta,
+          helmet.link,
           `<meta charset="utf-8"/>`,
           `<link rel="stylesheet" href="${assetsPath}/app.css"></link>`,
         `</head>`,

diff --git a/docs/6-react-metadata.md b/docs/6-react-metadata.md
@@ -0,0 +1,46 @@
+React does not handle the page title and meta tags. We will use the power of the [react-helmet](https://github.com/nfl/react-helmet) package.
+
+Start by installing the dependencies.
+
+```
+npm install --save react-helmet
+```
+
+Put the `<Helmet/>` tag inside components.
+
+```js
+// app/components/App
+...
+import Helmet from "react-helmet";
+
+let App = React.createClass({
+  render() {
+    return (
+      <div>
+        <Helmet title="App" />
+        ...
+      </div>
+    )
+  }
+});
+...
+```
+
+Open `app/server.js` and upgrade the server-side logic.
+
+```js
+import Helmet from 'react-helmet';
+...
+let markup = renderToString(...);
+let helmet = Helmet.rewind();
+let html = [
+  ...
+  `<head>`,
+    `<title>${helmet.title}</title>`,
+    helmet.meta,
+    helmet.link,
+    ...
+  `</head>`,
+  ...
+].join('');
+```
diff --git a/package.json b/package.json
@@ -25,6 +25,7 @@
     "history": "^1.9.0",
     "react": "^0.14.0-rc1",
     "react-dom": "^0.14.0-rc1",
+    "react-helmet": "^1.1.3",
     "react-router": "^1.0.0-rc1"
   },
   "devDependencies": {