The last couple of days have been quite the journey as I spent them more or less teaching myself the foundations of React Native. React, but for building applications.
As someone who is young in the ways of Software Engineering I went into this thinking that React Native was going to be just another Node package that plays off of React, like react-router or react-router-dom. Though it is similar in that regard React Native is its own beast to be conquered.
Needing to have some idea of what I was getting myself into the first thing I did was dive deep into the documentation. I was immediately happy as I found that React Native’s documentation is very well written which is to be expected from the people at Facebook. The documentation is also interactive which is great as you don’t have to navigate to another service to see exactly how everything works. Before long I noticed that Native doesn’t seem to use regular HTML tags in its JSX. “How Odd” I thought as I continued to scroll. I quickly became more interested as I learned that Native uses its own built in components that act on behalf of the JSX tags. Instead of a <div> or a <span> you’re now using a <View> and instead of just putting text anywhere you want, you’re now required to use a <Text> component. RIP <p> tag.
The next thing I noticed shook me to the core. “Oh no” I thought as I spotted that something called StyleSheet was also being imported from react-native. I’ve always had trouble with CSS and flex box and definitely didn’t want to be discouraged by another disaster with them. When my CSS war flashback had ended I continued on. No StyleSheet was going to stop me from learning app development.
Tutorial Videos and Expo CLI
Feeling like I had a good idea of how React Native is applied I decided that it was time to move on to some tutorial videos. After all I’ve always found that I learn better/faster watching things applied and then applying them myself. Monkey see, monkey do, if you will.
I started with an intricate YouTube search.
It’s here, in the realm of complexity, that I found countless demo videos of engineers using React Native. And it’s here where I would learn about the Expo CLI.
Expo CLI is almost necessity if not just a really great tool when it comes to building apps using React Native. It handles just about everything in regard to the app development process. It’s through the Expo CLI that you create projects and publish them. Expo is also the service that you’ll be running your simulator through. Think localhost:3000 only on the face of a mobile device. A really cool thing about Expo is their client application that can be downloaded from any app store. It’s there that you can show your app off in its development phase.
After watching about four hours of tutorials I decided that it was now time to put my new found knowledge to use and create my own application. I would spend the next few days experimenting with native and building something really fun.
- I joked earlier that I was discouraged by the sight of the StyleSheet component. I’m happy to tell you that through the process of learning React Native I’ve become much better with it. Practice makes perfect.
- Have a strong understanding of React fundamentals before looking into building anything with React Native. You need to be comfortable with the idea of components, props and state.
- Debugging throughout the process is pretty straight forward. After running Expo in your terminal you’ll have access to all errors and console logs. Expo also has its own developer tools that open in the browser. The simulator itself also has dev tools. (command + d on mac).
- Almost every device you can think of can use React Native.
- Console.log like you never console.logged before.
- Documentation is really good. Use it.
Love at First Sight
Though my blog is titled “My Short Time with React Native” this is only the beginning. I can firmly say that I’m hooked. Such an awesome and easy to use framework. It’s easy to see why so many companies have decided to use it.