Adding React Router to a React App

react-router is a routing library for React, that allows you to declare which components render based on url paths. It’s similar to ng-route and ui-router in AngularJS.

To get started, install react-router npm module:

npm install react-router --save

Full docs are here.

While working on converting an existing web app to React, I ran into a few issues getting my react-router usage working as I wanted.

Here’s my first attempt adding the Router declarations into an existing Container component that renders NavigationComponent – this Component renders a set of navigation links that are common across each of the pages:

<div>
    <NavigationComponent/>
    <Router history={hashHistory}>
        <Route path="/" component={Home}/>
        <IndexRoute component={Home} />
        <Route path="new" component={AddNew} />
        <Route path="search" component={Search} />
    </Router>
</div>

The first error I ran into was this:

Uncaught Error: <Link>s rendered outside of a router context cannot navigate.

Ok, this makes sense, so I need to move the NavigationComponent that renders my Links within <Router> :

<Router history={hashHistory}>
    <Route path="/" component={NavigationComponent}/>
    <IndexRoute component={Home} />
    <Route path="new" component={AddNew} />
    <Route path="search" component={Search} />
</Router>

Routes at the same level replace each other when rendered. To keep the navigation component rendered with the AddNew and Search as child sections of the nav area, nest the Routes as child elements:

<Router history={hashHistory}>
    <Route path="/" component={NavigationComponent}>
        <IndexRoute component={Home} />
        <Route path="new" component={AddNew} />
        <Route path="search" component={Search} />
    </Route>
</Router>

Now, for the NavigationComponent to render it’s child elements, you need to tell it to render:

{this.props.children}

So now this becomes:

render() {
    return (
        <div>
            <div>
                <nav className="navbar navbar-default" role="navigation">
                    <div className="navbar-header">
                        <Link className="navbar-brand" to="/">AddressBook</Link>
                    </div>

                    <div className="collapse navbar-collapse navbar-ex1-collapse">
                        <ul className="nav navbar-nav">
                            <li className="active"><Link to="search">Search</Link></li>
                            <li><Link to="new">New</Link></li>
                        </ul>
                    </div>
                </nav>
            </div>

            <div>
                {this.props.children}
            </div>
        </div>
    )
}

Here’s a good reference for getting started: https://medium.com/reactspeed/create-basic-navigation-components-using-react-router-475bc55a517f#.itkvn5st9

 

 

Installed probably the last custom ROM update on my Galaxy S3 this year

I’ve been running custom CyanogenMod builds on my now aging Galaxy S3 for a while now (12.1, 13). Given that support for CyanogenMod ended at the end of last year, I thought it would be worth one last new ROM before I upgrade my phone this year, and installed the new LineageOS.

Using the already installed TWRP recovery that I already have installed, I downloaded the latest nightly LineageOS build from here, the latest Google Apps for Android 7.1 from here, booted into Recovery, deleted cache files etc, installed both new ROMs and now I’m up and running.

Even on my aging Galaxy S3, I have to say, this Android 7.1 build is surprisingly snappy, even faster than the last CyanogenMod build that I had that was pretty good.

Manually adding create-react-app scripts to an existing React app

create-react-app saves you a ton of time to get a new React app set up with all the dependencies you need for an ES6 based React app using Babel and webpack. Adding the scripts and config to an existing app though doesn’t seem to be documented in the user guide. This post here though walks through the basics.

All you need is to:

npm install react-scripts --save-dev

Then and the default scripts to your package.json:

"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
}

Then assuming you have structured your project folders the same as an app created with create-react-app, you’ll be able to ‘npm run start’ and off you go.

Converting my AngularJS AddressBook app to React

Several months back I spent some time looking at Docker and Docker Compose, and put together a sample AngularJS web app served by Nginx in one container, against a Spring Boot JAX-RS RESTful backend in another container, and using MongoDB in another container.

I wrote a couple of articles (part 1, and part 2) describing the Docker containers and how they were configured together using Docker Compose, but I didn’t spend much time talking about the web app itself. I was intending at the time that I’d develop the frontend app using a number of frameworks as a comparison. The AngularJS AddressBook app is functional (on GitHub here), I got part way converting it to an Angular 2 based app (on GitHub here, although clearly I was unsure at the time thinking Angular 2 was called AngularJS2), but the React app I made a rough start at but didn’t get very far.

Given most recently I’ve been spending some time getting up to speed with some React, I’m going to pick up this app again and complete it, so I’ll have an interesting side by side comparison of the same app developed with all three frameworks. More updates to come.