How do you React?

– With JS! Geeky pun aside, if you’re one of the people that has not yet boarded the React train, or if you’re just interested in a brief introduction on what React is and why it’s awesome – keep reading!

 

So, let’s start with the what part, what is React?

React is a JavaScript library for building user interfaces, it’s often described as the V in the MVC structure. In case you’re not familiar with the MVC structure it is a software architecture pattern, Model View Controller, used to implement user interfaces. Where the Model should define the data structure, the View should define the display (UI) and the Controller should contain control and business logic, acting like a bridge between the model and the view.

React is used for building the view layer of web applications. And its winning concept is spelled: COMPONENTS.
A component is a module, think of it as a reusable piece of the UI, it is self-contained and isolated from the rest of the UI. Components are composable, meaning that a component can include other components. They take input, called “props” and return a React element that describes what should be displayed in the view.

 

How does it work?

Unlike other JS frameworks and libraries React does not manipulate the browser’s DOM (Document Object Model) directly, it uses a virtual DOM. The virtual DOM is a representation of the browser’s DOM that is kept in memory. When our data changes, the virtual DOM will be updated, and then React can determine what changes need to be done to the actual browser DOM. This makes updates to the UI really fast, and we can easily build a more dynamic UI.

To build the UI we will need to build components. That leads us to another corner stone of React, JSX. JSX is a custom JavaScript syntax, that allows HTML quoting. It is used by React to map elements to real HTML elements. A very simple JSX element:

It might be worth mentioning that it is not a requirement to use JSX, but it’s the preferred way of working.

Elements or components, what’s the difference? Elements are the smallest building blocks used in React, and they describe what you see on the screen. It is a plain object describing a component’s type and properties (props). Elements are what components are made of.

There are two types of components, functional and class components. A functional component looks like your typical JavaScript function:

Whereas the class component uses the ES6 class definition, and looks like this:

These are equivalent from a React point of view, and as you can see, both the functional and the class component returns a React element.

As mentioned earlier, components take input in form of properties, “props”, which are immutable, forcing components to act like pure functions with respect to their props. Acting like a pure function means that they can never change their input, and therefor they will always return the same result for the same inputs. This ensures that data will only flow one way. Put simply, props are options passed to the component to affect the way it is rendered.

The one-way data-binding might sound like a limitation, but in my opinion it’s not. Usually components are written to pass down properties to child components, and the child components can communicate with parents through callback functions bound to action events from, for example buttons.

 

Finally, how do we get our components to show up on the screen?
Let’s take your arbitrary index.html file and add some React magic to it.

In the example above, React and ReactDOM is in the head element of our page, so that they will be available as variables for us to use in the body element of the page. There is also a reference to babel-standalone, which is needed for transpiling ES6 into ES5 JavaScript, to have the page supported in older browsers.

The React application is defined in the body, and for now the application consists of only a single element, the <h1> How do you react?</h1>. The ReactDOM.render function will place this minimal application on the page. The function takes two arguments, the first is what to render, and the second is where to render it. So if the ReactDOM.render( , document.getElementById(‘app’)); part of the script above had been left out, nothing would have been rendered on the screen.

Although it is teeny-tiny, this piece of code qualifies as a React application. If you want to try it out for yourself, here’s something to fiddle with: https://jsfiddle.net/tgsw9ncm/

 

Let’s finishing this off, why is React is amazing?

  • The virtual DOM enables great user experience.
  • Plug n’ play developer experience with reusable components.
  • One-way data flow simplifies A LOT! (And makes debugging super easy)
  • Lightweight library – means you pick what other tools to add to the mixture.
  • The syntax is easy to learn.
  • It’s very testable…
  • ..And it’s so much fun!