Getting started with react

This article will cover the basics of the React library, what it does and how you can get started with your own projects.

What is it?

React was developed by Facebook in 2013 as a JavaScript library for front-end tool kit. It is now a hugely popular library used all over the world by huge corporations from Netflix to Reddit, including all of Facebook’s sites like Instagram. React prompts a tree-like design due to its component based structure. The developer creates different components like buttons or othe UI elements then uses these components to build up rich user experiences.

Prerequisite knowledge

React itself is built using JavaScript and falls nicely into the hands of web developer that already is familiar with basic web technologies like HTML, CSS and JS. For the most part you will find yourself programming in JavaScript and JSX. JSX is a variant of HTML and XML and is translated into React statements in JavaScript using a translation library like Babel. This translation is all done automatically an Babel comes pre-installed when using create-react-app.

What makes react different?

The main difference between React and standard web development is React’s implementation of a virtual DOM. To understand this you must first understand what the DOM is in general.

Document object model

The document object model, or DOM, is a data structure that holds all the information about the webpage you are viewing. HTML DOM stores data in form of a tree:

The DOM is completely refreshed when updating any objects, so manipulating the DOM is often slow and inefficient. The solution here is to use the virtual DOM. The idea of a virtual DOM was not pioneered by the folks that made React, but they certainly popularised it. The benefit of the virtual DOM allows React to work on its own local version of the DOM which is much faster, but it also improves the way in which the page is update.

The virtual DOM only updates components when they need to be, so refreshing the entire DOM is unnecessary. The way this is done is using React’s states and props. States in React are essentially little nuggets of data specific to each component, components always have the same properties of data but they do not have to share the same state. For example, two buttons can have the button text and colour stored in the state of the component, so each button has a different appearance based on it’s state. The values or properties can be passed in by the parent component as a prop. Now we have our components set up with their unique data stored in the props and state, React can intelligently update components as and when this data changes – and only these components too, which means the rest of the DOM is not updated at all. This makes the other components in the site more stable as they are purely self-reliant and updating the DOM is much quicker thanks to React.

JSX

As mentioned before JSX is the main difference the developer will come across coming from a standard web-dev background. JSX is compiled and translated into React.createElement(...); calls using Babel. This allows the developer to use React in a much more readable and efficient way.

Let’s take a look at an example of some JSX…
<Button buttonText="Press this button" onClick={handleClick} />
This snippet of JSX is an example of a component being used to create an element. The element created here is of type Button. Notice how the B is capitalised… This is because React components should always have capitalised component names to avoid conflict with existing HTML or JS namespaces.
So we are creating whatever element is returned by the Button component with the specified properties of “Press this button” and another function called handleClick(); for buttonText and onClick respectively. These values do not correspond automatically to the button properties in HTML. In fact, these properties can be applied anywhere the developer wants in the Button component.
This example of JSX would be compiled by Babel into a statement not unlike the following:
React.CreateElement(button, [buttonText, handleClick], [children])
Here, the buttonText would be passed to the element with the handleClick function in a list to be used by the component. The question is, what’s the [children] parameter for?
JSX allows developers to nest components like you normally would with HTML objects. The children parameter is just a list of any components that should be nested within the one being created. These nested components can also have nested components for themselves. This would result literally as multiple nested React.CreateElement(...) after translation but are programmed as list of JSX components so developers don’t have to bother untangling potentially mind boggling nested statements.

Hello world

You’ve got the grips of how react works and you want to put it to the test… where do you start?

create-react-app

No, that’s not a poorly formatted title for this section. Create-react-app is an npm script that installs a handful of React libraries and extras into a neat little project ready for you to get started on. One of the most enticing things for developers when it comes to React is its size. React is staggeringly small at only 20.7kb! The reason for this comes from the inherent difference between a library and a framework. Frameworks are stuffed full of codebases and functions for you to go to town on – but it is unlikely that a single project will make use of it all. That’s why React allows developers to chop and change the different libraries they make use of. When using create-react-app the most common and most useful libraries are automatically installed, like Babel, the one we use to translate JSX to JS.
Now that you have run create-react-app, you can get started messing around and start creating your very own react app. Alternatively, online resources exist which allow developers to code React apps in their browser, eliminating the need for a local server.

Thanks for reading, any questions or just want to say hello? Drop me a line by clicking the button on the right!

Cheers,

Thomas