Welcome to
The newline Guide to React Native for JavaScript Developers using TypeScript
Course Syllabus and Content
Getting Started
5 Lessons 53 Minutes
For JavaScript developers who want to learn React Native. Learn how to build not just an app, but a Product.
Where does React Native fall within app categories? Should you invest in it?
Once you get the hang of the ecosystem around React Native, building apps will be the easy part. We need to consider storyboarding - the art of the right way to build apps.
Starting from the ground up? We'll look at the structure of the boilerplate code. An opinionated way to build apps, inspired by several apps in production.
Set up, build and run the boilerplate code, with a battle-hardened template and all the necessary tools already integrated.
Navigation and Screens
3 Lessons1 Hours 14 Minutes
Stacked app or tabbed navigation, drawer menus and modals, and what's the best place to load user sessions, and other application data.
Set the app's launch screen and icons. Learn what image to put in native and what to bundle with React Native. Set the tab bar icons.
Learn about the screen lifecycle, and customize the app bar and the back button. We will also look at perceived load time and how to manage it.
Design System
7 Lessons1 Hours 58 Minutes
Atomic design is a mental model of how the UI should be built and laid out. It is at the core of how we are going to build our apps.
To build a design system we need to start by defining a typography; defining the fonts, colors and icons of the app.
Global styles help lay the design structure the app should follow. We'll extend our typography from the previous lesson to define styles, mainly for atoms, molecules and organisms.
Should we use images or SVGs? Should we be putting them in the React Native bundle, or on native and save OTA bandwidth? Let's look at the best practices.
We'll look at the Atomic design pattern's atoms and molecules; what they are and how they help build the design system of the app.
Built using atoms and molecules, Organisms are the complex components that deliver specific features. They are at the core of an app that delivers a consistent UX.
What happens when we press a button on an app vs when we press a button on a web page? That difference is User Experience.
State Management
3 Lessons1 Hours 14 Minutes
State Management in React Native has similar options to React.
Context API provides a way to pass data through the component tree - no more prop-drilling!
Let's learn about Flux and Redux.
API calls and Middlewares
3 Lessons1 Hours 20 Minutes
The very reliable "fetch". Learn the best practices for structuring the app's services and APIs to make them resilient to change.
Middleware allows for side-effects to be executed without blocking state updates. Logger and Analytics make for perfect use cases.
AsyncStorage is an asynchronous, unencrypted, persistent, key-value storage system for React Native.
Debugging
3 Lessons
How to debug a React Native app and a look at a working combination of tools and techniques. Remote Debugger, DevTools and error boundaries.
React Native Debugger and Flipper; the evolution of debugging options at React Native.
Running on a real device is imperative to testing how the app will actually perform.
Performance
2 Lessons
How JavaScript works. Learn best practices, find the node that is taking time to render, improve FPS performance, learn when to do image caching and find out about Hermes.
Does your app have lot of images or tabs? Thousands of items or an endless scroll? Let's look at how to handle it best in React Native.
CodePush and Error Reporting
3 Lessons
CodePush is Microsoft's App Center cloud service that enables React Native developers to deploy mobile app updates directly to their users' devices.
Error reporting in JavaScript and native code
Bonus Content
3 Lessons 1 Minutes
The one-stop solution for micro-animations in a React Native app.
Look no further than React Native SVG for your SVG solution.
Some common references and special components supported by React Native, Android back handler, and a bit of know-how!