Isomorphic React apps in PHP via dnode - 2

Reading time ~1 minute

Part 2 - Route configuration

Now that we have coded our components, we need to link them up to a route handler, so when a user goes to http://localhost:3000/developers/page/1 we can catch that page 1 parameter and pass it as a property to our developers list.

Route configuration

var React = require('react');
var Route = require('react-router').Route;

module.exports = [
    <Route name='index' path="/developers/page/:page" handler={require('./developer_list.js')} ignoreScrollBehavior/>

Explanation: At the top we declare our React dependency and then go ahead and create an instance of react-router. The next step is to export a route declaration, in which we declare that the path /developers/page/:page will be handled by the developers_list.js component.

The ignoreScrollBehavior is a handy little parameter that prevents the browser from scrolling up when a user clicks on our pagination links. The page paramater will later tickle down via to the props object of our react components.

As a nice bonus of using React Router we have managed to create three state-less components. It’s considered a best practice to keep as little state as possible in your components, since every change of state triggers a new rendering of the component. As you can see, none of the components implement a getInitialState function and only work with the props handed down to them from above.

Later on, we’ll include this route definition script in our server script and browser script files in order to process urls coming via http requests and browser locations respectively.

Parsing ginormous JSON files via jq streaming

### External PostThis is a cheeky little post I wrote in 2018 documenting how to use jq (not relation to jQuery) to parse over a GB work ...… Continue reading

Creating a musical (data) pipeline

Published on February 09, 2018

Isomorphic React apps in PHP via dnode - 4

Published on June 21, 2015