Javascript is crossing the borders of operating systems for some while now. There are a lot of frameworks and libraries out there that allows you to write your app for about any platform you wish. You can pick react.js / angular / vue for web development, Ionic / Cordova / React Native for mobile development or Electron for desktop apps.

In this article however, we are going to concentrate on React native development for mobile applications that will run on Android and Ios. What I really like about React Native in comparison with other frameworks like Ionic or Cordova, React Native will render the UI using native components, while  hybrid apps renders using HTML and CSS via a Webview. This means the user experience and even app startup time will generally be closer to other native apps as they will follow the patterns imposed by the operating system. Still, React Native is not perfect, the ecosystem is pretty fragile and documentation is good but not abundant.

Prepparations and Installation

However, the point of this article is not compare it with other frameworks, but getting started with React Native, how to install it, how to get a boilerplate going and a bit of explanation of file structure and logic workflow. I will be using Windows and Android Studio to run my apps, so I will need to have installed Node.js, Python and Java JDK. You can check the requirements for all operating system in the Official Docs.

Once you got your environment set up, it's time to install the React Native command line interface:

npm install -g react-native-cli

After you got that installed, it's time to move over installing a boilerplate to get our app going. There are a lot of boilerplates out there and I've tried most of them, but there is one that I liked in particular because of the way it handles the overall workflow, folder structure, plugins and the overall bundle. 

This boilerplate is called Ignite and comes out of the box with most of the modules you would usually have to configure yourself:

- React Navigation

- React Redux, Redux Persist, Redux Saga, Redux Sauce

- Reactotron debugging, Tests

- API Sauce, Vector Icons,  Maps and much more plugins

Installing Ignite and creating an app is simple as running the commands below. When asked about additional plugins, select Yes to all, since they are usually used in every type of project. 

npm install -g ignite-cli
ignite new TestApp

Note* If running on windows, it's usually the best to run your Powershell instance as Administrator.

Now that you got yourself the app sekeleton up, it's time to open the root directory of theapp up into your favourite code editor. Once you did that, also open the TestApp/Androidfolder with Android Studio and create or start an emulator by clicking on the green "Play" button. This will build and launch the app on your emulator.

If you are getting a an error like: Unable to connect to development server / Unable to load script from assetsthen you need to launch the actual react native bundler / server, so inside the directory of your freshly created app, run the following commands

react-native run-android # Run android version
react-native run-ios # Run Ios version

Note* At the time I was writing the tutorial, there was an issue with the used react-navigation module which was throwing an error like: TypeError: undefined is not a function (evaluating 'addListener'). In order to fix that, I had to:

• Update the navigation version inside package.json to "react-navigation": "v1.0.0-beta.26",
• npm install --save react-navigation-redux-helpers
  
• Then update your  ReduxNavigation.js file with the following code  > https://pastebin.com/cAa3pByi.
• Run the dev server again

Now if everything went well, you should got your first React native app up and running!

Folder structure and data workflow

Now I am going to explain as simple as possible how this boilerplate is handling different files and functionalities you will need for most of the projects:

TestApp/

                android/  Location of the android app, here you must manual link libs sometimes, handle versioning, update gradle, etc

                App/

                        ComponentsHolds most of the times ""dumb components" and their styles

                        ConfigHolds  the configuration files, you can add your is AppConfig.js

                        ContainersHolds the pages containers or "smart components"

                        Fixtures

                        Images

                        Lib

                        NavigationHolds the navigation mapping and redux nav integration. You can add your routes inside AppNavigation.js

                        ReduxHolds reducers, types, actions and action creators. Once you create one, make sure to  include it in the index.js file that combines them all

                        SagasHere is where we usually connect our redux actions to handle API provided data or other logic. You will need one for each of your reducers.

                        Services

                        Themes

                        Transforms

                ignite/  Ignite examples

                Ios/   Location of the ios app, here you must manual link libs sometimes, app name, icon integrate cocoa pods

                Tests/  Tests location

This is about it for today's tutorial, hope it was helpful to get you started with React native and Javascript mobile apps. Stick together, as in the following tutorials we are going to start playing with the boilerplate, going trough some basic UI sketching and data workflow examples, Redux usage, API integrations and more!