React Native : The Beginner Guide (2023 Edition)

Build Android and IOS mobile apps ! ( incl. Notifications push , Hooks, Navigation, Camera, ES6, FlexBox, Animations…)

What you'll learn

Build native cross-platforms app for Android et IOS with the same code

Learn all the React / React Native core concepts

Push notifications

Hooks / Contexts

Routing and navigation

Use the last Javascript version: ES6

Style your app with JSS

Make asynchronous requests to consume an API

Discover expo to increase your development speed

Learn how to use a debugger

Flex-box system

Use the AsyncStorage to persist data in your app

Access the mobile images gallery

Requirements

Experience with HTML / CSS / JS is required

Description

In this new edition of React Native, learn how to quickly build ultra-modern , cross-platform mobile applications (working on both Android and IOS) !React Native is like React's little brother. It is developed by Facebook, with a "Learn once, write everywhere" policy.React Native will allow you to develop native mobile applications running on IOS and Android with the same code, a real revolution!This technology is exploding and is in high demand in the job market.React Native uses the React library which allows web developers to get started quickly. You will discover that developing a mobile app with React Native is a lot like web development.We are going to use Expo, the most used tool to create apps in 2 steps 3 moves.With it, we will be able to code have live updates on a real smartphone on an emulator.Also we will be able to share our app in a snap.Goodbye mobile development with endless compilation times! We will start together from the beginning and discover ReactJS and ReactNative in this course, so don't worry if you don't know React. The course will be progressive and we will develop several apps together.Summary :- The basic concepts of React- Create a React Native application with Expo- Styling- The flexbox system- Navigate between pages and send parameters using react-navigation- Permissions- Geolocation- Push-notifications- Access the smartphone gallery- Create a notification server- Communicate with an API- Learn to use ES6 functions (map, find …) - AnimationsSee you soon!​​Codiku.

Overview

Section 1: Introduction

Lecture 1 Introduction

Lecture 2 React Native ?

Lecture 3 Expo GO ?

Lecture 4 React ?

Section 2: Installation

Lecture 5 Environment

Lecture 6 Mobile, Emulator, Simulator what to choose ?

Lecture 7 Using a real device

Lecture 8 Android Emulator - Mac and Linux

Lecture 9 Android Emulator - Windows

Lecture 10 Simulator IOS - Mac

Section 3: Get some help

Lecture 11 Github Codiku

Lecture 12 VS code theme and plugins

Section 4: The core concepts

Lecture 13 Project quick tour

Lecture 14 Creating your first component

Lecture 15 Formating my code

Lecture 16 Styling

Lecture 17 Flex-box system

Lecture 18 Practicing : Creating a profil card part 1

Lecture 19 Practicing : Creating a porfil card part 2

Lecture 20 Props

Lecture 21 Children props

Lecture 22 Conditionnal rendering

Lecture 23 States

Lecture 24 Unexpected useState behaviours

Lecture 25 Callback functions

Lecture 26 Using callbacks into our Profile Card

Lecture 27 Detect the platform

Section 5: Our first real App ! Temperature converter

Lecture 28 Introducing the app + starter

Lecture 29 Layout

Lecture 30 Text input

Lecture 31 Component DisplayTemperature

Lecture 32 Converting the temperature

Lecture 33 Button : Toggle units

Lecture 34 Core concept : useEffect hook

Lecture 35 Changing the background programmatically

Section 6: New App : Task list !

Lecture 36 Introducing the app

Lecture 37 Creating the app

Lecture 38 Layout

Lecture 39 Header and Splash screen

Lecture 40 Card component

Lecture 41 ES6 map function

Lecture 42 Scrollable list of card

Lecture 43 ES6 spread operator

Lecture 44 Updating the status of a card

Lecture 45 Tab bottom menu - Selecting a tab

Lecture 46 ES6 filter function

Lecture 47 ES6 reduce function

Lecture 48 Filter notes

Lecture 49 Delete a todo

Lecture 50 Add a todo

Lecture 51 Javascript handling errors - Try,Catch, Throw and Finally

Lecture 52 AsyncStorage : Persisting our data

Lecture 53 Discovering the hook : useRef

Lecture 54 Using useRef to scroll at the bottom of the list

Section 7: App : Real Time Weather and Forecast

Lecture 55 Introducing the project

Lecture 56 Creating the app

Lecture 57 Layout and Background

Lecture 58 Open Weather API

Lecture 59 [ANDROID EMULATOR ONLY] : GPS settings

Lecture 60 [IOS SIMULATOR ONLY] : GPS settings

Lecture 61 ES6 - Destructuring assignment

Lecture 62 ES6 - Async / Await and promises

Lecture 63 Ask for permissions and get the user coordinates

Lecture 64 Fetch the weather data

Lecture 65 Debugger

Lecture 66 Using custom fonts

Lecture 67 MeteoBasic layout

Lecture 68 Weather interpretations

Lecture 69 Responsive texts

Lecture 70 Info about next video

Lecture 71 Understanding useEffect cleanup function

Lecture 72 Digital clock

Lecture 73 Fetching the city using reverse geocoding

Lecture 74 MeteoAdvanced layout

Lecture 75 Filling MeteoAdvanced with data

Lecture 76 React Navigation : setup

Lecture 77 Navigate and send parameters to a Screen

Lecture 78 Header and navigate to previous page

Lecture 79 Forecast list item

Lecture 80 Render multiples ForecastListItem

Lecture 81 Search bar component

Lecture 82 Prevent keyboard from pushing the content

Lecture 83 Searching by city and errors handling

Section 8: Push notifications

Lecture 84 Push notification flow explained

Lecture 85 Preparing our server to send notifications

Lecture 86 Ask Permissions and get a token

Lecture 87 Getting data from a notification

Section 9: Accessing the photo gallery

Lecture 88 Photo gallery

Section 10: Publish and Build

Lecture 89 Publish to Expo

Lecture 90 Generate an official Build

Section 11: Contexts

Lecture 91 What are contexts ?

Lecture 92 Using contexts

Section 12: Performances

Lecture 93 memo, useMemo and useCallback

Section 13: Animations

Lecture 94 Animations introductions

Lecture 95 Trying to animate with states

Lecture 96 Creating an animation

Lecture 97 Animations callbacks

Lecture 98 Using your fingers : Gesture handler

Lecture 99 First exercice

Lecture 100 Understanding Interpolations

Lecture 101 Clamping

Lecture 102 Project : Awesome List

Lecture 103 Awesome List : Creating a simple list

Lecture 104 Awesome List : interpolation values

Lecture 105 Awesome List : Animating the list

Lecture 106 Awesome List : Fixing the missing space at the bottom

Lecture 107 Awesome List : Displaying texts and backdrop

Lecture 108 Awesome List : Animating texts, and snaping effect

Javascript developpers that want to learn how to make a cross-platform mobile app.,React developpers that want to be able to also develop cross-platform mobile app.