What makes React Native difficult to learn

You might’ve already read that I’ve recently taught a university course of React Native. There was a big contraint: my part of the course was really short —I had only two days.

When I started preparing a curriculum for the course my main question was: how can I teach them how to create an application in two days? Mind you, some of the students had really basic familiarity with the JavaScript syntax, making even basic ES6 features (like destructuring and arrow functions) something new that needs to be explained. I also had to explain the main idea of React and the benefits of Functional Reactive Programming in general. I didn’t want them to just follow the steps without understanding why we’re working this way. Finally, I needed to go through an actual exercise that shows them how to combine all this together to write a useful app. All this in two sessions of three hours each. Impossible.

In the end, it turned out that university students are used to achieving impossible learning goals. The course is scored on the basis of project assignments that the students work on by themselves for two weeks. 70% of them managed to hand in a working application, most of them surpassing my expectations of what can be achieved with only two days of guided introduction and two weeks of solo work.

But I hit some quirks in React Native ecosystem itself that make it difficult to teach it in such a setting. And that’s what I wanted to share here.

JavaScript syntax is a mess

I remember back in the days when I was teaching Ruby there were two questions I always dreaded:

1. Why we put parentheses here, but here we don’t? (In Ruby, the parentheses were optional in most method calls, but were necessary in some of them — in order to make parameters ambiguous. Not an easy thing to explain to new programmers.)
2. Why do some Hash structures look different than others? (In Ruby, at some point a „new” Hash syntax was introduced, which sounded like a great idea. However, it can’t be used to represent all possible key values, so for some usecases you need to revert to using the old syntax. With a lot of code bases having a mix of both, it makes it a lot harder to explain somebody what a Hash actually is.)

In JavaScript we have the basic syntax that works in the browser, we have the „jQuery syntax” that’s familiar to a lot of people who dabbled in frontend stuff for a short time, and then we have all those ESX syntaxes with different levels of adoptions in different node versions. But what’s more important, with different levels of adoption in different learning materials.

Currently, there’s only one solution to that: dive deep into learning JavaScript and learn (and embrace) all of its little quirks. However, for a university student who’s writing projects in four different programimng languages just to finish one class, it’s simply not possible.

React Native moves fast and breaks things

As a part-time professor, I don’t have neither the time, nor the access to configure all the machines in the classroom however I want. If anything else, it’s because other professors need to be able to conduct their own classes there as well. So the process starts in August (actually in September, nothing happens in August in Spain) with collecting the requirements for my class. Then system administrators install it and in October I can test the setup that I’ll use for my classes in December and March. Slow, but simple.

Then someone comes in November and adjusts “one small thing”. Of course, something breaks, they fix it by reinstalling stuff, but only at the computers they touched. Come December, half of my class is running different React Native versions. And then there are students who come with their own laptops running Windows, or Linux. „I already have node installed”, they say naively. Oh, if it were that simple…

Bottom line is that React Native setup is tedious, annoying, and error-prone. Definitely something you don’t want to go through by yourself when you’re just starting out. It needs either supervision of somebody who did that before, or the trained instincts of a developer who treaded such waters before and knows how to push through this drudgery.

This is you, drawing a UML diagram of a working React Native installation.

You need to learn the whole ecosystem

One of the big selling points of React Native is its possibility to write cross-platform code. So in order to both learn it and to be able to appreciate its possibilities you need to learn all of the following:

• Android development environment (to test and release your app on one platform)
• iOS development environment (to test and release you app on the other platform)
• React ecosystem (a lot of the learning materials and documentation assume knowledge of the original React ecosystem)
• Functional Reactive Programming (without learning why we use declarative components, you won’t be able to structure your application in a maintainable way)
• Actual React Native specific concepts

So, in order to write a Hello World application and to be able to judge whether this technology is something that will be useful to you, you need to at least brief familiarity with all of the above.

There isn’t really a way around it.

Solutions?

Avoid JavaScript

The first thing that came to my mind was to try to teach React Native separate from JavaScript altogether. There are some pretty good workflows and tools available using ClojureScript and they offer many advantages: simpler syntax, avoidance of JSX, no need to use special libraries to achieve immutability.

However, the main limitation would be the amount of available resources. You’d probably need to prepare a lot of those on your own to avoid explaining to students the awkward relationship with JavaScript.

Use a bootstrapping framework

Another solution to limit the amount of concepts that you have to introduce in the beginning is to use a bootstrapping framework, like Ignite. The benefit here would be that students start with an already working application that they extend to add the functionality that they need. Redux is much easier to understand when you have a usage example provided inside your own application.

Another benefit would be that it comes with a set of eslint rules that help you find your way through the quirks and traps of JavaScript syntax without running into undefined is not a method errors.

Parting thoughts

If, after reading all of the above, you still want to learn React Native, I’ll be doing teaching a course in Berlin in April. Feel free to send Brains & Beards an email to get to know more about the details.