ALCMY™ Intern Diaries – A quick look at React.Js

Since joining ALCMY I’ve been wrestling with the React library and it has prompted me to let you in on how the JavaScript library has transformed the way user interfaces are created.

React has built quite a buzz in the web development community following its release in 2013 by Facebook. Since then it has been adopted by big names such as Airbnb, Netflix and Dropbox and has seen its functionality extended to support the development of cross-platform mobile apps and even Virtual Reality (VR). Web developers can now produce robust, faster and more reliable Single Page Applications. What is React Js? I’m glad you asked; read along to learn more about the JavaScript library.

This JavaScript library approaches user interfaces to head on. As a result, React doesn’t concern itself with your choice of back-end technology; giving you the freedom to assemble your tech stack as you see fit. The focus on UI development has brought forth a considerably different approach to issues such as tight coupling between your JavaScript and HTML, repetition of code and performance issues associated with updating the Document Object Model (DOM).

4 key features in React

JSX

React offers us the ability to quickly generate HTML from the confines of JavaScript by sprinkling a little bit of syntactic sugar. HTML written using JSX is converted in the browser into normal JavaScript-producing our output which would take considerably longer to write with the absence of JSX. Developers can embed data in JSX, going a long way in simplifying web development by removing the need for a templating engine. The hassle of frequently switching back and forth between your HTML and JavaScript file is a thing of the past with React.

Components

React breaks away from conventional thinking with the introduction of components. A component is simply a small piece of functionality, think of a menu, a button or a search field. Writing code the React way encourages us to produce code of a more modular nature. By breaking a solution down into individual units, developers adhere to good coding practices in the form of code reuse, Don’t Repeat Yourself (D.R.Y), right? Walmart Labs is an amazing ambassador for component reuse with a library spanning thousands of components across their brands including Asda and Sam’s Club.

After the introduction of ES6 the ability to now export and import code takes React to another level. Developers that make use of this functionality can say goodbye to the days of files spanning hundreds or even thousands of lines of code and instead store a component in its own file. How we choose to use or better yet, compose components is up to us but we must admit that it’s a great addition to the philosophy of thought surrounding front-end development.

State

The concept of state took me a while to grasp but it’s really quite simple. State is just data. React puts an emphasis on one-way data flow, therefore, it is important where we store our data. React emphasises the idea of smart and dumb components in setting out best practices in managing state. Dumb components are solely responsible for rendering information visually. Smart components on the other hand handle data and any operations that are performed on it. Understanding this will help us structure our applications by assigning state to the correct components, namely smart components.

The mutable state data held by our smart components must be communicated to the dumb components to render it. The use of properties also known as props grants us the power to inform dumb components with some state data. Once this data flows down from smart components to dumb components the data becomes immutable, in that it cannot be changed. Remember, dumb components are only responsible for rendering information therefore there cannot be any operations performed on data there.

Virtual DOM

Last but not least we have the Virtual DOM also known as the Document Object Model. The concept comes as a response to the inefficiencies seen in DOM manipulation. Using standard JavaScript, changes in the browser’s state would ripple through the DOM causing the page to update. This doesn’t sound so bad until you consider cases where changes are so minimal that the performance cost of updating the page seems pointless. Imagine we wanted to change one item in a list, the whole list would be updated to produce that single change; now consider a large-scale web application and the potential for great inefficiencies, not so fast now eh?

What the Virtual DOM does is store a duplicate of the DOM in our browser’s cache. When an update is received, the previously held instance is compared with the new instance and then any changes are reconciled within the actual DOM. Updates are thereby localised and remove the need to update the whole page.

Key takeaways

Construct the UI with components

Identifying how the user interface can be represented as components can be time-consuming, however, it’s also important understanding that code is read more often that it is written. Keeping this in mind will really work to help your future self as well as those who work with your code.

Define state then give it a home

Understanding which data is mutable and cannot be derived from other data sources goes some way in assisting us in deducing what constitutes a state. Getting this right makes for a lean code base.

Set up your data flow

After we organise the arrangement of components and definition of state we can properly embrace one-way/unidirectional data flow. Effectively relating how data is passed between components makes for clean code and helps us avoid the risk of the dreaded ‘spaghetti-code’.

Closing thoughts

Coming to terms with the concepts underlying the aforementioned features was a challenge that didn’t make for the smoothest learning curve but now that I’ve grasped these concepts I can really see the value in the library. Thinking in React is a real thing and brings with it exciting prospects as the library continues to expand. I am looking forward to learning more about the library and what it has to offer, stay tuned and peace!

Tags: