What is React?

The team behind React define it as ‘a JavaScript library for building user interfaces’. Let’s break that down. The JavaScript library part means that React is itself just JavaScript. It’s JavaScript code which has been written by the creators of React, and which you can include in your projects. Why would you want to do this? The second part of the definition contains the purpose of React: to make it easier for you to build (web-based) user interfaces. React was developed at Facebook and has been available for public use since 2013. Since then it’s become one of the most popular JavaScript front end libraries (competitors include Angular and Vue.js). The most common way to use React in your project is by installing it as a node package. Alternatively, you can add it to your web page in a HTML <script> tag if you prefer. This second approach takes less setup time and is good for experimenting.

So how does React work? One of its core features is that it conceptualises the different parts which make up a web page as components. Thus, in React, elements like a button, a form, or a navigation menu are all individual components which are coded in a modular way. A second core feature is that React makes it easy to update and re-render components in response to user events, and it limits updates to just those components which need it. It achieves this by storing your application’s data in an object called state. When the data changes, React will update the DOM behind the scenes, removing the need for you to directly interact with the DOM. React components are typically organised in a parent-child hierarchy where data is passed down to child components through an object called props (short for properties). When props change, React updates the child components which receive them. Another prominent feature of React is that through JSX, a syntax extension to JavaScript, it gives you the ability to write HTML in your JavaScript code.

React works then by managing updates, abstracting away direct interventions in the DOM, and providing a framework for you to organise and structure your code. I’ve found that this does indeed make it easier to create user interfaces. Once I learnt how to think in terms of the concepts I’ve outlined above, I appreciated how it makes core front end challenges, like managing updates, easier. It’s also made me think more about the code that I’m writing, and how I should structure it. One thing to be aware of is that it does come with a lot of dependencies, so if you’re only creating a small app, it’s worth thinking twice about whether it’s necessary. The more complex your app gets though, the more value you get React’s ability to manage updates and the structure which it gives to your code.

If you’re interested in trying React yourself, a good starting point is its official site, which includes excellent and readable documentation and tutorials.

I hope you enjoyed reading the article! If you have any questions, suggestions, or corrections, feel free to get in touch with me.

Email: rossmorran@hotmail.co.uk
Twitter: @RossMorran