Learning to use React - My journey so far…

As a a recent graduate and Associate Software Engineer, I’ve had very little experience with JavaScript in my career thus far. I’ve used some Vanilla JS and the jQuery library to solve frontend problems, but otherwise, most of my development experience has been focussed in other languages like PHP.

I have known about React for a while now, but since my focus has been on backend technologies, I haven’t spent the time to learn it. React stood out to me as it has been around for a while now and brings a more organised approach to frontend development that I had not seen before.

This article outlines my learning experience so far, and my overall opinion about React - with the hope of shedding some light to people that are interested in learning it.

(Pssst… if you’re intrigued to go further after reading this post, check out my colleague, Daniel Butterfield’s post on React Storybook here!)

What is the benefit of using React over Vanilla JS?

One of the main benefits that I’ve seen firsthand is the speed of React apps. React works in a way which focuses on making as little changes as possible to the DOM (Document Object Model), because of this pages are very responsive. This is done by editing the DOM directly rather than traversing it. When your site updates, it makes changes to a virtual DOM, this is then compared to the actual DOM. React then only updates the DOM with the new changes.

The React dev tools and redux dev tools are great for debugging and are really easy to use. You are able to view the current and past state of each section of your app in real-time. This lets you see almost everything that is happening and leaves a lot of room for making performance improvements.

React apps are made almost entirely with components. Components are highly reusable - you can import a component into any other file and therefore use it anywhere. Components are somewhat comparable with a class in an object oriented language, however they are more reusable as you don’t need to worry about dependency injection.

How is it different to other libraries?

The most popular alternatives to React at the moment are Angular and Vue. React differs in that those are frameworks, whereas React is a library. Angular for example gives you everything you need out of the box to build a frontend SPA or web application. React doesn’t really give you much, to build a full application you will need additional libraries to go along with it such as React Router DOM, Redux etc.

This can be looked at as either an advantage or a disadvantage - for example an advantage being that a third party library will exist for pretty much anything you need to build an app. Also, with the community being very active, libraries are constantly being improved. However, this can mean that setup of a project takes a while as you may want to spend time weighing up the options you have.

Where to start

Learn ES6

Before you touch React, you will want to get up to date with the features introduced in ES6. The main features you should look at are arrow functions and classes but there is much more to cover, which I won’t do here. Take a look here for how ES5 code can be translated to ES6. To take full advantage of React, you will want to use ES6.

While it is possible without, it isn’t recommended.

Read the React docs

React has some of the best documentation i’ve seen, they have clear examples and explanations of the basic concepts. It is well worth going through the tutorial (Tutorial: Intro to React) to get a good understanding of how React works before going forward.

Install React dev tools on browser

Download the React dev tools extension for your browser. This provides you with a lot of information about your application, you can view the value of state properties, see which components update on certain actions etc. Not only is this useful for debugging, it also gives you a deeper understanding of the app you are working on.

Make something

At this point you should have a basic idea of how React works, so the best thing to do is to try making an app. I’d recommend something really simple such as a todo list. Make an input box, submitting should add the item to the screen, clicking the item should delete it.

While this doesn’t seem like much, it gives you a good starting point for managing state in terms of adding and removing

Lifecycle hooks

Learning about lifecycle hooks will give you a better understanding of what a component does under different circumstances. For example, when a component updates, there is a set of methods which can be hooked onto using their methods. This gives you greater control over your components.

State management

If you have started writing your own applications, you have probably noticed that managing state is a bit of a pain. This is a pretty big topic, but as a starting point look into Redux, the Context API and React Hooks. These are the two main ways for better state management.

My opinions of React

React has a huge company (Facebook) behind it, and the open-source community working on it is very active. There are multiple third party libraries for handling issues such as state management, and they are constantly being improved.

A concern that I still have is that you need to use a third-party library to have any chance of managing a large project with complex state. There are a lot of options available and it can be hard to find the best option, especially as a beginner. Redux or MobX would be the recommendation for now, there are also some interesting libraries in the works such as Recoil which has potential, but it isn’t perfect just yet.

React is the first JavaScript library or framework that I have actually enjoyed learning and plan to stick with, so that alone says a lot. Once you get your head around the lifecycle and the idea of state, it becomes really fun to work with.