As I’ve been building websites, I’ve also been realizing that a lot of my ideas for original sites would actually be better as mobile apps. React Native, I’ve heard, is close enough to React that I should be able to cobble together some straightforward apps. So that’s what I’m going to do…
Over the past couple days, I watched the first two videos of Harvard’s CS50 Mobile App Development series on edX.
What an idiotic waste of time.
After sinking those three hours into those videos, I stuck a Post-it Note on the wall just above my laptop screen that reads: No more videos! Build! So I got started…
And immediately overwhelmed myself. I decided to search for some reusable components first to see which existing libraries could help me jump out of the gate. Before I knew it, I had 10 tabs open to different articles suggesting various repositories for pre-made components of uncertain quality. Calm down, killer. Start from the beginning.
At the very start of the React Native docs, it says, “Expo is the easiest way to start building a new React Native application.” Cue my 10-minute search to learn what the hell Expo is, and if there are any alternatives that I may be more familiar with. There aren’t, really, so I eventually decided to just go with it.
I installed Expo from my Terminal, started a new project, opened up the App.js file in Atom… and saw a bunch of code that I don’t understand! Cool, cool, cool…
I try to run the code anyway on a local host, and get a bunch of errors about a simulator not being installed. It tells me I’ll need to download Xcode. I do, but hope I’m not limited to it. I’d like to keep writing in Atom.
After more errors, downloads and licensing agreements, I finally got an iPhone simulator on my screen. I clicked “settings” to see if even the on-screen apps were simulated (they are), but I don’t have an iPhone X (the model used in the on-screen demo), and without a Home button, I couldn’t figure out how to get back!
I played around with it for a bit, and came to a screen on the phone that said, “Get started by opening screens/HomeScreen.js” and change the text. I did that in Atom, and with hot reloading, the text was changed by the time I got back to it.
Finally. Time to build.