Introduction to React

Emmanuel Morales · 13 Apr 2016

Post Thumbnail

I constantly see myself referencing critical concepts about React, such as its importance, syntax and performance. There is too much information out there, so my intention is to reconcile important concepts about this technology.

On this post, I’m going to cover an Introduction to React by answering three questions: Why, How, What, by following the idea of the “Golden Circle”.

Why?

Simplicity. Because there is always a better of building web applications.

“Life is really simple, but we insist on making it complicated.” -Confucius

How?

Solving one problem. According to Facebook, React was built to solve one problem: building large applications with data that changes over time.

Large applications such as Manufacturing (MES), Hospital, Pharma, and Time & Attendance systems, often require too many user interactions. Constantly, the application’s data changes everywhere: APIs, mobile devices, interfaces, etc. Performance is affected heavily. Also, organization, maintenance and scalability were taken in consideration when building this technology.

It’s Simple. Simply define how your application will look at a specific time and React will manage all UI changes when the underlying data changes. Try modifying the name string on the following example.

See the Pen react-hello-world-es6 by Emmanuel Morales (@embengineering) on CodePen.

It’s Reusable and Modular. React components are like LEGO bricks, you can reuse them in many different ways. Changing the underlying data may result in a different representation. On the following example we re-use the Hello component multiple times with a different overlying data.

See the Pen react-hello-world-es6-reusability by Emmanuel Morales (@embengineering) on CodePen.

It’s Fast. React uses a virtual DOM to determine what changed in order to reconcile and apply as few mutations as possible..

React Virtual Dom

Take a look at this example, where a collection of 1K items is being rendered in React, Angular, Knockout and Raw JS. Also, make sure you run multiple times for each technology in order to see the benefit of the algorithm.

Performance Result Example

Note that performance can increase even more by manually using the Lifecycle Method shouldComponentUpdate() and returning false when you’re certain that the new information (props) received will not require a component update.

What?

React is not considered a framework, but a JavaScript library for building User Interfaces. It’s considered the V (view) in the MVC pattern. It helps create modular web components that looks just like HTML, thanks to JSX. JSX is a JavaScript syntax extension created by Facebook “to define a concise and familiar syntax for creating tree structures with attributes”.

<Dropdown>
  A dropdown list
  <Menu>
    <MenuItem>Do Something</MenuItem>
    <MenuItem>Do Something Fun!</MenuItem>
    <MenuItem>Do Something Else</MenuItem>
  </Menu>
</Dropdown>

Conclusion

React is not a framework, it’s just a library to complement and support web development. It’s main function is to provide control of large UIs when data changes over time, improve performance and provide a modular solution, easy to debug and scale.

Like what you just read? Subscribe.