Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -81,6 +81,7 @@ A demonstration of this app can be seen [running on heroku](https://react-redux.

* [Exploring the Demo App](docs/ExploringTheDemoApp/ExploringTheDemoApp.md) is a guide that can be used before you install the kit.
* [Installing the Kit](docs/InstallingTheKit/InstallingTheKit.md) guides you through installation and running the development server locally.
* [Adding Text to the Home Page](docs/AddingToHomePage/AddingToHomePage.md) guides you through adding "Hello, World!" to the home page.
* [React Tutorial - Converting Reflux to Redux](http://engineering.wework.com/process/2015/10/01/react-reflux-to-redux/), by Matt Star
If you are the kind of person that learns best by following along a tutorial, I can recommend Matt Star's overview and examples.

Expand Down
60 changes: 60 additions & 0 deletions docs/AddingToHomePage/AddingToHomePage.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,60 @@
# Adding Hello, World as static text

Printing *Hello, World!* is a traditional task. This guides you through adding the text "Hello, World!" to the
home page of the sample application.

## Find the home page

First, find the correct file to change by walking through the kit's directory tree:

![Finding The Home Page 1](find_home1.png)


![Finding The Home Page 2](find_home2.png)

![Finding The Home Page 3](find_home3.png)

![Finding The Home Page 4](find_home4.png)

So, the likely file is `src/containers/Home/Home.js`.

## Start the server and open the browser

Execute `npm run dev` and open http://localhost:3000:

* `./package.json`, using [concurrently](https://www.npmjs.com/package/concurrently)
and [better-npm-run](https://www.npmjs.com/package/better-npm-run), runs
`./webpack/webpack-dev-server.js` on port 3001; runs `./bin/server.js` for HTTP on port 3000;
and runs `./bin/api.js` for the REST API on port 3030.

* `./bin/server.js` calls `./src/server.js` and uses the [HMR plugin](http://andrewhfarmer.com/webpack-hmr-tutorial/)
for hot reloading, meaning the browser refreshes automatically when any file in `./src` is changed.

* `./webpack/webpack-dev-server` does teh actual compilation with the
[webpack dev middleware package](https://github.com/webpack/webpack-dev-middleware) to provide a key feature found
in Glup: compilation without writing intermediate files to disk. Configuring webpack
[can be confusing](https://medium.com/@dtothefp/why-can-t-anyone-write-a-simple-webpack-tutorial-d0b075db35ed#.cle1vv5ql).

* `./bin/api.js` calls `./api/api.js`. It receives incoming REST requests as JSON objects and responds with
other JSON objects.

## Change the text

Add the static text to (`src/containers/Home/Home.js`):

![Add Hello Header to Home](add_home.png)


When you save the file to disk, the change to the `./src` directory is picked up by the
[piping](https://www.npmjs.com/package/piping) module, triggering the webpack-dev-server to rebuild
`./static/dist/[checksum].js`, and triggering a stub injected into the HTML file served to the browser to
reload. The rebuilding processes through webpack middleware and plugins that compile `*.sccs` files,
transpile JAX and ES6 (or ES7), and bundles together all the resources into one package in about 6 seconds.
That is, the browser will show "Hello, World!" on your web page in about 6 seconds:

![Hello World rendered on home page](hello_rendered.png)

## Conclusion

You added **Hello, World!**. The process is [as clear as is the summer's sun](https://www.youtube.com/watch?v=EhGiSfv5FJk&t=3m23s).

Binary file added docs/AddingToHomePage/add_home.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added docs/AddingToHomePage/find_home1.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added docs/AddingToHomePage/find_home2.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added docs/AddingToHomePage/find_home3.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added docs/AddingToHomePage/find_home4.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added docs/AddingToHomePage/hello_rendered.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.