How to install React Fiber

December 17, 2016 — Daniel Holmes

How we found Fiber

Skip to the how to.

Recently we've been working on developing an amazing refresh of our client's home automation web controller. We've been developing the front-end using React, Babel and Redux and have been absolutely loving it. It has been a steep initial learning curve but we found that was mostly because we were being "forced" to learn functional programming #winning.

As part of our continuous research and development process, we often send each other links we've found which are relevant to the work we're doing for our clients. This helps us to be ahead of the curve with what we build and ensures the product we deliver to our clients are top notch with the best information available.

The other day, Rob Welan one of our awesome team, sent me a link to React Fibre. This threw me for a six (Aussie term for something coming from left-of-field) because in the 2 years I've been doing research and poking around in the React community, it was the first time I'd heard of it despite it having been announced at conferences and the like since at least 2014.

After some research into what it was and where it was at I decided that as a side project I wanted to see if I could get our home automation client's web app to use React Fiber. It turned out that in the React Fibre documentation there was no description on how to install it, only a theoretical outlay of how it would work and the paradigm on which it would be built.

After some research I found out that React Fiber may be coming to React 16.0.0 and is currently being developed in the Facebook React Master Branch.

I tried doing the usual git install via npm but that wasn't working. It turned out that the git repo actually helps to produce multiple npm packages. Here are the steps I ended up with to get React Fibre working in our App:

How to install React Fiber

Note: Just in case you didn't realise, React Fiber is currently no where near production ready at the time of writing this article. You should not be using it in a production environment (and we aren't either)

  1. Begin by cloning the Facebook React repository in the parent folder of your project. For instance if you're developing your App in ~/Repositories/myapp then you'll want to clone the react repository into ~/Repositories/react.
  2. Next you'll want to cd into the react folder and run npm install followed by npm run build.
  3. Finally, cd into your app directory and run npm link ../react/build/packages/react and npm link ../react/build/packages/react-dom.

Voila, that will have your repository ready to use your local copy of the React library. Anytime you want to update just run in the react folder git pull origin master followed by npm run build and your app will be automatically updated.

Did it work for us?

Surprisingly there was absolutely 0 errors for us. Upgrading had no ill side effects that we could find which is amazing considering there are supposed to be some breaking changes. Give it a go in your app and tell us how you went!