React Native Starter Introduction

Saroj Subedi
2 min readDec 25, 2019

--

Photo by Jon Tyson on Unsplash

React Native is like React, but it uses native components instead of web components as building blocks. If you already know React, you still need to learn some React-Native-specific stuff, like the native components.

Create A New Project

There is basically two ways(cli) for Bootstrapping a react native app .

Expo Cli QuickStart

  • npm install -g expo-cli
  • expo init NewProject

React Native CLI Quickstart

  • brew install node
  • brew install watchman
  • npm i react-native-cli
  • npm react-native init NewProject

If you want to know difference between these two cli . Check this.

State Management

Next thing we need to consider is what kind of state management library do we want to use for React Native. Its same like for React. I personally prefer MobX libary or React Context. There is also Redux- most famous state management library. For more check this link.

Project File Structure

In React Native, we can organize the project however we want. It depends on person to person. I organize my file structure based on functionality and code reusability.

File Structure
  • components : To achieve maximum code reuse and minimum state management. We can create functional components inside this directory. And can be call and use all overall the project.
  • config: All the settings and constants which we need in app can be define inside this folder.
  • screens: Views/Screens — Main Routing Pages can be define inside this folder.
  • states: Code related to state management can be include this folder.
  • services: Codes which connect the state actions and api can be written inside this folder files.

Navigation Libaries:

There are a-lot of React Native Navigation Libraries. Personally I prefer React Navigation.

Others:

— — — — — — — — — — — — — — — — — — — — — — — — — — — — — —

If you want more awesomeness , then go to this link.

--

--