A couple of months ago I started learning React.js for a side project I’ve been slowly building in my spare time. In this post I’m going to share my initial thoughts and impressions.

Hopefully this should give an idea of what to expect for anyone considering React as a framework.

Learning Path

Since I already have 15+ years programming experience, I decided to try learning React in the shortest time possible.

I first watched Learn React JS in just 5 minutes to gain a broad overview of the topic.

I then followed two crash courses from Traversy Media:

• JavaScript Crash Course (to refresh and update my JS knowledge)
• React Crash Course

I supplemented these with the official React JS documentation and Rediscovering JavaScript by Venkat Subramaniam.

There are many longer, more in-depth courses available, but I found with the Traversy crash courses, after spending a couple of days in “learning mode”, I was able to start actually writing my own React code.

---

First Impressions

1. Tech stack

Some of the tech a React developer might need to know

My first impression of React was that web developers need to know a lot of tech!

In my main work, I’m generally working in just one language (eitherC++ or Python), with perhaps a handful of supporting libraries and frameworks.

Contrast with web, where even a front-end specialist needs to know at least HTML, CSS, JavaScript and one framework. That’s before we get into needing a working knowledge of APIs, JSON, testing frameworks, build frameworks, browser compatibility etc.

A full-stack developer needs to know even more: databases, services, query languages, backend frameworks etc.

If you’re planning to learn React, you need at least a basic knowledge of:

• Modern (ES6 and later) JavaScript
• HTML5
• Modern CSS

If you don’t have these, it will be necessary to take a primer in them first.

2. Dependencies

Dependency Graph for create-react-app from NPMGraph

My mind has been blown by the amount of dependencies involved in a React project. The above diagram shows the dependency graph for an empty project created using Create React App, and equates to over 200M of Node.js modules.

The actual project I’ve been building is at a very early stage, yet already has 700M+ of development dependencies. It’s an Electron app, which makes it bigger than a typical React web app, nonetheless, the distributed app size is still over 350M.

On the plus side, once you get in the spirit of it, having a lot of dependencies, becomes something of a bonus!

It means the process of application development becomes less about writing everything from scratch, and more about finding and integrating the right network of dependencies to get the job done.

Even at my early stage in my project, I’ve found most of the core work of my app can be done by leveraging existing modules, and this has saved a huge amount of time. Modules I’ve been impressed by include:

• Menubar: a high level way to create menubar desktop applications with Electron
• React Beautiful DnD: beautiful and accessible drag and drop for lists with React

#programming #web-development #software-development #javascript #react #react native