An Introduction to React - By Matt Webber

You may have noticed that JavaScript is evolving at a rapid pace. Just when you think you’re up to date with the latest frameworks and trends, along comes another. However, one of the most popular frameworks that won’t disappear any time soon is called React. This is a framework created by Facebook to solve some of the problems their developers were having during front-end development with other frameworks.

What is React?

Facebook defines React as “a declarative, efficient, and flexible JavaScript library for building user interfaces”. It is often compared to Angular which does not make sense as Angular is a complete framework including view layer. React is only a view layer that gives you a template language and some function hooks to essentially render HTML. What is important to note, is you cannot create a full application with React alone.

There are a few different things to learn when first being introduced to React. Firstly, React applications are comprised of components, these let you split the UI into independent, reusable pieces. Secondly React creates the Virtual DOM to help solve a lot of issues you can experience when manipulating the regular DOM directly. Finally React is generally written using something called JSX.

React Components

Applications that use React are built up of various components, some of which may descend from one another using inheritance or alternatively they may be completely independent of all other components. A component is used to display data as it changes over time. They are customised at the point of creation with different parameters. These parameters are called props.

For example, imagine a label component that was designed to display the currently logged in user. When it is created, it could be passed a prop that stores the username of the currently logged in user. It can then render this to the user as “Hello, {UserName}”.

Virtual DOM

The Virtual DOM is an abstract version of the DOM that sits alongside it. It is a concept adopted by React. By using the Virtual DOM you can render component state changes in isolation, meaning you don’t need to recalculate the whole DOM. This is done by using React’s diffing algorithm to detect what has changed. It then does reconciliation where it updates the DOM with the results of the diff.

JSX

Ultimately JSX (JavaScript XML) is a pre-processor that adds XML to your JavaScript. It is recommended when writing using React you write it using JSX. Though this is optional, there are many benefits to using JSX. Just like XML, JSX tags have a tag name, attributes and children. It also allows you to put your HTML & JavaScript in the same file (though there are mixed opinions about this, but it seems to be preferred by most people that use React!).

Some of the benefits to using JSX are that is performs optimisations when it gets compiled to JavaScript meaning it can run faster. It can also speed up writing templates for those who are more familiar with HTML over JavaScript. Below you can see an example of a simple React component written using JSX (ES6).

State Management

In React the only state management primitives provided are immutable props and mutable state. As state is harder to reason about, React encourages you to use state sparingly and focus your effort on props. If you have a component that requires a change, you should throw the component out and generate a new one with the required props. As such, React developers will tend to isolate state higher up in their component hierarchy, and pass it down as props, letting the state flow from the top of the tree to the bottom.

In larger applications, problems can start appearing when the component tree gets tall, and you have components that are far from each other, and one component is not a descendant of another, and both components depend on the same bit of state. Therefore, Flux and its many variants were created to tackle this issue. Flux is a big topic in itself, and is separate to React (to read more about it check it out here: https://scotch.io/tutorials/getting-to- know-flux- the-react- js-architecture.

Getting Started with React

The best way I have found to get started in React is to use the create-react- app NPM module. It sets up a blank canvas for you to start writing a single page application that uses React. It also installs Babel which will compile your JSX to JavaScript ahead of your deployment. You can use the commands below to install it.

If you’d like to try React out for yourself I’d recommend looking at Facebook’s getting started guide as a starting point https://facebook.github.io/react/tutorial/tutorial.html.

Thank you to Matt Webber for being this months guest developer.