This is an intro to building mobile apps in ReactNative. It covers state management in Mobx, code styling and linting tools (prettier, eslint, and arirbnb style guide), and testing the app via jest and enzyme.
In this series, we’ll build a real-world mobile application in ReactNative, and also explore some of the development practices and libraries, including directory structure, state management (in Mobx), code styling and linting tools (Prettier, ESLint, and Arirbnb style guide), user interface in React Native Elements, and an important, but often ignored part - unit-testing your application (via Jest and Enzyme).
React and ReactNative have made the building Single Page Applications and Mobile Applications fun and easy, but they only cover the view of the applications. State Management and UI design could still be a painful part of building the app. There are several popular State Management libraries available for React. I’ve used Redux, Mobx, and RxJS, and while all three of them are good in their own ways, I’ve enjoyed MobX the most because of its simplicity, elegance and powerful state management.
Redux, based primarily on the concepts of functional programming and pure functions, tries to solve the complexity of state management by imposing some restrictions on when updates are possible. These restrictions are reflected in three basic principles: a single source of truth, read-only state, and pure functions. You can read more about these principles in Redux documentation. While I’m a fan of functional programming, I’ve experienced that you have to deal with a lot of unnecessary boilerplate code when working with Redux. You have to write code for dispatching actions and transforming state yourself in Redux. Mobx, on the other hand, does this job for you, making it easier to maintain and fun to work with. You need the right amount of code and restrictions in MobX to achieve a superior state management and a good developer experience. In Redux, you also have to spend a substantial amount of time in normalizing and de-normalizing your data. In MobX, you don’t need to normalize the data, and MobX automatically tracks the relations between state and derivations. We’ll go into this later.
The application we’re building is for a Book Store. It will mainly consist of two simple views, Books View and Authors View. The app will contain a navigation drawer with two menu options, allowing the user to switch between the two views. The first option would be for navigating to the Books View, and the other option would be for the Authors View. The Books View will contain the list of books, while the Authors View will containing the list of authors. The Book View will further contain tab navigation allowing the user to switch between Fiction and Non-Fiction books.
We’ll be installing everything on a Mac OS. Most of the commands will be the same when you have node installed, but if you face any issues, let me know, or just google it.
There are five parts in this series. We’ll cover different topics and libraries necessary to create and test a full blown React Native application:
create-react-native-app, and use it to bootstrap our Book Store application.
Here’s a demo of the Bookstore app we’re going to build:
There are a few things we won’t cover in this series, which you may want to consider in your project:
Before we continue to the first part of this series, we’ll initialize our ReactNative app using CRNA CLI. So let’s get started!
Assuming that you have Node already installed, , we need to install
create-react-native-app globally, so that we can initialize a new React Native project for our Book Store.
npm install -g create-react-native-app
Now, we can use the create-react-native-app CLI to create our new React Native project. Let’s name it
Once CRNA is done bootstrapping our React Native application, it will show the helpful commands. Let’s change directory to the newly created CRNA app, and start it.
cd bookstore-app npm start
This will start the packager, giving the option to launch the iOS or Android simulator, or open the app on a real device.
When the app is started via
npm start, a QR code will be displayed in your terminal. The easiest way to look at our bootstrapped app is using the Expo app. To do that:
To run the app on iOS Simulator, you’ll need to install Xcode. To run the app on an Android Virtual Device, you need to setup the Android development environment. Look at the react-native getting started guide for for both the setups.