What we wish we knew about React Native before building HotPlate
This post is a very (VERY) short version of the crazy and amazing adventure the tech team took on. Through this journey, I reflect back on some of the things we wish we knew about React Native before building our app.
Okay so we’re doing this. We’re building a RN app. Where do we start? What are things I should know?
The React Native community will be your best friend
First thing I wish I knew when I was going into this: React Native has such a big community out there, everyone is using it! I mean, everyone. A quick Google search will provide you with countless articles and tutorials on how to work with RN. This documentation will be your best friend when going into React Native, which takes me to my second point: understand it before you build it.
Take some time to understand the nuances
RN is great–it builds up on itself and your code is reusable. Personally, I didn’t take the time to truly understand how the HotPlate app should be structured. States and props existed in my head, but they were not well defined and definitely not efficiently used in HotPlate’s first lines of code. It wasn’t clear to me that components should be constantly used so that you don’t have to write extra code. After weeks of coding HotPlate, it all made sense. I finally understood that RN exists for you to write as little code as possible, and that all the props, states and components were there for me to use.
There are libraries for everything!
Aside from the app’s structure, one of the things that make RN so great is how many things you can integrate in your app. From Facebook integration to Icons, there are packages for everything. These libraries can help you build things faster and easier, except for when they break and your whole project just crumbles to the ground. Hot tip: --save your packages when you npm install them. This adds them to the package-lock.json so that when you install another one they don’t get deleted and your project doesn’t break. In the past six months the HotPlate app has broken down and crashed due to these packages more than a thousand times. Hours of my life could have been saved, if I had known about saving when you npm install sooner.
Now that we’ve established what packages are and how to use them without breaking everything, I’m going to tell you about my favorite package. If you’re familiar with Redux you’ll probably agree with me that it’s the most useful thing in RN development. Redux is a data management tool that allows you to transport data within the app. Think of it as a store, you get the data and leave it there. Then, when you need it you call the store and they send it to you. It’s like a delivery service for data. Redux is probably the first thing you should download and set up when you’re working on a RN project. I didn’t install it until six weeks in the development process when someone asked me how I was managing my data. Guess who had to go back and change all of the files to setup Redux?
RN isn’t perfect, it’s still new and is constantly changing. Your app needs to change with it. Yet, it’s easy, simple, and in my opinion, the future. I’m no expert and there are countless things I need to learn about RN, app development, and CS in general, but if I learned it, you can too!
After six months, 100K lines of code, more broken projects that I want to admit to, and a lot of laughter and tears, HotPlate is on both the App Store and Google Play. If you had told me I would be this invested in this startup, this app, or this team of people I would have never believed you. But here we are, celebrating a year of HotPlate and ready to bring more users, more features, and most importantly, more enjoyable dining experiences.