Learning React Native when you’ve just learned React
One year later, and I would say 60 percent of my time is spent building React Native apps.
“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.”
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.
Want all the best React Native tools in one stack? Download your free copy of our own mobile development stack.
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
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.
Published by TXI in coding|React Native