Tweak howto

Author: gaearon

template/README.md

@@ -9,7 +9,7 @@ You can find the most recent version of this guide [here](https://github.com/fac
   - [npm start](#npm-start)
   - [npm run build](#npm-run-build)
   - [npm run eject](#npm-run-eject)
-- [How To](#how-to)
+- [Recipes](#recipes)
   - [Displaying Lint Output in the Editor](#displaying-lint-output-in-the-editor)
   - [Installing a Dependency](#installing-a-dependency)
   - [Importing a Component](#importing-a-component)
@@ -19,6 +19,7 @@ You can find the most recent version of this guide [here](https://github.com/fac
   - [Adding Bootstrap](#adding-bootstrap)
   - [Adding Flow](#adding-flow)
   - [Adding Custom Environment Variables](#adding-custom-environment-variables)
+  - [Integrating with a Node Backend](#integrating-with-a-node-backend)
   - [Deploying](#deploying)
   - [Something Missing?](#something-missing)
 
@@ -89,7 +90,7 @@ Instead, it will copy all the configuration files and the transitive dependencie
 
 You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
 
-## How To
+## Recipes
 
 ### Displaying Lint Output in the Editor
 
@@ -129,7 +130,6 @@ npm install -g eslint babel-eslint eslint-plugin-react eslint-plugin-import esli
 
 We recognize that this is suboptimal, but it is currently required due to the way we hide the ESLint dependency. The ESLint team is already [working on a solution to this](https://github.com/eslint/eslint/issues/3458) so this may become unnecessary in a couple of months.
 
-
 ### Installing a Dependency
 
 The generated project includes React and ReactDOM as dependencies. It also includes a set of scripts used by Create React App as a development dependency. You may install other dependencies (for example, React Router) with `npm`:
@@ -317,7 +317,7 @@ Now you are ready to use the imported React Bootstrap components within your com
 
 Flow typing is currently [not supported out of the box](https://github.com/facebookincubator/create-react-app/issues/72) with the default `.flowconfig` generated by Flow. If you run it, you might get errors like this:
 
-```
+```js
 node_modules/fbjs/lib/Deferred.js.flow:60
  60:     Promise.prototype.done.apply(this._promise, arguments);
                            ^^^^ property `done`. Property not found in
@@ -343,7 +343,7 @@ src/index.js:5
 
 To fix this, change your `.flowconfig` to look like this:
 
-```
+```ini
 [libs]
 ./node_modules/fbjs/flow/lib
 
@@ -362,7 +362,7 @@ Re-run flow, and you shouldn’t get any extra issues.
 
 If you later `eject`, you’ll need to replace `react-scripts` references with the `<PROJECT_ROOT>` placeholder, for example:
 
-```
+```ini
 module.name_mapper='^\(.*\)\.css$' -> '<PROJECT_ROOT>/config/flow/css'
 module.name_mapper='^\(.*\)\.\(jpg\|png\|gif\|eot\|svg\|ttf\|woff\|woff2\|mp4\|webm\)$' -> '<PROJECT_ROOT>/config/flow/file'
 ```
@@ -386,13 +386,16 @@ First, you need to have environment variables defined, which can vary between OS
 consume a secret defined in the environment inside a `<form>`:
 
 ```jsx
-<h6>Hello, Admin!<h6>
-
-<small>You are running this application in <strong>{process.env.NODE_ENV}</strong> mode.</small>
-
-<form>
-  <input type="hidden" defaultValue={process.env.REACT_APP_SECRET_CODE} />
-</form>
+render() {
+  return (
+    <div>
+      <small>You are running this application in <b>{process.env.NODE_ENV}</b> mode.</small>
+      <form>
+        <input type="hidden" defaultValue={process.env.REACT_APP_SECRET_CODE} />
+      </form>
+    </div>
+  );
+}
 ```
 
 The above form is looking for a variable called `REACT_APP_SECRET_CODE` from the environment. In order to consume this
@@ -418,11 +421,12 @@ variable will be set for you automatically. When you load the app in the browser
 its value set to `abcdef`, and the bold text will show the environment provided when using `npm start`:
 
 ```html
-<h6>Hello, Admin!</h6>
-<small>You are running this application in <strong>development</strong> mode.</small>
-<form>
-  <input type="hidden" value="abcdef" />
-</form>
+<div>
+  <small>You are running this application in <b>development</b> mode.</small>
+  <form>
+    <input type="hidden" value="abcdef" />
+  </form>
+</div>
 ```
 
 Having access to the `NODE_ENV` is also useful for performing actions conditionally:
@@ -433,6 +437,10 @@ if (process.env.NODE_ENV !== 'production') {
 }
 ```
 
+### Integrating with a Node Backend
+
+Check out [this tutorial](https://www.fullstackreact.com/articles/using-create-react-app-with-a-server/) for instructions on integrating an app with a Node backend running on another port, and using `fetch()` to access it. You can find the companion GitHub repository [here](https://github.com/fullstackreact/food-lookup-demo).
+
 ### Deploying
 
 #### GitHub Pages