After a few years working full time as a Ruby on Rails developer I was given the opportunity to be part of a team to build a React Native app.
As it was my first time dealing with React Native, I had to learn a lot during the process. In particular, there are five things I know now that I wish I’d known at the very beginning. Let me share them with you in case they could help you in starting your React Native journey.
1. Reading docs is great until it’s not
You’ll see in many places that what you need to know in advance is React, HTML, CSS and Javascript. I’d say yes and no to that statement. Yes, the more you know in those areas the better. No, you don’t need to master each of them before starting.
If you try to learn a million things you could get lost and never start building the app you had in mind. That’s why I’d recommend making yourself comfortable with the official docs, going through the Getting Started guide and starting your app right after that. Even if you don’t fully understand everything in that guide.
The sooner you start practising, the better. I’m sure you’ll advance by coming across many challenges that will teach you React Native inside out.
Concepts you definitely need to understand beforehand:
-
What is a React component?
-
How to install packages (libraries that will help you build your project) with npm or yarn.
-
Basic front-end knowledge.
Concepts you’re most likely to need at the beginning:
-
Styling. I was working with an amazing front-end dev who tackled this for me, but if you want to make your app look good you need to invest some time learning to style it.
-
How to write tests (more below).
2. Sync all your tools’ versions with your team
Xcode, Android Studio, even the OS version if you are developing with Macs, should be the same for the entire team. This will prevent conflicts along the process.
3. Choose your testing strategy wisely
To ensure a high-quality app you need to have a test strategy. There are two major end-to-end testing platforms, Apium and Detox. If you want to know more about the differences between them you could read this post.
If you prefer unit testing, Jest is the preferred tool for it. We paired this with React Native Testing Library for rendering our components.
We ran into timeout issues when we were running Detox tests on our CI (Travis), so we only ended up running our end-to-end tests locally when releasing a build and we kept Jest Snapshots for unit testing on Travis.
These are some advantages and disadvantages for both types of testing:
Detox for end-to-end tests:
➕ It will allow you to get the app covered with scenario tests for user journeys. This is a great way to know the functionality remains the same while adding new features.
➕ Setup is fairly simple.
➖ With numerous test scenarios, the suite can end up taking a very long time to run. A solution would be to write longer scenarios covering several journeys.
Jest for unit testing:
➕ Extremely flexible and well-documented, with a vast support network.
➕ Snapshots are an excellent and speedy tool for ensuring a component does not change unexpectedly.
➕ The test suite runs quickly.
➖ The added complexity in tests can take time to accommodate, for example, when you need to mock out other dependencies.
4. Use console.log endlessly
Help yourself by logging as much as you can. It could help you a lot to be sure you understand the way a page is rendered, how many times you visit a certain point of the code, when a function is triggered, what the value of a variable or the state at a given point is, etc.
5. Be ready to adapt to changes
As new versions are released some updates might be required. Also, you’ll find many relatively old posts where the syntax is not the latest one (which is the one you should be using). Just be aware of that and update your app periodically to prevent complicated upgrades in the future.
Top tip:
Surround yourself with experts to boost your knowledge. I cannot highlight enough how much it helped me to see developers writing code or to do code reviews (thank you to Andy W and Dave Q). Don’t be afraid to pull the work from other devs and play with it. Trying to change things or to break them could help you get a better understanding of the code flow.
Finally, if you are switching from Ruby on Rails to React Native as I did, prepare yourself for a different way of thinking. Embrace the differences at the beginning and you’ll enjoy them at the end. 😃
Previously from our Engineering Team:
How Ruby if statements can help you write better code by Dave Cocks
How do you solve a problem like caching in Progressive Web Apps? by Dave Quilter
Rails 6: Seeing Action Text in... action by Stephen Giles
A Quick Comment on Git Stash by Karen Fielding
Avoiding N+1 queries in Rails GraphQL APIs by Andy West
