Top 8 Recommended React Native Self-Study Materials! [November 2024]

Unlock the power of React Native and build impressive iOS and Android apps with this comprehensive course. Whether you're a beginner or an experienced developer, this course is designed to equip you with the skills and knowledge needed to create robust mobile applications using React Native.

In the "Getting Started" section, you'll dive into the fundamentals, exploring React Native's core concepts, understanding the difference between React Native CLI and Expo, and setting up your local development environment for both iOS and Android. You'll also get acquainted with important tools like code editors, ESLint, and Prettier.

Once you have a solid foundation, you'll move on to the essentials of React and React Native. Learn about components, stylesheets, props, event handling, and how to create basic UI elements such as buttons, text inputs, and icons. Take a deep dive into React Hooks and gain a solid understanding of useState, useEffect, useRef, useContext, and creating custom hooks.

To create visually appealing and responsive interfaces, the course covers styling techniques with borders, margins, paddings, and flexbox. You'll also explore advanced topics such as debugging, data management with Redux Toolkit, user authentication, building APIs with NodeJS and Express, integrating payment systems using Stripe, and deploying your applications to app stores.

With hands-on assignments and a practical project, you'll gain real-world experience as you apply your newfound knowledge. Whether you're looking to enhance your skills for career advancement or create your own mobile app, this course is the ultimate resource for mastering React Native in 2024.

Enroll now and join the learners who have already transformed their mobile app development skills with this comprehensive React Native course. Take the next step in your coding journey and unleash the potential of React Native today.

1. Getting Started
2. Welcome to This Course & What to Expect
3. What is React Native?
4. Quiz - What is React Native?
5. React Native CLI vs Expo
6. React Native CLI vs Expo Quiz
7. Resources for Every Lecture
8. Getting Started on macOS
9. (macOS) How to Setup Local Development Environment for iOS React Native Apps
10. (macOS) How to Setup Local Development Environment for Android React Native Apps
11. How to Reset Caches on macOS for any Project
12. Getting Started on Windows
13. (Windows) How to Setup Local Development Environment for Android
14. Important - Please watch till the end
15. IMPORTANT DOCUMENTATION FOR WINDOWS
16. Transitioning Your React Native Project from Windows to macOS for iOS
17. How to Reset Caches on Windows for any Project
18. Creating the First App
19. What is a Code Editor, ESLint & Prettier? (Optional)
20. ^^^ VSCode Prettier, ESLint Setup Update (Optional)
21. What is JSX? (Optional)
22. JSX Quiz (Optional)
23. Let's Create Hello World App!
24. Hello World App - Detailed Overview
25. Hello World App Quiz
26. Displaying Text in React Native
27. [Extra] Javascript Refresher (Optional)
28. Introduction
29. JavaScript Summary
30. Syntax Refresher
31. Syntax Quiz
32. Let & Const Variables
33. Let & Const Quiz
34. Arrow Functions
35. Arrow Function Quiz
36. Objects: Properties & Methods
37. Objects Quiz
38. Array & Array Methods
39. Array & Methods Quiz
40. Arrays, Objects & Reference Types
41. Reference Types Quiz
42. Spread Operator & Rest Operators
43. Spread Operator Quiz
44. Destructuring
45. Destructuring Quiz
46. Preface for APIs
47. Async, Await & Promises - Working with APIs
48. Async, Await Quiz
49. Summary
50. [Extra] Styling (Optional - Made for complete beginners)
51. Introduction
52. Borders
53. Borders Quiz
54. Margins
55. Margins Quiz
56. Paddings
57. Paddings Quiz
58. Position: Absolute & Relative & zIndex
59. Positioning Quiz
60. Text Styles
61. Text Styles Quiz
62. Summary
63. React & React Native Basics
64. Introduction
65. What is a Component?
66. What is a Component Quiz
67. What are Stylesheets?
68. Stylesheet Quiz
69. View Component
70. View Component Quiz
71. What are Props & Prop Types
72. Props Quiz
73. Event Handling
74. Event Handling Quiz
75. Summary
76. Props, Event Handling, Views & Stylesheet Assignment
77. [Extra] Deep Dive into React Hooks (Optional - Only for React beginners)
78. Introduction
79. What are React Hooks?
80. React Hooks Quiz
81. Getting Started with useState
82. useState Quiz
83. Understanding useEffect
84. useEffect Quiz
85. Working with refs and useRef
86. useRef Quiz
87. Working with useContext
88. useContext Quiz
89. Creating Custom Hooks
90. Custom Hooks Quiz
91. Summary
92. [Extra] Deep Dive into Class Based Components (Only for React Beginners)
93. Introduction
94. What is a Class Based Component?
95. Class Based Component Quiz
96. Working with State & Events
97. Working with State & Events Quiz
98. Component Lifecycle Methods in Action
99. Class Based Component Lifecycle Methods Quiz
100. Functional Components with Hooks VS Class Based Components with Lifecycle
101. Functional Components & Class Based Components Quiz
102. Function Components & Class Based Components Assignment
103. Summary
104. Building Basic Components
105. Introduction
106. Resources for Image Component
107. Image Component
108. Image Quiz
109. Text Input Component
110. Text Input Quiz
111. Resources for ScrollView
112. ScrollView Component
113. ScrollView Quiz
114. Button Component & Form Submission
115. Button Quiz
116. Switch Component
117. Switch Quiz
118. Icons with FontAwesome
119. Deep Dive in Flexbox
120. Flexbox Quiz
121. Summary
122. Section 3 Overview Assignment
123. Figma Design Resources (Optional)
124. What is Figma?
125. Figma Tutorial for our Upcoming Projects
126. [Practice] Getting Started on Social Media App
127. Social Media Feed Application Introduction
128. Installing a New Application
129. How to Install Custom Fonts
130. Custom Font Installation Quiz
131. Creating a Title Component
132. Installing FontAwesome Icons
133. What is a Flatlist?
134. Quiz - What is a Flatlist?
135. Setting Up For Flatlist
136. Using Flatlist & User Stories
137. User Profile Image in Flatlist
138. Infinite Scroll
139. Quiz - Infinite Scroll
140. Setting Up for User Posts
141. Resources for Creating User Post
142. Creating User Posts using Flatlist
143. Finishing Up Social Media App
144. Flatlist Quiz
145. Summary
146. Debugging Your Applications
147. Introduction to Debugging
148. Handling Errors
149. Logging to the Console
150. Documentation
151. Building Responsive UIs
152. Introduction
153. What is Dimensions API?
154. Dimensions API Quiz
155. [BEST TAKEAWAY] Responsive Scaling for Fonts, Vertical and Horizontal Sizings
156. Scaling Functions Quiz
157. Using Scaling Functions
158. How to Use Scaling Functions Quiz
159. Writing Platform-Specific Code with the Platform API
160. Platform Specific Code Quiz
161. Styling the Status Bar
162. Status Bar Styling Quiz
163. Summary
164. Basic Navigation
165. Introduction
166. Setting Up Navigation System
167. Introduction to Stack Navigation
168. Creating & Using Stack Navigator
169. How to Navigate to a Different Screen
170. Stack Navigator Quiz
171. Creating Main Menu with Drawer Navigator
172. Drawer Navigator Quiz
173. Getting Started with Profile UI
174. How to Create Tab Navigation on a Single Screen
175. Tabs Quiz
176. How to Style Tab Labels
177. Styling Tab Labels Quiz
178. Creating Components for Our Tab Contents
179. Summary
180. [Practice] Donation Application - Putting All Our Knowledge Together
181. Introduction
182. Creating Project & Setting Up
183. Installing Custom Fonts
184. [Please Watch] Custom Fonts - Part 2
185. Installing React Native Navigation
186. Setting Up Navigation, Styles & Home Page
187. Donation App Architectural Plan Discussion
188. Creating Header Component
189. Creating Button Component
190. Creating Tab Component using useRef
191. Creating Badge Component using useRef
192. Installing Font Awesome Icons
193. Creating Search Input Component
194. Resources for Single Donation Item Component
195. Creating a Single Donation Item Component
196. Styling a Single Donation Item Component
197. Summary
198. Data Management with Redux Toolkit
199. Introduction
200. Redux vs Redux Toolkit

Mobile apps are one of the best ways to engage with users - no wonder everyone wants to build one!

But wouldn't it be amazing if you could use your web development knowledge, combined with your React knowledge, to build mobile apps with that?

That's exactly what React Native allows you to do!

No need to learn Java, Android, Swift, ObjectiveC or anything of that - React and JavaScript is all you need to create awesome native mobile apps that work on both Android and iOS. That's probably the reason why Instagram, AirBnB, Skype and many other global companies are using it to build their mobile apps!

With this course, you can join this league. I'll teach you all you need to create your own React Native apps, publish them to the Google Play Store and Apple App Store and dive really deep into the React Native ecosystem.

You'll learn all about the theory behind React Native, its core concepts, how to build responsive designs that work on different device sizes, how to navigate around, use maps and the camera and so much more!

And which better way to learn than by building a real app? We'll build the "Favorite Places" app in this course, an app where users can share amazing pictures and the location where they took them. This app will allow you to see things like using maps, the camera, user authentication, connecting to a server and much more in action.

By the end of the course, we'll of course also go through all steps required to get it into an app store.

Here's a detailed look at what you'll get:

• The core concepts and theory

• How to use React, JavaScript and native components

• Understand how to navigate in React Native apps

• A closer look at styling and animating React Native apps

• Instructions on how to use third-party libraries in your React Native app

• Detailed examples on how to use maps or an image picker

• A full user authentication flow

• How to connect to a backend server from your app

• Debugging instructions

• And so much more!

What will you need to succeed in this course?

• NO Android, Java, Swift or ObjectiveC knowledge is required!

• JavaScript and React (for the web) knowledge is required though - you don't need to be an expert but the basics need to be set (though there are refresher sections in this course!)

I'd be very happy to welcome you in the course!

Max

1. Getting Started
2. Welcome To This Course & What To Expect!
3. What Is React Native?
4. Join our Online Learning Community
5. A Glance Under The Hood Of React Native
6. Creating React Native Projects: Expo CLI vs React Native CLI
7. Creating a New React Native Project
8. Analyzing The Created Project
9. Running Our First App On A Real Device!
10. Setting Up A Local Development Environment
11. Course Setup
12. About This Course
13. Course Resources, Code Snapshots & How To Use
14. React Native Basics [COURSE GOALS APP]
15. Module Introduction
16. Exploring Core Components & Component Styling
17. Working With Core Components
18. Styling React Native Apps
19. React Native: Core Components, Styling & Colors - More Information
20. Exploring Layouts & Flexbox
21. React Native & Flexbox
22. Using Flexbox To Create Layouts
23. Flexbox - A Deep Dive
24. Components, Styles, Layouts
25. Improving The Layout
26. Handling Events
27. Managing A List Of Course Goals (in our Demo App)
28. iOS & Android Styling Differences
29. Making Content Scrollable with ScrollView
30. Optimizing Lists with FlatList
31. More Components & Lists
32. Splitting Components Into Smaller Components
33. Utilizing Props
34. Working on the "Goal Input" Component
35. Handling Taps with the Pressable Component
36. Making Items Deletable & Using IDs
37. Adding an Android Ripple Effect & an iOS Alternative
38. Adding a Modal Screen
39. Styling the Modal Overlay
40. Opening & Closing the Modal
41. Working with Images & Changing Colors
42. App Finishing Touches
43. Module Summary
44. Debugging React Native Apps (Introduction)
45. Module Introduction
46. Handling Errors
47. Logging to the Console
48. Debugging JavaScript Remotely
49. Using the React DevTools
50. Using the Documentation
51. Diving Deeper into Components, Layouts & Styling - Building a Mini-Game App
52. Module Introduction & What We'll Build
53. Starting Setup & Analyzing the Target App
54. Setting Up our Screen Components
55. Creating Custom Buttons
56. Styling for Android & iOS
57. Styling the "Number Input" Element
58. Configuring the TextInput Field
59. Adding Visual Feedback to the Buttons
60. Improving the Buttons
61. Coloring the Components & The Overall App
62. Adding a Linear Gradient
63. Adding a Background Image
64. Getting Started with the Game Logic
65. Handling User Input & Showing an Alert Dialog
66. Switching Screens Programmatically
67. Starting Work on the Game Screen
68. Respecting Device Screen Restrictions with the SafeAreaView
69. Creating a Title Component
70. Managing Colors Globally
71. Creating, Using & Displaying Random Numbers
72. Adding Game Control Buttons ("+" & "-") to the App
73. Checking for "Game Over"
74. Improving the Game Screen Visuals
75. Using "Cascading Styles"
76. Working with Icons (Button Icons)
77. Adding & Using Custom Fonts with React Native Apps
78. Adding a (Foreground) Image
79. Using & Styling Nested Text
80. Adding Logic to (Re-)Start Games & Displaying a Summary Screen
81. Logging Game Rounds
82. Outputting Log Data with FlatList
83. Styling the Game Round Logs
84. Finishing Touches
85. Module Summary
86. Building Adaptive User Interfaces (Adapt to Platform & Device Sizes)
87. Module Introduction
88. Setting Dynamic Widths
89. Introducing the Dimensions API
90. Adjusting Image Sizes with the Dimensions API
91. Understanding Screen Orientation Problems
92. Setting Sizes Dynamically (for different Orientations)
93. Managing Screen Content with KeyboardAvoidingView
94. Improving the Landscape Mode UI
95. The Dimensions API & Responsive UIs
96. Further Improvements with useWindowDimensions
97. Writing Platform-specific Code with the Platform API
98. Styling the Status Bar
99. React Native Navigation with React Navigation [MEALS APP]
100. Module Introduction
101. What Is Navigation?
102. Getting Started with the App & Outputting Meal Categories
103. Displaying Items in a Grid
104. Getting Started with the React Navigation Package
105. Implementing Navigation Between Two Screens
106. Setting the Default Screen
107. Understanding the useNavigation Hook
108. Working with Route Parameters To Pass Data Between Screens
109. Displaying Meals
110. Adding Images & Styling
111. Styling Screen Headers & Backgrounds
112. Setting Navigation Options Dynamically
113. Adding & Configuring the Meal Details Screen
114. Outputting Content in the Meal Detail Screen
115. Finishing the Meal Detail Screen
116. Adding Header Buttons
117. Adding an Icon Button to a Header
118. Adding Drawer Navigation & Creating a Drawer
119. Configuring the Drawer Navigator & The Drawer
120. Adding, Configuring & Using Bottom Tabs
121. Nesting Navigators
122. App Finishing Touches
123. Module Summary
124. App-wide State Management with Redux & Context API
125. Module Introduction
126. Getting Started with React's Context API
127. Managing App-wide State with Context
128. Using the Created Context with useContext
129. Managing Favorite Meals with the Context API
130. Getting Started with Redux & Redux Toolkit
131. Working with Redux Slices
132. Managing Redux State & Dispatching Actions
133. Using Redux State in Components
134. Module Summary
135. Time To Practice - The Expense Tracker App
136. Module Introduction & What We'll Build
137. The Starting Setup
138. Adding Navigation (with React Navigation) & Configuring Navigation
139. Adding Global Colors & Editing Navigation Configuration
140. Creating Key App Components to Display Expenses
141. Continuing Work on the Expense-related Components
142. Adding Dummy Expense Data
143. Outputting a List of Expenses
144. Improving App Layout & Styling
145. Working on Expense List Items
146. Formatting Dates
147. Adding a Header Button & Making Expense Items Tappable
148. Navigating Programmatically Between Screens
149. Styling The Expense Management Screen
150. Supporting Different Editing Modes & Using Route Parameters
151. Adding a "Delete" Button
152. Adding Custom Buttons
153. Closing A Modal Programmatically
154. Managing App-wide State With Context
155. Using Context From Inside Components
156. Deleting & Updating Expenses
157. Finishing Touches
158. Handling User Input
159. Module Introduction
160. Building a Custom Input Component
161. Creating an Overall Form
162. Configuring the Form Input Elements
163. Adding Styling
164. Setting the Form Layout
165. Handling User Input in a Generic Way
166. Managing Form State & Submission
167. Working with Entered Data
168. Setting & Using Default Values
169. Adding Validation
170. Providing Visual Validation Feedback
171. Adding Error Styling
172. Module Summary
173. Sending Http Requests
174. Module Introduction
175. Backend Setup (Firebase)
176. Installing Axios
177. Sending POST Http Requests
178. Fetching Backend Data (GET Requests)
179. Transforming & Using Fetched Data
180. Using Response Data from POST Requests
181. Updating & Deleting Backend Data (UPDATE & DELETE Requests)
182. Managing the Loading State
183. Handling Request Errors
184. Module Summary
185. User Authentication
186. Module Introduction
187. Demo App Walkthrough
188. How Does Authentication Work?
189. Backend Setup
190. Controlling Signup & Login Screens
191. Sending Authentication Requests to the Backend
192. Creating New Users
193. Logging Users In
194. Authentication Error Handling
195. Storing & Managing the User Authentication State (with Context)
196. Extracting the Authentication Token
197. Protecting Screens
198. Adding a Logout Functionality
199. Accessing Protected Resources
200. Storing Auth Tokens on the Device & Logging Users In Automatically

If you're tired of spinning your wheels learning Swift or Android, this is the course for you.

Authentication? You will learn it.  Hooks? Included.  Navigation? Of course!

This course will get you up and running with React Native quickly, and teach you the core knowledge you need to deeply understand and build React components for mobile devices.

Both OSX and Windows supported - develop iOS or Android!

This course includes content on both v0.62.2 and the legacy v0.30.x, which is widely used in industry.

We'll start by mastering the fundamentals of React, including JSX, “props", “state", and event handling. Source code is provided for each lecture, so you will always stay up-to-date with the course pacing.  Special attention has been paid to creating reusable components that you'll be able to make use of on your own fantastic projects.

React Native is an excellent solution for developing apps on mobile in a fraction of the time it takes to make an equivalent iOS or Swift app.  You'll love seeing your changes instantly appear on your own device, rather than waiting for Swift/Java code to recompile!  This quick feedback loop, along with excellent cross platform support, is what has catapulted React Native to the top must-have skill for Javascript engineers.

If you are new to React, or if you've been working to learn it but sometimes feel like you still don't quite 'get it', this is the React course for you! To learn React you have to understand it.

• Learn how to use React's custom markup language, JSX, to clean up your Javascript code

• Master the process of breaking down a complex component into many smaller, interchangeable components

• Grasp the difference between “props" and “state" and when to use each

• Render interactive, media-rich components in beautifully styled apps

• Develop apps that are unique, fun, and responsive

• Build on both Android and iOS platforms

• Master integration with Firebase for user authentication

• Learn the core principles of navigation with React Native

I've built the course that I would have wanted to take when I was learning React Native. A course that explains the concepts and how they're implemented in the best order for you to learn and deeply understand them.

1. Getting Started
2. How to Get Help
3. Course Resources
4. Join Our Community!
5. Course Overview
6. Installing Node.js and Prerequisite Info
7. Boilerplate Download and Startup
8. App Setup
9. Making Changes
10. Expo for Web Browser - Do Not Skip
11. Using iOS and Android Simulators
12. Working with Content
13. Overview of React Components
14. Showing a Custom Component
15. Common Questions and Answers
16. Rules of JSX
17. One Common Error
18. JSX Exercise Overview
19. JSX Solution
20. List Building - With Style!
21. Building Lists
22. The FlatList Element
23. Rendering a FlatList
24. Why a Key Property?
25. Solving the Key Issue
26. A Few Props Around FlatList
27. Exercise Overview
28. Exercise Solution
29. Navigating Users Between Screens
30. Button Types
31. Buttons in Action
32. Touchable Opacity in Action
33. Navigating with React Navigation
34. Destructuring Props
35. Building Reusable Components
36. Component Reuse with Props
37. Exercise Solution
38. Parent-Child Relationships
39. Communicating from Parent to Child
40. Images Download
41. Showing Images
42. Passing Images as Props
43. Exercise Outline
44. Exercise Solution
45. State Management in React Components
46. State in Components
47. Screen Boilerplate
48. State in Action
49. Notes on State
50. App Overview
51. Generating Random Colors
52. Adding Random Colors
53. Showing Colors with a FlatList
54. App Overview
55. Reusable Color Adjusters
56. Coordinating State
57. Passing Callbacks to Children
58. Tying State Values Together
59. Validating State Changes
60. Reusable State Updates
61. Introduction to Reducers
62. Creating a Reducer
63. Applying State with a Reducer
64. Restoring Validation
65. Community Convention in Reducers
66. Exercise Outline
67. Exercise Solution
68. Handling Text Input
69. Showing a Text Input
70. Two Important Props
71. Weird Things with Text and State
72. Updating State
73. Exercise Outline
74. Exercise Solution
75. How to Handle Screen Layout
76. Layout with React Native
77. Basics of Box Object Model
78. AlignItems with Flex
79. Flex Direction
80. Justify Content
81. Flex Values
82. Align Self on Children
83. The Position Property
84. Top, Bottom, Left, Right
85. Absolute Fill Objects
86. Applying Layout Systems
87. Exercise Overview
88. Exercise Solution
89. Putting It All Together - Restaurant Search App
90. App Overview
91. Important Note About Project Generation
92. Project Generation
93. Yelp API Info and Workarounds
94. Yelp Signup
95. Yelp Walkthrough
96. React Navigation
97. Required React Navigation Installation Update
98. Assembling a Navigator
99. Architecture Approach
100. Starting the SearchBar
101. Displaying Icons
102. Search Bar Styling
103. A Touch More Styling
104. Managing State
105. Detecting Editing Completion
106. Using Outside API's
107. Configuring Axios
108. Making the Request
109. Error Handling
110. Running an Initial Search
111. Making Hooks Reusable
112. The useEffect Hook
113. Extracting Hook Logic
114. Showing Search Results
115. Grouping Results
116. FlatList Rendering
117. Navigation with Parameters
118. Showing a Single Result
119. Showing Additional Info
120. A Few More Styling Issues
121. Hiding Scroll Bars
122. Constraining View Elements
123. Empty Elements
124. Spacing on the Search Bar
125. Reminder on Navigation
126. Navigating from a Child Component
127. The WithNavigation Helper
128. Communicating Between Screens
129. Fetching a Single Restaurant
130. Showing a List of Images
131. One Last Fix
132. Upgrading the Restaurant app to use React Navigation v6
133. Advanced State Management with Context
134. Important Note About Project Generation
135. App Overview
136. Issues with Data
137. Required React Navigation Installation Update
138. Initial Setup
139. Wrapping the Navigator
140. Introduction to Context
141. Adding Context
142. Moving Data with Context
143. Rendering a List of Posts
144. Adding State in Context
145. It Works!
146. Opportunity for Improvement
147. Updating with UseReducer
148. Automating Context Creation
149. More Automatic Context Creation
150. A Bit of Styling
151. Deleting Posts
152. Updating the Reducer
153. Navigation on Tap
154. Retrieving Single Posts
155. Adding a Creation Screen
156. headerRight Deprecation in 'navigationOptions'
157. Header Navigation
158. Displaying a Form
159. Saving a New Post
160. Navigation on Save
161. headerRight Deprecation in 'navigationOptions'
162. The Edit Icon Link
163. Communicating Info to Edit
164. Initializing State from Context
165. Extracting Form Logic
166. Customizing OnSubmit
167. Initial Form Values
168. Support for defaultProps Will be Removed
169. Default Props
170. Editing Action Function
171. Editing in a Reducer
172. Navigating Backwards
173. Data API Sync
174. Outside Data API
175. Issues with Servers + React Native
176. Important - Required Ngrok Setup Steps
177. JSON Server and Ngrok Setup
178. JSON Server REST Conventions
179. Making a Request
180. Remote Fetch of Posts
181. Creating Posts with Post Requests
182. Refetching on Navigate
183. Deleting a Post
184. Editing Posts
185. App Wrapup
186. Upgrading the Blog app to use React Navigation v6
187. Building a Custom Express API
188. App Overview
189. Dependencies Setup
190. The Basics of Express
191. MongoDB Setup
192. Connecting to MongoDB
193. Nodemon for Automatic Restarts
194. Understanding the Signup Process
195. Using Postman
196. Handling JSON Data
197. Defining a User Schema
198. Creating and Saving a User
199. Error Handling
200. JSON Web Tokens

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 ...)

- Animations


See you soon!

​​Codiku.

1. Introduction
2. Introduction
3. React Native ?
4. Expo GO ?
5. React ?
6. Installation
7. Environment
8. STOP ! WATCH OUT !
9. Mobile, Emulator, Simulator what to choose ?
10. Using a real device , quick note
11. Using a real device
12. Android Emulator - Mac and Linux
13. Android Emulator - Windows
14. Simulator IOS - Mac
15. Get some help
16. Github Codiku
17. VS code theme and plugins
18. The core concepts
19. Project quick tour
20. Creating your first component
21. Formating my code
22. Styling
23. Flex-box system
24. Practicing : Creating a profil card part 1
25. Practicing : Creating a porfil card part 2
26. Props
27. Children props
28. Conditionnal rendering
29. States
30. Unexpected useState behaviours
31. Callback functions
32. Using callbacks into our Profile Card
33. Detect the platform
34. Our first real App ! Temperature converter
35. Introducing the app + starter
36. Layout
37. Text input
38. Component DisplayTemperature
39. Converting the temperature
40. Button : Toggle units
41. Core concept : useEffect hook
42. Changing the background programmatically
43. New App : Task list !
44. Introducing the app
45. Creating the app
46. Layout
47. Header and Splash screen
48. Card component
49. ES6 map function
50. Scrollable list of card
51. Spread operator
52. Updating the status of a card
53. Tab bottom menu - Selecting a tab
54. ES6 filter
55. ES6 reduce function
56. Filter notes
57. Delete a todo
58. Add a todo
59. Handling errors with Try, Catch, Finally and Throw
60. AsyncStorage : Persisting our data
61. Discovering the hook : useRef
62. Using useRef to scroll at the bottom of the list
63. App : Real Time Weather and Forecast
64. Introducing the project
65. Creating the app
66. Layout and Background
67. Open Weather API
68. [ANDROID EMULATOR ONLY] : GPS settings
69. [IOS SIMULATOR ONLY] : GPS settings
70. ES6 Destructuring Assignment
71. ES6 Promises - Async/Await
72. Ask for permissions and get the user coordinates
73. Fetch the weather data
74. Expo debugger is now built in !
75. Debugger
76. Using custom fonts
77. MeteoBasic layout
78. Weather interpretations
79. Responsive texts
80. Info about next video
81. UseEffect cleanup function
82. Digital clock
83. Fetching the city using reverse geocoding
84. MeteoAdvanced layout
85. Filling MeteoAdvanced with data
86. React Navigation : setup
87. Navigate and send parameters to a Screen
88. Header and navigate to previous page
89. Forecast list item
90. Render multiples ForecastListItem
91. Search bar component
92. Prevent keyboard from pushing the content
93. Searching by city and errors handling
94. Push notifications
95. Push notification flow explained
96. Preparing our server to send notifications
97. Note about projectId
98. Ask Permissions and get a token
99. Getting data from a notification
100. Accessing the photo gallery
101. Photo gallery
102. Publish and Build
103. Publish to Expo
104. Generate an official Build
105. Contexts
106. What are contexts ?
107. Using contexts
108. Performances
109. memo, useMemo and useCallback
110. Animations
111. Animations introductions
112. Trying to animate with states
113. Creating an animation
114. Animations callbacks
115. Using your fingers : Gesture handler
116. First exercice
117. Understanding Interpolations
118. Clamping
119. Project : Awesome List
120. Solving the crash from the next video
121. Awesome List : Creating a simple list
122. Solving the crash
123. Awesome List : interpolation values
124. Awesome List : Animating the list
125. Awesome List : Fixing the missing space at the bottom
126. Awesome List : Displaying texts and backdrop
127. Awesome List : Animating texts, and snaping effect

Are you a hands-on learner who thrives on practical application? If so, you're in the right place! Join us on an immersive journey as we construct a cutting-edge Full Stack Node.js and React Native Application, expertly divided into two comprehensive sections. We'll start by diving deep into the intricacies of APIs, equipping you with the knowledge and skills needed to construct a robust backend API from scratch. Harness the power of Node.js, Express, MongoDB, Cloudinary, Mailtrap, TypeScript, and an array of other essential tools, including yup and luxon.

Get ready to create a suite of top-tier features that will elevate your application to new heights, including:

• Establishing a Refresh Token Authentication System to ensure secure user authentication.

• Implementing Email Verification and Password Recovery mechanisms for enhanced account security.

• Crafting various Routes and Methods to facilitate seamless interaction with your API.

• Adding, Updating, Reading, and Removing Products with ease, empowering users to manage their inventory effortlessly.

• Exploring advanced TypeScript concepts to enhance code clarity, maintainability, and scalability.

• Fine-tuning Project Management skills to ensure efficient development and deployment processes.

• Enabling Real-time Communication through Socket IO, fostering dynamic interactions between users in your application.

• Implementing robust Data Validation techniques to maintain data integrity and enhance user experience.

But that's just the beginning! Our journey doesn't end with backend development. Once the API is up and running, we'll seamlessly transition to frontend development, where we'll craft a sleek and intuitive React Native App that operates seamlessly on both Android and iOS platforms. Whether you're a newcomer to React Native app development or a seasoned pro, you'll uncover a treasure trove of advanced techniques and insights that will take your skills to the next level.

Each feature we build will be accompanied by an intuitive and user-friendly UI, ensuring that users can effortlessly access and interact with all the functionalities our app has to offer.

With a hands-on approach and a focus on practical application, this course is designed to equip you with the skills and knowledge you need to succeed in the fast-paced world of full stack development. Enroll now and take the first step towards mastering Full Stack Node.js and React Native development!

1. Introduction
2. How to setup
3. What do I need Mac or Windows
4. TypeScript
5. Incase you Don't Know
6. Project Setup
7. npm init
8. ts config
9. How to Get Source Code?
10. Basic Express Server
11. Post Request & Reading Incoming Data
12. Middleware Function
13. Auth Route
14. Sign up Part 1
15. Connecting to Database
16. Sign up Part 2
17. Sign up Part 3
18. Sign up Part 4
19. Password & Token Hash
20. Adding Types
21. Sending Email
22. Error Handling & Validation
23. Refactoring Error Response
24. Automate Error Handling
25. Proper Data Validation
26. Genuine Email & Strong Password
27. Verification & Authorization
28. Verifying Email
29. Custom Validation Schema
30. Sign in with Refresh Token Rotation
31. Verifying Access Token (isAuth)
32. Customizing Request Type
33. Verification UI
34. Sending Verification Request
35. Re-generating Verification Link
36. Refresh Token
37. Sign out
38. Environment Variable
39. Forget Password Link
40. Validate Password Reset Token API
41. Is Password Reset Token Valid
42. Resetting Password (API)
43. Update Password Front End
44. Update Profile
45. File Upload
46. File Upload
47. File Parser Middleware
48. Uploading Image to Cloud
49. Resizing Profile Image
50. Getting Public Profile
51. Product API
52. Product Model
53. Automate with Chat GPT
54. New Product Validation
55. Creating New Product Part 1
56. Creating New Product Part 2
57. Validating Date
58. Product Update
59. Delete Product
60. Removing Single Product Image
61. Get Product Details
62. Get Products By Category Part 1
63. Get Products By Category Part 2
64. Pagination
65. Getting Latest Listings
66. Auth With React Native
67. Expo Project Setup
68. Using The Doc
69. Rendering Screens
70. Welcome Header Part 1
71. Welcome Header Part 2
72. Input Field
73. Input Focus Effect
74. Custom Button
75. The Divider
76. Navigation Link
77. Avoiding Keyboard
78. Avoiding Keyboard Component
79. Adding Navigation
80. Fixing Types
81. Capturing Input Change
82. Validating Form
83. Refactor Validator
84. Avoiding try catch
85. Rendering App Notification
86. Sign in
87. Refactor Axios Client
88. Sign in After Sign up
89. What After Sign in
90. State Management Library
91. Redux Toolkit Setup
92. Let me explain
93. Updating Redux State
94. Preserving Auth State
95. Loading Indicator
96. Custom useAuth hook
97. Forget Password
98. New Product
99. Tab Navigator
100. New Listing Form
101. Date Picker
102. Fixing Date Picker
103. Date Helper Function
104. Category Selector Part 1
105. Category Selector Part 2
106. Category Selector Button
107. Closing Modal
108. Finishing Form UI
109. Let's use Refresh Token
110. On Request Failed
111. IMPORTANT Fix
112. New Product Form State
113. Category Selector Little Fix
114. Selecting Images
115. Rendering Selected Images
116. Horizontal Image List
117. Removing Selected Images
118. New Product Validation
119. Creating New Product
120. Profile Page
121. Profile Page - Avatar View
122. Profile Page - Profile Info
123. Profile Page Options
124. Adding New Profile Screens
125. Sign out
126. Sign out Fix
127. Custom Header
128. Fetching Listings
129. Listing UI
130. Navigating with Params
131. Single Product UI
132. Image Slider
133. FlatList onViewableItemsChanged
134. Options UI
135. Product Menu Options
136. Removing Product
137. Pull to Refresh
138. Store For Listings
139. Chat Icon
140. Product Edit
141. Edit Product Page
142. Image Edit Options
143. Removing Single Image
144. Edit Product Form State
145. Removing Image Form UI
146. Category and Thumbnail Selection
147. Updating Product
148. Submitting Updated Info
149. Update Image Issue
150. Deep Equal
151. Update Profile
152. Updating Profile Name
153. Verification Link UI
154. Updating Profile Image
155. Home Page
156. Home Page UI
157. Chat Notification
158. Search Bar UI
159. Category List
160. Rendering Latest Products Part 1
161. Rendering Latest Products Part 2
162. Fetching Latest Products
163. Fetching Product Details
164. Fetching Product by Category
165. Empty View
166. Multi Column FlatList
167. Style For Odd LIst Items
168. Message
169. Socket IO
170. Setting up Socket IO
171. Socket Connection with Auth
172. Refreshing Token on Socket IO Error
173. The Plan to Handle Chat
174. Conversation Model
175. Getting or Creating New Conversation
176. Sending Request to Get Conversation
177. Animation on Fetching Chat Info
178. Gifted Chat
179. Chat Screen
180. The Callback Issue
181. Empty Message UI
182. Communication With Socket
183. Simple Communication Using Socket
184. Sending The Actual Message
185. Storing Messages to Database
186. New Conversation Store
187. Reading Conversation by ID
188. Updating UI on New Message
189. Fetching Old Chats
190. Getting Last Conversations Part 1
191. Getting Last Conversations Part 2
192. Let's Understand
193. Last Chats
194. Last Chats UI Part 1
195. Formatting Date
196. Last Chat UI Part 2
197. On Recent Chat Press
198. Message Indicator
199. Updating Viewed Property
200. Update See On Live Chat