With React and its associated build chain there's a lot of interesting links I've come across to read into best practices and also interesting features and options you can build out with additional libraries. So with that in mind I thought it might be a good idea to have somewhere to store a list of these useful links to come back to should I want to read them again.
Links around getting started with React
Although React itself is a very simple view library, it's complexities generally begin to come in when you start to want a more fully featured ecosystem such as build tools, state management, server communication, etc and unlike a framework like AngularJS, BackboneJS or the like, React is very much a pick your own style. This can have its advantages and disadvantages, and like anything in programming I'd suggest picking the best tool for the job instead of blind allegiance to a particular library, framework or methodology. This article focuses on React as some of the more recent projects I've been working on have really lent themselves to Reacts modularity but maybe in the future I'll do something similar for AngularJS and BackboneJS.
- Guide to Create React App
- A quick guide on how to setup the official quick start React template known as create-react-app which in itself provides a useful first reference on how to set up all the associated tooling such as webpack.
- React Boilerplate App
- I haven't done too much reading around this one as of yet but it seems to be a more fully featured version of the create-react-app listed above but includes things out of the box like Redux and Saga which makes it feel a little more opinionated but still a useful reference tool.
- react.express
- A really detailed and in depth guide on getting started with ES6, React and Redux, well worth a read if you have time.
- Build yourself a Redux
- A useful article that focuses specifically on Redux.
Links about Redux Middleware
Redux Middleware seems to have multiple functions but the really interesting one to me is using it to handle rest calls to the server. There's a really useful Stackoverflow question linked from the redux-thunk github documentation page that explains why you might want to use a fully fledged Middleware solution over just doing the Ajax call manually, I'd recommended reading that before reading any of the other links below.
- redux-thunk vs redux-saga
- With a bit of Googling and investigation into Dynamic Routing (which there are some links about further down this page) I was reminded of Middleware in Redux and how it can be used to make Ajax calls to the server in a more consistent way with better code reuse. So finding the above question and answer set which seem to describe the differences between the two (currently) most popular middleware solutions in quite a bit of detail felt like a useful find worth noting for the future.
- Dummy's guide to redux and thunk in React
- Although this link concentrates on the full end to end setup of React, Redux and Thunk as a whole I felt the context it provided to be very useful when trying it out.
- Beginners guide to redux-saga
- With the reading from above, redux-saga is a very similar idea to redux-thunk but has a totally different implementation in that instead of using the new ES7 rest helpers it relies on generators and promises to achieve a similar outcome.
Links about Dynamic Routing
The idea of dynamic routing seems pretty good in that you don't need to know your full site tree up from and you can determine more of it via rest requests to the server as and when people try and access certain pages. For a one page app it clear has a lot of benefit, I'm still trying to get my head around if it has much use in a traditional web application with server-side rendering from a server based app though.
- github.com/react-boilerplate/react-boilerplate/issues/1452
- This issue report talks in some detail about how to setup dynamic routing providing some good examples and even links it into the React Boilerplate App for context which is pretty useful.
Optimising your React application
Various ways to optimise your React application from a programmatic and speed aspect.
- https://medium.com/dailyjs/react-is-slow-react-is-fast-optimizing-react-apps-in-practice-394176a11fba
- https://hackernoon.com/react-stateless-functional-components-nine-wins-you-might-have-overlooked-997b0d933dbc
- https://flexport.engineering/optimizing-react-rendering-part-1-9634469dca02
Other interesting links