Sagar Ganatra's Blog

The title says it all. This is my third book with Packt Publishing and I wrote a book after four long years. In the last few months, I’ve spent my weekends writing this book and it was an arduous undertaking. Here’s the cover image: I have used React and React-Router in many projects and during the course of writing this book I’ve learned a great deal about these frameworks/libraries. This book is all about the ‘React-Router’ library and how you can use it any React application (web or native). The book covers the following topics: Chapter 1, Introduction to React Router 4 and Creating Your First Route , is an introduction to the component-based architecture in React and how you can get started with creating routes using the Route component from React Router. Chapter 2, Configuring Routes, Using Various Options in the Route Component , discusses various Route component props that can be used to match the requested URL location and how these matches can be used to render a com

I have been writing applications using React and Redux for quite some time now and thought of trying other state management solutions out there. It's not that I have faced any issues with Redux; however, I wanted to explore other approaches to state management. I recently came across MobX  and thought of giving it a try. The library uses the premise of  `Observables` to tie the application state with the view layer (React). It's also an implementation of the Flux pattern wherein it uses multiple stores to save the application state; each store referring to a particular entity. Redux, on the other hand, uses a single store with top-level state variables referring to various entities.

When I visualize building an application, I would think of using React and Redux on the front-end which talks to a set of RESTful services built with Node and Hapi (or Express). However, over a period of time, I've realized that this approach does not scale well when you add new features to the front-end. For example, consider a page that displays user information along with courses that a user has enrolled in. At a later point, you decide to add a section that displays popular book titles that one can view and purchase. If every entity is considered as a microservice then to get data from three different microservices would require three http  requests to be sent by the front-end app. The performance of the app would degrade with the increase in the number of http requests. I read about GraphQL and knew that it is an ideal way of building an app and I need not look forward to anything else. The GraphQL layer can be viewed as a facade which sits on top of your RESTful services o

I have been developing applications using React and Redux for quite some time now and I feel there are several starter kits out there. Although some add too much of boilerplate code, some include several libraries (to make it one kit that includes all) and some take the route of adding minimal boilerplate to include only the required libraries. I plan to write about these React-Redux starter kits/boilerplates in the coming weeks. This post focuses on a starter kit called Rekit. Rekit provides basic scaffolding and comes with a CLI that allows you to add features to your React application. Rekit focuses on application structure. It divides the application in terms of features, wherein each feature acts as a decoupled component and then assembled at the root level.

Hugo provides a good workspace for creating layouts and content. I'm very much satisfied with the options available to customise the site. However, Hugo does not have a say in how CSS and JavaScript should be structured so that it can be included on our site. In Hugo, the DOM nodes are already created and we need a mechanism which we can employ in adding event listeners to these DOM nodes. SPA frameworks like Angular and React, create DOM nodes and define event listeners in the controller of the component. To attach event listeners to an existing DOM tree I came across a JavaScript framework called FlightJS . It's a framework created by folks at Twitter that helps in adding behaviour to the DOM nodes. It's a minimal framework which does not dictate how the DOM nodes should be rendered nor it dictates the other aspects of the web application, such as routing, request/response handling, structuring data so that other components can consume it etc. FlightJS provides only a m

Layouts in Hugo allow you to define the how the posts in the content directory would be displayed. In addition to defining layouts for the content posts, you can define the layout for the home page, define partials and include it in different layout templates, also define the default layout to be used in case the matching content type layout is not found.