React Native: Getting Started - p-patel/software-engineer-knowledge-base GitHub Wiki

https://app.pluralsight.com/library/courses/react-native-getting-started/

Course Overview

  • Setting up your environment
  • Running and debugging and app
  • Using and styling components (inc. finding and selecting components from the React docs)

Introduction

React Native Overview

  • A JavaScript framework, built on top of React.js
  • Produces native mobile apps
  • Developer workflow familar to React.js developers
  • Target iOS and Android with the same code (if you are careful!)
  • Dynamic apps - update apps in a matter of seconds to prod!
  • Hybrid app - combine native components and apps with React Native
  • Significant overlap with the React.js community
  • Use NPM packages in your app! (some are specifically for React Native)

What You Will Build in This Course

  • An event countdown app
  • List events countdowns
  • Adding an event will use an event name text input and event date/time picker
  • Uses an existing HTTP REST service

React Native Alternatives

  • Native apps: iOS: Swift or Obj-C; Android: Java or Kotlin
  • Ionic - Wraps HTML in a native shell; 'Uncanny Valley Effect' (feels too 'webby')
  • Xamarin - similar to React Native; compile from C# to device-specific runtime compatible executable
  • PureScript - exact model as React Native; use Angular or Vue.js (compare project stars on GitHub!)
  • Flutter - backed by Google, mobile app specific, uses Dart language (similar to ES6/TypeScript)

An Overview of How React Native Works

  • build app using JSX components
  • build process
    • The React Native packager (a terminal process) monitors the project for file changes
    • changes compiled into a plain JavaScript package using Webpack
    • app is installed in simulator or actual device
    • app talks to React Native packager which notifies it that there a new bundle to download and run. React Native code downloads the new bundle and loads it into the JS engine (JavaScriptCore) where it is executed
    • JavaScriptCore loads up your component, calls render and builds up a tree of components.
    • Using a bridge this talks to the native app which programmatically lays out a view using native components (iOS or Android)

Prequisites for This Course

Summary

  • Actual native views
  • Out of the box development environment
  • Can be used in conjuction with native components
  • Bypass app stores with dynamic updates

Configuring Your Environment

Overview

Running Your App on Your Device

  • Install 'Expo Client' app on device, signup and signin
  • Use QR code or send app link to the device
  • Navigates to the dev app on the device
  • Live Reload - changes will be automatically updated on the device!

Connecting to Your App with Developer Tools

  • Shake the device to display the Expo main menu
  • 'Debug Remote JS' to debug the app on dev machine

Dealing with Errors and Warnings

  • Red error page on device: displays detailed error messages
  • Tap on warnings on device for more information

Summary

  • Check ReactNative.js docs for using a simlulator instead of an iOS device. Also see GenyMotion emulator for Android
  • Use create-react-navtive-app Node.js to create app
  • Use Expo app on physical device. Provides dev tools

Creating Your First React Native Component

Getting Your First Component to Render

  • A list based component, styling components, layout of components with Flexbox
  • Create a simple EventList component that contains a Text component

Binding to a List

  • import React Native components from react-native module