Getting Started with React – Setting up the Development Environment

React (also React.js or ReactJS) is a JavaScript library for building user interfaces developed by Facebook & Instagram. It is not a full blown framework like Angular or Ember or even Backbone.js. It is a very simple View library which can replace the V in any other client-side MVC framework, i.e., you can use Backbone and React together for instance. In fact a lot of people are already doing that. Although when combined with a design pattern like Flux, you can totally give up on an MVC framework for your client-side architecture and happily develop apps with just React in conjunction with the Flux application architecture. React encompasses some interesting concepts too like Virtual DOM, uni-directional reactive data flow, etc. but don’t worry we’ll discuss all those much later when you’re already comfortable with the library and hacking your way through it.

Continue reading “Getting Started with React – Setting up the Development Environment”

Passing Data Across Components with Contexts (childContextTypes, getChildContext(), contextTypes) in ReactJS

Using React Contexts we can communicate across a hierarchy of Components. To understand this, think of a widget represented by a View component which has lots of child view components. You might use/re-use this component and want to pass certain properties or attributes that are relevant to different child components affecting the overall state (look and behaviour) of the main component in combination. Now one way to achieve this is by using props. But imagine passing an attribute all the way down from the parent to a child at the 5th level in the hierarchy. At every component level the property passed from the parent will have to be accessed (this.props.propName) and further passed down. This can get really messy. So let’s see how contexts can be used to pass data across components in a much elegant manner.

Continue reading “Passing Data Across Components with Contexts (childContextTypes, getChildContext(), contextTypes) in ReactJS”

Remove a Mounted React Component with React.unmountComponentAtNode()

While going through the codebase of React Bootstrap (for some reason), I came across an interesting implementation of a “React playground”. The code behind the playground is in ReactPlayground.js. I found this piece of interesting code there:

Continue reading “Remove a Mounted React Component with React.unmountComponentAtNode()”

React Integrating Routing to Material UI’s Left Nav (or Other Components)

Working with the React Material UI and trying to make routing work (or even understand how it works) with clicks on the LeftNav item items ? It’s actually quite simple once you get a hang of it. I’ll show you the code and explain the logic behind how on clicking navigation links in LeftNav you navigate to different pages/URLs in your app/website (in a snap). We’ll be using React Router, Material UI and obviously, ReactJS itself. I’ve also uploaded the code to Github.

Continue reading “React Integrating Routing to Material UI’s Left Nav (or Other Components)”

React Material UI – Open Left Menu (Navigation Drawer) on AppBar’s Hamburger Icon Click

This is more of a quick tip on a Material UI integration than a detailed article. We’ll see how to open the LeftNav component on clicking the AppBar’s left icon (hamburger menu icon). Unfortunately the documentation as of now doesn’t show the ReactJS code for this. Obviously it’s not too hard to figure it out either if you go through the website’s source itself on Github.

Continue reading “React Material UI – Open Left Menu (Navigation Drawer) on AppBar’s Hamburger Icon Click”