ReactFoo 2019

ReactFoo 2019

A gathering of over 250 web and mobile developers working with React

About ReactFoo Bangalore:

ReactFoo Bangalore comes back to its original home after completing five successful editions, India-wide:

  1. ReactFoo Bangalore - September 2017
  2. ReactFoo Pune - January 2018
  3. ReactFoo Hyderabad - March 2018
  4. ReactFoo Mumbai - May 2018
  5. ReactFoo Delhi - August 2018

ReactFoo Bangalore will bring together over 250 developers working with React, and who are invested in building a space for conversations around experiences using React in production.
ReactFoo Bangalore is a single-day, single track conference with talks, office hours and Birds of Feather(BoF) sessions. Workshops will be held on 1 and 3 March, before and after the conference.

Who should attend ReactFoo:

  1. Front-end engineers
  2. Teams and companies who are evaluating frameworks to use for running applications in production
  3. Cross platform mobile developers

ReactFoo provides you the opportunity to:

  1. Learn from and network with peers from the industry
  2. Gain insights from case studies of practical implementation, and evaluate ReactJS and React Native for your work
  3. Understand how to run React in production, end-to-end, rather than only build an application with React

Hosted by

A community - for and of - front-end engineers to share experiences with ReactJS, performant apps with React, crafting better User Interfaces (UI) with React and GraphQL ecosystem. ReactFoo also discusses design patterns and user experience. more

Pavan Podila


The Common Patterns of React Components

Submitted Jan 10, 2018

The React framework allows you to shape the Component tree in a variety of different ways. The community has been exploring several ways to simplify the management of various tasks and have discovered a set of patterns, now prevalent in libraries such as React Router, React-Motion, Downshift, etc. These are the patterns that really make React fun to use.

Grounded in principles such as…

  • Separation of concerns between components
  • Uni-directional data flow
  • Crisp communication via callbacks.

…we will explore a bunch of patterns and their practical use cases. These include:

  • Higher Order Components
  • Function as Child Component
  • Domain and Service components
  • React Context for data propagation
  • Notification callbacks
  • Delegation for passing multiple callbacks
  • Container and Presentation Components

The combination of these patterns gives you a powerful toolbox to solve a vast variety of problems in React. We will use real-world examples that will help you assimilate these patterns in your own projects.


  • Starts with a quick intro to the foundations of a Component in React
  • Leads into the core principles of Component Driven Development
  • Explores the above list of patterns with a concrete example to tie it together
  • All examples are based on building an “Apple Watch Face”. The examples show how to tackle the various parts of the Component tree using the above patterns
  • Closes with further references

Speaker bio

Pavan Podila has been building Frontend applications since 2001. In this time he has used a variety of technologies, tools and platforms ranging from Java, .Net/WPF to iOS/macOS and of course the Web platform.

For the past 10 years he has been building large scale financial apps for some of the big names on the Wall St. Most of his focus these days is on Angular (1.x, 2.x), React, Node.js and a variety of client-side tools and libraries.

Pavan is a Google Developer Expert (GDE) for Web Technologies. He is a published author of WPF Control Development Unleashed, was Microsoft MVP for Client App Dev (2008 - 2011) and is the creator of QuickLens, a Mac App for UI Designers/Developers. He also likes to write articles and create videos courses at Tuts+. Current side project is to finish up a Packt Book on MobX and build courses on

He loves to spend his free time playing Ping Pong or sketching on his iPad Pro.

When time permits, he also blogs at



{{ gettext('Login to leave a comment') }}

{{ gettext('Post a comment…') }}
{{ gettext('New comment') }}
{{ formTitle }}

{{ errorMsg }}

{{ gettext('No comments posted yet') }}

Nitesh Tiwari

React + D3

Why Integrate D3 + React. How to integrate D3 + React. Advantages/Disadvantages of integrating D3 with react. Enhance D3+React app performance and developers experience. more

10 Jan 2018