ReactFoo 2017

A conference on React

Abraar Syed


Componentization Patterns in React

Submitted Jun 18, 2017

React is one of the most popular libraries for front end development. With its dramatic rise, there have been considerable amount of patterns that have emerged out while breaking the applications into independent components. While some patterns enhance the structuring of client side components and improve the overall engineering process, others cause unforeseen problems in the long run.

This talk focuses on the following key aspects:

  1. Recognising few of such componentization patterns
  2. Understanding their pros and cons
  3. Going through some sample case studies


The talk will cover the following topics:

  1. Why componentization?
  2. Suggested approach to componentization
    * Presentation/Container Model
    * Dealing with states between Presentation/Container components
    * Case studies (
  3. Composition vs Inheritance
    * Understanding current trends in programming
    * What does JavaScript and React say about it?
    * Choosing the best fit


Basic understanding/experience of building applications using React

Speaker bio

Who am I?

I am a FOSS evangelist, tech enthusiast and a fun loving person. I love socializing and meeting new people. This is why I spend most of my leisure building communities. I have been an active member of many open source and free software organisations like FSMK (Volunteer) and Mozilla (Regional Ambassador Lead).

Currently, I work as a Product Engineer at jnaapti. At jnaapti, I spend most of my days writing code, building software courses and training corporates and engineering students. This exposes me to large set of technologies like React, Angular, Python, Docker, MongoDB, Java, JavaScript, Linux Shell Scripting and many more.

Why am I excited about it?

I have been writing code in React for over 1.5 years now. This has led me to come across a lot of patterns, anti patterns and best practises in react which we usually dont see in the initial stages of development. I have gained some insightful understanding of writing code in React and would love to share it with others.



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

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

{{ errorMsg }}

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

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