Skip to content
academia.sh
tr
Log in

Course Intermediate

React Native

Published Updated

By the end of this course

Start course

01

Core Structure

React Native's working model, environment setup, core components, the style system and flexbox layout, touch and interaction, platform-specific code.

  1. 01 What Is React Native In a bridge-based framework, shared code does not draw the screen; it describes a view tree. The lesson classifies what an update does to each node of the tree with four fates: kept, updated, mounted, unmounted.
  2. 02 Environment Setup Environment setup prepares the toolchain needed for shared code to run on two platforms for the first time. The lesson measures that on first launch there is no previous tree and the whole tree is mounted.
  3. 03 Core Components The core components are view, text, image, and input field; each is a node in the view tree. The lesson measures what a type change does to the tree in the update where a placeholder text is replaced by an image.
  4. 04 The Style System A style is a prop that determines how a node looks, and it is compared in the tree like any other prop. The lesson measures that a new style object with the same content leaves the node kept, and that a single changed field leaves it updated.
  5. 05 Touch and Interaction A touch changes state, state changes a prop, and the prop leaves a node updated. The lesson measures that the pressed state updates only the button and that its siblings stay kept.
  6. 06 Platform-Specific Code The same screen can be described differently on two platforms. The lesson compares two platform trees, shows that a toggle switch present on only one platform comes out mounted, and states plainly that this is not a runtime update.

02

Application Layers

Navigation, local and shared state, networking and offline behavior, local and secure storage, notifications and deep linking, gestures and animations.

  1. 01 Navigation Navigation arranges an app's screens as a stack, tabs, or a drawer. The lesson measures the fate of view tree nodes when a new route is pushed and when the user goes back: the screen below stays kept.
  2. 02 State Management State management decides where the data that changes over time on a screen is kept: local to a single component or shared and read by many screens. The lesson measures how one state change updates the cart badge and leaves the product list kept.
  3. 03 Networking and Data The networking layer carries a request to the screen through loading, error, and data states; an offline cache changes the first state. The lesson measures that when data arrives, the loading indicator is unmounted and the list is mounted.
  4. 04 Local Storage Local storage keeps the data that must remain even when the app closes: a key-value store for small values, an embedded database for records that are queried. The lesson measures that a draft read from storage at launch is mounted in the tree, and that writing to storage does not change the tree.
  5. 05 Secure Storage Secret values such as a session token, a password, and a key do not sit in a plain store; they are written to the operating system's protected store. The lesson measures that when the session closes, the account subtree is unmounted, while deleting the token from the store does not show in the tree.
  6. 06 Notifications and Deep Linking Tapping a notification or opening a link starts the app at a specific screen. The lesson measures that in a running app a link builds a single screen on the stack, while in a closed app it builds the whole tree.
  7. 07 Gestures and Animations If a gesture's position is written to the tree as a prop, every frame produces an update command. If the gesture is driven on the native side, the tree is kept in the frames between. The lesson measures the two paths on the same gesture.

03

Performance and Production

Virtualized list settings, frame rate and profiling, bundle size and startup, debugging tools, testing, writing native modules, build and release.

  1. 01 List Performance Measures what happens to the row nodes when an item is added to the front of a list. With index matching, the contents of the rows shift; with a stable key, the same insertion yields a single mounted node.
  2. 02 Frame Rate and Profiling Measures that an update which produces the tree three times can give zero commands. A re-render and a command are told apart; memoization lowers the counter, not the command.
  3. 03 Bundle Size and Startup When a deferred screen is loaded, the placeholder is unmounted and the screen's node is mounted. The lesson measures that lazy loading changes the time of mounting, not the fate.
  4. 04 Debugging Tools An error boundary unmounts the broken subtree and mounts the fallback. The lesson measures that the same panel is updated when a prop changes, is unmounted when it throws, and loses its identity when unmounted.
  5. 05 Testing A test compares the update's expected list of records with the actual list of records. The lesson measures that pressing a button updates the text, and what a test cannot see.
  6. 06 Writing Native Modules A native module is the bridge through which the JavaScript side calls platform-specific code. The lesson measures that a native map view is a single node in the tree and that this node is updated when the center changes.
  7. 07 Build and Release In development, fast refresh updates the node in place, while a full reload unmounts the root. The lesson measures this difference and gathers the fates of twenty lessons in a single table.

Final exam

React Native — Final Exam

In preparation

This course's question bank is not complete yet. The exam opens here automatically once enough questions are added.

Start typing to search.

↑↓ ↵ Esc navigate · open · close