Learning React Native when you’ve just learned React

My original goal was not learning React Native. I was just hoping to get better at JavaScript, and React seemed like a good way to do it. Then our mobile team was shorthanded, and when I looked at one of their React Native Github repos, it looked familiar enough to jump in and try to help out.

One year later, and I would say 60 percent of my time is spent building React Native apps.

It’s definitely been a learning curve, but thanks to the way Facebook structured React and React Native, it’s possible to get started with little more than an understanding of HTML. Pretty quickly you’ll build up your JavaScript skills, and then you can go deeper into React and React Native production. It’s been extremely gratifying to see how fast I could not just pick it up, but actually make meaningful contributions to the way we build apps with React Native.

If you’re thinking of expanding your JavaScript skills, I highly recommend you learn Facebook’s React. Not only is it basically tailor-made to be easy for frontend devs to understand, it also makes it so much easier to learn React Native, allowing you to move easily between web and mobile development. Here’s how I got started, and what I’ve learned.

Wanting to learn JavaScript, and deciding to learn React JS

Frontend developer may be a weird term that’s ballooned to encompass all kinds of different skills, but I was a frontend developer in the classic sense — mostly doing HTML and CSS work. I had spent a little time on a Backbone project, but my JavaScript experience was pretty lightweight. A couple years ago, I decided I wanted to learn more JavaScript, just to buoy my own skills and be able to do more fancy UI work.

“It’s surreal, and pretty cool, to be able to call myself a mobile dev now — I always thought that would be too big of an undertaking.”

At the time, React had really bubbled to the top of JavaScript frameworks. The ecosystem had grown fast, there were a lot of Facebook React tutorials, components and other resources available. We were just starting a test run building in React Native for Android. It seemed like a logical place to start.

One of our developers, Ben Linton, helped me get started with React initially, just letting me look over his shoulder. I jumped in on the stuff I knew and understood. React uses JSX, which renders as HTML when the page is compiled. It’s not exactly like HTML, but it is close enough that I could work in it without much training. Over time, I started learning the JavaScript functionality, and began tackling whole projects, not just parts.

Getting started with React Native by finding the similarities to React

We didn’t jump on the React Native bandwagon right away. The mobile team sat on the sidelines and poked around and, once it seemed stable, decided to dig in and do it right. Today, pretty much our whole mobile team works in a React Native stack.

I only got involved with learning React Native because I was sitting in a staffing meeting and heard the mobile team was swamped. I peeked at the source code for a React Native project our team was working on in GitHub, and it looked super familiar, enough that I could make sense of it. I raised my hand and said I could help out, I just needed some room to learn the nuances.

The core of React is effectively the same, whether it’s the original web version of React Native. Someone who understands one can look at the other, and it will look completely familiar. The core functionality that attracted people to the framework is still there.

The other upside is that they both work in a very Lego block-like fashion. Both React and React Native rely on the idea of building components and stacking them up into a complete product. React Native comes with lots of ready-made components to complement the custom ones you build. And the community has added even more functionality by building open-source components that fill in a lot of the gaps the built-in set of React Native components had. Now if you need a video component or a media player, you can generally find a module that you can plugin. You may have to tweak the code a bit, but in theory, you shouldn’t have to. And as the ecosystem advances and offers more tools, the odds of finding something great that works right out of the box are increasing.

That benefits both seasoned mobile devs and rookies like me. From my perspective, it makes me a lot more effective than I could be otherwise. And from the perspective of our mobile devs like Ed and Quinn, it’s still possible to build something native when you need to. Much like React, whatever your comfort level, you can still have a positive impact on React Native projects.

The best part is that React Native examples are so close to React examples, you can get better at both by working in one. So whether I’m staffed on mobile or web projects, I’m learning broader React skills.

Learning React Native’s differences, and how to handle them

This is not to say that it’s all exactly the same. The biggest difference between React versions is adapting to a native world. Facebook has tried to make building with React Native web-like, but it’s not all the way there. Take JSX. Writing JSX feels a lot like writing HTML. And on a web project, it basically is. You leverage all those common DOM elements like divs, sections, h2s, etc. But on mobile, there’s no concept of HTML, so the JSX in React Native is a bit different. You need to learn a new set of tags that more closely match up with mobile apps. It’s not a drastic difference, but it is a difference.

Similarly, styling in React Native is also a bit different. Instead of a CSS file, you make style objects. If you have a background in CSS, you can usually shake out what’s going on really quickly, but it will take a little effort to get used to the changes.

Some other transitions from web to native are pretty painless. The underpinning logic is the same, even when it looks different. One major bonus is that React Native uses Flexbox for its layout model — which I’ve been using on the web for years. That was one of the places where I could not just help out, but level up our mobile team.

Then there’s just the basics of mobile functionality. A ScrollView isn’t a thing on web, for example. Native functionality can actually make this easier sometimes. For instance, if you want a switch component, React Native is going to give you an iOS or Android picker. You’re not designing something yourself. Still, you have to think about how those things work, and what they mean in the context of the rest of your app. React Native does a pretty freaking good job of answering those questions for you, but it’s not 100 percent.

Starting to see the full potential of the React framework

It’s surreal, and pretty cool, to be able to call myself a mobile dev now — I always thought that would be too big of an undertaking. But learning React ended up being kind of a two-fer. I leveled up my JavaScript, and it made learning React Native relatively painless. The kinds of projects I can work on have just vastly expanded now.

I’ve also been shocked by the amount of interesting stuff I was able to bring to the table. I thought teaching me React Native was going to be a totally one-way effort from our mobile team. Instead, I’ve been able to help them understand things like Flexbox much better. I’ve also been able to bring over some of the lessons we’ve learned as a frontend team about writing CSS and HTML. We’ve worked really hard to develop a system for creating crazy-clean code. Those ideas are totally new to the mobile team. It’s been an interesting partnership.

I still need people like Ed and Quinn to help me troubleshoot the random, weird errors that pop up. I know there’s a bunch of magic happening behind the scenes, and I only understand a little bit of it. That said, I’m able to do so, so much more than I ever thought I would. Out-of-the-box functionality, combined with a little help from a third-party service or two, can get you 70 to 90 percent of the way to a product launch without needing hardcore mobile dev experience. The real sweet spot is having those people around to support you, like I do. I’ve been able to learn so much from them.

We already have other frontend devs starting to learn React and React Native, first by helping out with styling, then by expanding into whole projects like I did. It’s really almost a bridge between frontend HTML and CSS work, and working with the frameworks and languages a lot of people would associate with being a developer.

For Table XI as a software development company, React Native opens up so many options. We can deliver cross-platform apps for our clients, saving them time and money. Our people can go back and forth from mobile to web, giving us a ton of freedom in staffing. And there’s no downside to this particular context switching. When people move between React and React Native, they learn new techniques and improve both sides of the equation.