React Native for Beginners by Programming with Mosh


React Native

Updated Mar 14th, 2022

Here is the video.

Introduction

Build an app, market place for selling used items. See items, seller, where they are on the mpa, send message to the seller. filter the list. Add a new listing with up to 3 images, price, category. Post tot server with progress bar and animation at the end.


0:02:58 What is React Native?

Don’t need to know iOS and Android. Write all code in JS. Don’t need to hire two developer teams (Swift, Objective-C for iOS and Java or Kotlin developers for Android). You can use to build serious apps. Apps like are built, Facebook, Instagram, Pinterest, Skype, and Uber Eats, are built using React Native.

0:04:33 Expo

Expo CLI hides a lot or complexity. React Native CLS is alternative. We will use expo so we don’t have android and iOS folders as we will only use JavaScript. Can also eject from expo if you want.

0:06:19 Setting up the development environment

Node version 12 or higher. Install expo globally.

npm i - g expo-cli

Also install the “expo client” app on your phone. This allows you to easily run your app on a physical device.

Also install React Native Tools by Microsoft VS Code extension to help us debug.

I use a different snippet extension but Mosh said to install React-Native/React/Redux snippets by EQuimper VSCode extension to generate code really fast. He also recommended Prettier with format on save and and Material icon Them by Philipp Kief.

0:09:17 Your First React Native App


0:14:38 Running on an iOS simulator


0:18:02 Running on an Android emulator

So much setup.

0:26:48 Running on a physical device

0:27:54 Logging

0:29:16 Debugging with Chrome

0:34:27 Debugging in VSCode

0:41:39 Publishing

0:46:30 Fundamental Concepts

0:48:20 View

0:51:08 Text

0:53:50 Image

0:59:25 Touchables

1:04:21 Button

1:06:01 Alert

1:09:55 StyleSheet

1:14:49 Platform-specific code

1:18:06 Layouts

1:18:43 Dimensions

1:22:22 Detecting orientation changes

1:27:39 Flexbox

1:30:56 flexDirection

1:32:48 justifyContent, alignItems and alignSelf

1:37:22 flexWrap and alignContent

1:40:22 flexBasis, flexGrow and flexShrink

1:43:07 Absolute and Relative Positioning

1:45:59 Exercises

1:46:58 Welcome Screen

1:57:55 View Image Screen


2:02:51 Refactoring