Documentation

Table of Contents

• General
  • CLI Commands
  • Introduction
  • Tool Configuration
  • Server Configurations
  • Deployment (currently Heroku and AWS S3 specific)
  • Debugging
  • FAQ
  • Gotchas
  • Remove
  • Extracting components
• Testing
  • Unit Testing
  • Component Testing
  • Remote Testing
• Styling (CSS)
  • Next Generation CSS
  • CSS Support
  • styled-components
  • Stylesheet
  • CSS Modules
  • Sass
  • LESS
• JS
  • Redux
  • Immer
  • reselect
  • redux-saga
  • i18n
  • navigating
• Maintenance
  • Dependency Update
• Forks

Overview

Quickstart

First, we need to make sure that the development environment is properly configured. When we look at the official documentation, we come across 2 different configurations. We will use the React Native CLI-related configuration in this project and we have not mentioned anything related to the Expo CLI here.

Setting up the development environment

After making your IOS and Android configuration according to your operating system with the steps described in the React Native CLI tab at the bottom of this page, you can continue with the steps below to start the application.

1. Let's kick the tyres by launching the sample Repospective app bundled with this project to demo some of its best features:

   npm run setup

   For IOS:

   npx pod-install # to install pod dependencies

   npm run ios # to run the iOS application

   For Android:

   # Make sure the ANDROID_HOME environment variable is configured properly

   npm run android # to run the Android application

   Start the server:

   npm start

2. Navigate to your emulator (IOS/Android) to see it in action.

   • Add a Github username to see Redux and Redux Sagas in action: effortless
   • Press buttons to navigate between screens
   • Choose a language to see the i18n feature in the whole application async state updates and side effects are now yours :)

3. Time to build your own app: run

   npm run clean

   ...and use the built-in generators to start your first feature.

Building & Deploying (⚠️ Work in progress)

1. Run npm run build, which will compile all the necessary files to the build folder.

2. Upload the contents of the build folder to your web server's root folder.

Structure

The app/ directory contains your entire application code, including CSS, JavaScript and tests.

The rest of the folders and files only exist to make your life easier, and should not need to be touched.

(If they do have to be changed, please submit an issue!)

CSS (⚠️ Work in progress)

Using tagged template literals (a recent addition to JavaScript) and the power of CSS, styled-components allows you to write actual CSS code to style your components. It also removes the mapping between components and styles – using components as a low-level styling construct could not be easier!

See the CSS documentation for more information.

JS (⚠️ Work in progress)

We bundle all your clientside scripts and chunk them into several files using code splitting where possible. We then automatically optimize your code when building for production so you don't have to worry about that.

See the JS documentation for more information about the JavaScript side of things.

Testing (⚠️ Work in progress)

For a thorough explanation of the testing procedure, see the testing documentation!

Unit testing (⚠️ Work in progress)

Unit tests live in test/ directories right next to the components being tested and are run with npm run test.