React Native Tools
Before starting our React Native project, we should know what kind of tools are necessary for us. There is plenty of them and some are required, for smooth development, while others are optional. Let’s see what we will need, and what might help us when we start our first (or next) React Native project.
Google Chrome
“Why do I need Chrome for native mobile app development?!” you might ask. React Native has a built-in a possibility to connect to Chrome Dev Tools, and we can debug our project just like another web application. It doesn’t matter where you ran your app, whether it’s on some simulator or an actual device. It just works!
Node.js and npm
Node.js is a server-side JavaScript environment that a lot of React Native tools are written with. Even React Native itself requires to having it installed. Other than that, we will use Node’s package manager, npm, to install some other libraries.
Watchman
Watchman is an open source tool created by Facebook. It is extremely useful because it can detect when your code changes and then automatically build and push the update to your simulator. It means that you won’t have to refresh your code manually all the time! In my opinion, it is one of the biggest features and most useful tools in React Native platform. Now, when I write native apps in pure Java I can’t get used waiting more than one minute for my code to refresh! Speed is the key to a smooth workflow.
Xcode
Xcode is a basic tool for iOS developers. We, React Native developers, usually use Xcode just to launch a mobile app in the iOS Simulator. Is that all it’s useful for? Hmm… not really 😉 After developing with React Native for some time, I can say that good knowledge of Xcode is very useful because when you start to make complete application with more native libraries e.g. integration with Facebook, Google and others, knowing Xcode is necessary because the main part of the configuration will require you to change settings in the iOS Xcode project. It can save you a fair amount of time.
Android Studio
Android Studio is a tool for native Android developers. Theoretically, it’s optional because you can download Android SDK, and some simulator like Genymotion, to create and test your application. But the devil is in the details. I had the same case with Android Studio as I had with Xcode. When I started to build an app with native libraries I had to go in and change a lot of settings in the project configuration, and Android Studio helps you a ton with that. I really recommend using it.
Genymotion
As I said before Genymotion is optional because you can use Android simulator that comes installed with your SDK. Genymotion also allows you to emulate many popular Android devices and now I see that it’s the most popular choice, among React Native developers.
Expo
Expo has two main pieces: XDE and the Expo client. XDE is a developer tool for creating projects, viewing logs, quickly previewing apps on your device, publishing and many others. The Expo client lets you open your projects on your phone while you’re working on them, which allows you to completely forget about Android Studio or Xcode. If you publish your app using XDE, people can access it at any time through the Expo client.
Flow and TypeScript
Flow and TypeScript are entirely optional. Flow is open source tool created by Facebook. It’s used to add type annotations to our JavaScript code. Flow has very similar syntax for declarations files and types annotations like TypeScript, created by Microsoft. If you previously worked more with Angular2+ than React.js, you might favor TypeScript because it’s the dominant language used in the Angular community. Flow, on the other hand, is more popular among React.js programmers, so now it’s a default option for React Native developers.
React Native CLI
The React Native CLI is a small Node application that offers a simple init command used to create new React Native applications. Using React Native CLI you can create a standard React Native app with all the necessary files and dependencies needed to build an app for iOS and Android and you can open your native projects with Xcode or Android Studio.
Atom and Nuclide vs Visual Studio Code
Facebook has created a package for Atom known as Nuclide that provides „a first-class development environment for React Native”. It features a built-in debugger similar to Chrome’s DevTools, a React Native Inspector, and support for the static type checker (Flow). To be honest I have never used Nuclide, because…I hate Atom 😉 Atom is too slow for me and when I saw Visual Studio Code…I loved it! I discovered a lot of extensions for React Native like React Native Tools, Flow Language Support, ESLint, Prettier and Babel JavaScript which are fundamental to effective work for me.
Tap the 👏 button if you found this article useful!
About us
Applantic is a team of passionated software developers. We write our stories on Medium ✍ but you can find us on Instagram 📷 or Facebook ✍ & 📷 as well.
The author of this article is Krzysztof. Programmer with a five-year track record of building IT solutions for various sectors, passionate about new technologies and mobile app enthusiast. Last 3 years related to the Middle East and works in a multicultural environment.
