Tales of a React Native Beginner: After a Year Of Learning

Hi there! You may or may not have heard about React Native. Maybe you’ve been using it for 2 weeks? 2 months? A year? Whatever your level of experience is: I wrote this just for you!

OK Charles, can we get some context please ?

Then let me paint a quick picture of what my background is. I’m a 3rd year student at HETIC in Paris, France. I wrote my first lines of code in React Native in mid 2015 ~early 2016. At that time, my level of JavaScript wasn’t that good… somewhere between 0.5 and 0.7… on a scale of 10… So in other words:

I really (really really) started from the bottom…

But I knew that I wanted to create mobile apps, and this was a very interesting way to start. So I gave it a try and wrote my 1st React Native app which -against all expectations- was working (but the code was just… oh my god…). Fun fact: React Native was hot off the press at that time!

{
  "name": "MinionsGo",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node_modules/react-native/packager/packager.sh"
  },
  "dependencies": {
    "react-native": "^0.5.0"
  }
}

I presented it as part of a class project during my 1st year at HETIC in front of my whole promotion, and my classmates were pretty impressed by the result. I didn’t understand all the code I’d written but I was so excited: it was functional! From this point, I fell in love with React Native, but something became glaringly obvious:

I needed to learn JavaScript before learning React

Should you only take one thing from this article, let it be this: learn how to write beautiful JavaScript code before learning React. Things will be a lot easier because you will understand what you’re writing a lot better, and you will be able to improve your work more effectively.

But even before that I had to master the basics in HTML and CSS. As I told you, I really started from the bottom, but even I realized that blazing through the steps wasn’t a good idea at all. That’s how -even before diving into the JavaScript ecosystem- I started spending hours on my computer every single night after school, learning a cool CSS3 Layout module named… Flexbox.

How can you know you made the right choice?

React Native was very promising, but I felt a disturbance in the force: how would I be able to know how disruptive it was if I didn’t have anything to compare it with? I had a bunch of options to solve this problem: Ionic/Cordova, NativeScript, Java, Swift… So let’s do it!

Ionic/Cordova

As the proverb says “Once you go React, you never go back”. It was therefore really complicated to enjoy the WebView experience offered by Ionic/Cordova so I couldn’t make it to the end…

NativeScript

I moved on to give NativeScript a try. They promise the same thing as React Native: “Use Angular, TypeScript or modern JavaScript to get truly native UI”. But I found it a little bit… less attractive…

Native Script sample-Groceries example

The percentage of code shared between iOS and Android was too low in my opinion, and some files were too XML-like for me. However, NativeScript allows to use of plain CSS which is really exciting for someone coming from a Front-End developing background. Things have probably changed since the last time I’ve used it, so give it a try!

Swift

I was very impressed so far so I raised the bar and wrote a little game in Swift. My goal here was to see how the native developer experience was. Swift was freshly open sourced at this time, and I preferred its syntax over Java’s so: why not! Let me tell you straight away:

For a young Front-End developer, the learning curve was off the charts!

import UIKit
class ViewController: UIViewController {
  @IBOutlet weak var slider: UISlider!
  @IBOutlet weak var targetLabel: UILabel!
  @IBOutlet weak var scoreLabel: UILabel!
  @IBOutlet weak var roundLabel: UILabel!
  
  ...
  
  func updateLabels(){
      targetLabel.text = String(targetValue)
      scoreLabel.text = String(score)
      roundLabel.text = String(round)
  }
override func viewDidLoad() {
    super.viewDidLoad()
    // Do any additional setup after loading the view, typically from a nib.
    startNewGame()
    updateLabels()
    
    let thumbImageNormal = UIImage(named: "SliderThumb-Normal")
    slider.setThumbImage(thumbImageNormal, forState: .Normal)
    
    let thumbImageHighlited = UIImage(named: "SliderThumb-Highlited")
    slider.setThumbImage(thumbImageHighlited, forState: .Highlighted)
let insets = UIEdgeInsets(top: 0, left: 14, bottom: 0, right: 14)
    
    if let trackLeftImage = UIImage(named: "SliderTrackLeft") {
        let trackLeftResizable = trackLeftImage.resizableImageWithCapInsets(insets)
        slider.setMinimumTrackImage(trackLeftResizable, forState: .Normal)
    }
    if let trackRightImage = UIImage(named: "SliderTrackRight") {
        let trackRightResizable = trackRightImage.resizableImageWithCapInsets(insets)
        slider.setMaximumTrackImage(trackRightResizable, forState: .Normal)
    }
...
}

“Bro, do you even understand what you just wrote (ಠ_ಠ)’ ?…”

But I have to admit that I had a ton of fun doing it. Swift felt a lot like JavaScript and Xcode proved to be a very helpful IDE (as long as you know where to click!). It was my first experience in Swift, my code was nowhere near perfect, but within a few days I was able to write a functional, albeit simple iOS app in Swift and that was pretty cool! If you’re interested, you can have a look at it right there.

CharlesMangwa/BullsEye

So how about your React Native experiences then?

From there I knew that React Native was the way to go for me. Throughout the past year, I worked on 5~6 different apps to see if React Native could suit the needs of real-world scenarios. And the answer is: oh yeah! Day after day I see more apps in production built with React Native! The most satisfying thing is that users can’t see any differences with a native app! Thus I came up with some feedback:

• A great architecture is the key to success. Sometimes your code could look too segmented, but being able to share a component by just copy/pasting a folder is pretty awesome. Obviously people do things differently, but splitting my code into several files and folders helped me keep my JavaScript files as short as possible. The main reason was debugging: it’s a lot harder to see where are your errors in a long and complex file…
• Cherish your editor, it will return the favor. As crazy as it may sound, I’ve realized that customizing my editor boosted my productivity. I went from Sublime Text to Atom for this reason in particular and I don’t regret my choice so far. The more comfortable you feel with your editor, the better for you!

😍

• Always, always challenge yourself! The best way to progress in my humble opinion, is to always consider that you can improve on your work. Nothing is perfect, our work isn’t either. Thinking like this will help you to improve your skills day after day, line after line. Keep an eye on the community, see how languages evolve, participate and build the framework you’re using, you’ll discover your very own best practices step by step.
  Check out this Airbnb JavaScript Guide for instance, you could find a bunch of interesting things:

airbnb/javascript

• Lint on fly ftw. ESLint is a JavaScript linter which will help you maintain your code homogeneous thanks to different rules you’ll set up. All you need to do is install the plugin in your editor and configure your rules in an .eslintrc file in the root of your project directory. The most interesting part is that you can also use rules written by other people.

// .eslintrc
{
...
  "extends": [
    "airbnb",
    "plugin:flowtype/recommended",
    "plugin:react/recommended"
  ],
  "plugins": [
    "babel",
    "react",
    "flowtype"
  ],
...
}

Now, Atom will display me an error if I don’t follow the rules set by Airbnb, Flow or React, and that’s very handy!

• “Flexbox all the things💥!” So basically that’s me freaking out when I realized that React Native uses Flexbox’s algorithm for their components layout. This brings us back to what I said a few lines earlier: master the basics first, you’ll be so proud of yourself in the future. Therefore building the UI I want appears so much easier.

• Have fun 🎉! This is the most important one, without a doubt. As long as you enjoy what you’re doing, stay curious and critical about your own work, you’ll learn from your mistakes and move forward.

This article is the result of learning JavaScript and React during 2016. My feedback may be very different from what you have or will experience, but I thought that sharing it could be helpful in some way. Thanks for taking the time to read my article, I hope you found it interesting.
Very special thanks to Eric Vlad Vicenti who gave me the motivation I needed to write this article, and Théo Kunetz for reviewing it!
If you have any question or feedback I’ll be waiting for you on Twitter 😄