Skip to content

Quality Conf 16.2 Recap: Introduction to React

On December 16, 2016, DevFacto hosted Quality Conf 16.2 – a full-day internal conference dedicated to learning and team building.  A number of sessions were presented by our team members which focused on everything from personal to technical growth.  In this post, we recap “Introduction to React” which was originally presented by DevFacto consultant Chris Nissen.

Overview

React is very popular in the web development community and continues to gain momentum. At DevFacto, it’s important that we continue to develop our competency with React, as a number of our recently created web applications are built using this tool.

React is an open-source JavaScript library for data rendered as HTML. An engine for building composable user interfaces, it is maintained by Facebook, Instagram and a community of individual developers and corporations. It is commonly used in combination with Redux, a predictable state container for JavaScript apps. (If you’re looking for a WordPress framework, check out Redux Framework.) It helps you write applications that behave consistently, run in different environments (client, server, and native), and are easy to test.

Key Takeaways

There are a number of reasons that we enjoy working with React, including:

  • Easy to know how a component is rendered by looking at the render function.
  • One-directional data flow makes code easier to understand.
  • Interfaces can be easily broken down into small, simple components.
  • It is also really easy to see the layout, or how components are plugged/combined with each other.
  • Component markup and display logic travel together
  • Markup is built in code, resulting in better compile-time checking and more powerful constructs
  • You can render React on the server-side.
  • It is easy to test, and you can also integrate some tools like jest.
  • It ensures readability and makes maintainability easier.
  • You can use React with any framework (Backbone.js, Angular.js) as it is only a view layer.

Further React Reading

  1. Pro React Book
  2. Full-Stack Redux Tutorial
  3. Official React Tutorial
  4. Official Redux Documentation
  5. Microsoft Starter Project for React + Redux + TypeScript