Learn React Native Course with Internship
React Native allows you to build native mobile apps using JavaScript and React. Learn to build production-ready, native mobile apps on both iOS and Android from scratch in this course. Our internship program will help you make your first app, create style sheets, work with flexbox, add data points to a list, collect user data, implement navigation, and more.
Overview
React Native enables developers to build apps for both iOS and Android platforms using a single codebase, which helps save time and resources. It uses native components instead of web components, resulting in more efficient and performant apps. Additionally, it offers hot reloading, which makes the development process faster and easier.
Our React Native course teaches you how to build native mobile applications using React and JavaScript. This course covers the basics of React, including components, state, and props, which form the backbone of React apps. It will also help you develop advanced skills in using React Native, including styling components, building lists, and handling user inputs.
In addition to React and React Native, you will also learn about front-end development languages such as HTML, CSS, and JavaScript, as well as tools such as JSX and code editors like Expo and Visual Studio Code. By the end of the course, you will have the skills and knowledge necessary to start a career in mobile app development with an internship and certificate.
To take this course, you should have knowledge of JavaScript and internet navigation skills. A willingness to code and a desire to become a mobile app developer is also important. With our course, you will learn to create production-ready, native mobile apps for iOS and Android from scratch.
Curriculum
- 20 Sections
- 351 Lessons
- 8 Weeks
- Getting Started16
- 1.1Welcome!
- 1.2What is React Native?
- 1.3Join our Online Learning Community
- 1.4Expo vs React Native CLI
- 1.5How React Native Works
- 1.6Node.js Download
- 1.7Creating Our First React Native App
- 1.8Working on Our First App
- 1.9React Native Apps Are Hard Work!
- 1.10React Native Alternatives
- 1.11Course Requirements
- 1.12Course Requirement Refreshers
- 1.13Running the App on an Android Emulator
- 1.14Course Outline
- 1.15How to get the Most out of This Course
- 1.16Useful Resources & Links
- JavaScript Refresher14
- 2.1Module Introduction
- 2.2JavaScript – A Summary
- 2.3Project Setup
- 2.4Core Syntax Refresher
- 2.5let & const
- 2.6Arrow Functions
- 2.7Objects: Properties & Methods
- 2.8Arrays & Array Methods
- 2.9Arrays, Objects & Reference Types
- 2.10Spread Operator & Rest Parameters
- 2.11Destructuring
- 2.12Async Code & Promises
- 2.13Wrap Up
- 2.14Module Resources
- React.js Refresher15
- 3.1Module Introduction
- 3.2What is React
- 3.3A Starting Project
- 3.4Understanding JSX
- 3.5Understanding Components
- 3.6Working with Multiple Components
- 3.7Working with Props
- 3.8Rendering Lists of Data
- 3.9Handling Events
- 3.10Parent-Child Communication
- 3.11Managing State
- 3.12More on State
- 3.13User Input & Two-Way Binding
- 3.14Wrap Up
- 3.15Module Resources
- Diving into the Basics [COURSE GOALS APP]26
- 4.1Module Introduction
- 4.2How to work with React Native Components
- 4.3Setting Up A New Project
- 4.4Planning the App
- 4.5Working with Core Components
- 4.6Getting Started with Styles
- 4.7Flexbox & Layouts (Intro)
- 4.8React Native Flexbox Deep Dive
- 4.9Inline Styles & StyleSheet Objects
- 4.10Components, Styles, Layouts
- 4.11Working with State & Events
- 4.12Outputting a List of Items
- 4.13Styling List Items
- 4.14Making it Scrollable with ScrollView!
- 4.15A Better List: FlatList
- 4.16More Components & Lists
- 4.17Splitting the App Into Components
- 4.18Passing Data Between Components
- 4.19Working with Touchable Components
- 4.20Deleting Items
- 4.21Adding a Modal Overlay
- 4.22More Flexbox Styling
- 4.23Closing the Modal & Clearing Input
- 4.24Finishing the Modal Styling
- 4.25Wrap Up
- 4.26Useful Resources & Links
- Debugging React Native Apps10
- 5.1Module Introduction
- 5.2What To Debug & How To Debug?
- 5.3Running the App on a Real Device & Debugging
- 5.4Handling Error Messages
- 5.5Understanding Code Flow with console.log()
- 5.6Using the Remote Debugger & Breakpoints
- 5.7Working with the Device DevTools Overlay
- 5.8Debugging the UI & Using React Native Debugger
- 5.9Wrap Up
- 5.10Useful Resources & Links
- Components, Styling, Layouts - Building Real Apps [GUESS A NUMBER APP]39
- 6.1Module Introduction
- 6.2Setup & App Planning
- 6.3Adding a Custom Header Component
- 6.4Adding a Screen Component
- 6.5Working on the Layout
- 6.6Styling a View as a “Card” Container (with Drop Shadows & Rounded Corners)
- 6.7React Native Styling vs CSS Styling
- 6.8Extracting a Card Component (Presentational Component)
- 6.9Components & Styling
- 6.10Color Theming with Constants
- 6.11Configuring & Styling a TextInput
- 6.12Cleaning User Input & Controlling the Soft Keyboard
- 6.13Resetting & Confirming User Input
- 6.14Configuring Components
- 6.15Showing an Alert
- 6.16Time to Finish the “Confirmation Box”
- 6.17Adding Random Number Generation
- 6.18Switching Between Multiple “Screens”
- 6.19Adding Game Features: Hints & Validation
- 6.20Checking the “Win” Condition with useEffect()
- 6.21Finishing the Game Logic
- 6.22Adding AppLoading
- 6.23Adding Custom Fonts
- 6.24Installing expo-font
- 6.25A Synthetic Style “Cascade”: Custom Wrapper Components & Global Styles
- 6.26Adding Local Images
- 6.27Styling Images
- 6.28Working with Network (Web) Images
- 6.29A Closer Look at the “Text” Component (and what you can do with it)
- 6.30vs – A Summary
- 6.31Building a Custom Button Component
- 6.32Adding Icons
- 6.33Exploring UI Libraries
- 6.34Managing Past Guesses as a List
- 6.35Styling List Items & Lists
- 6.36ScrollView & Flexbox (Yes, that works!)
- 6.37Using FlatList Instead of ScrollView
- 6.38Wrap Up
- 6.39Useful Resources & Links
- Responsive & Adaptive User Interfaces and Apps21
- 7.1Module Introduction
- 7.2Finding Improvement Opportunities
- 7.3Working with More Flexible Styling Rules
- 7.4Introducing the Dimensions API
- 7.5Using Dimensions in “if” Checks
- 7.6Calculating Sizes Dynamically
- 7.7Problems with Different Device Orientations
- 7.8Controlling Orientation & Using the KeyboardAvoidingView
- 7.9Listening to Orientation Changes
- 7.10Rendering Different Layouts
- 7.11Fixing the GameOver Screen
- 7.12Updating All Code to Update Dynamically
- 7.13The Dimensions API & Responsive UIs
- 7.14Expo’s ScreenOrientation API
- 7.15Introducing the Platform API
- 7.16Working with Platform.select() and Platform in “if” Checks
- 7.17Using Platform-specific Code Files
- 7.18The Platform API
- 7.19Using the SafeAreaView
- 7.20Wrap Up
- 7.21Useful Resources & Links
- Navigation with React Navigation [THE MEALS APP]43
- 8.1Module Introduction
- 8.2Planning the App
- 8.3Adding Screens
- 8.4Adding AppLoading
- 8.5Adding Fonts
- 8.6React Navigation Docs
- 8.7Installing React Navigation & Adding Navigation to the App
- 8.8MUST READ: Installing Different Navigators
- 8.9Creating a StackNavigator
- 8.10React Navigation & Code Attachments
- 8.11Navigating Between Screens
- 8.12Alternative Navigation Syntax
- 8.13Navigation Basics
- 8.14Navigation to the “Meal Details” Screen
- 8.15Pushing, Popping & Replacing
- 8.16Outputting a Grid of Categories
- 8.17Configuring the Header with Navigation Options
- 8.18Passing & Reading Params Upon Navigation
- 8.19Setting Dynamic Navigation Options
- 8.20Default Navigation Options & Config
- 8.21Navigation Params & Configuration
- 8.22Grid Styling & Some Refactoring
- 8.23Adding Meal Models & Data
- 8.24Loading Meals for Categories
- 8.25Rendering a Meals List
- 8.26Passing Data to the Meal Detail Screen
- 8.27Adding Header Buttons
- 8.28Fixing the Shadows
- 8.29Adding Tabs-based Navigation
- 8.30Setting Icons and Configuring Tabs
- 8.31navigationOptions inside of a Navigator
- 8.32Adding Material Bottom Tabs
- 8.33Adding a Favorites Stack
- 8.34Adding a Menu Button & Drawer Navigation
- 8.35Configuring the Drawer
- 8.36More Navigation Config & Styling
- 8.37Adding a DefaultText Component
- 8.38Adding the MealDetail Screen Content
- 8.39Time for the “Filters” Screen Content!
- 8.40Passing Data Between Component & Navigation Options (Header)
- 8.41[React Refresher] useEffect() & useCallback()
- 8.42Wrap Up
- 8.43Useful Resources & Links
- State Management & Redux13
- 9.1Module Introduction
- 9.2What is State & What is Redux?
- 9.3Redux & Store Setup
- 9.4Selecting State Slices
- 9.5Redux Data & Navigation Options
- 9.6Dispatching Actions & Reducer Logic
- 9.7Switching the Favorites Icon
- 9.8Rendering a Fallback Text
- 9.9Adding Filtering Logic
- 9.10Dispatching Filter Actions
- 9.11Debugging Redux in React Native Apps
- 9.12Wrap Up
- 9.13Useful Resources & Links
- Time to Practice - THE SHOP APP28
- 10.1Module Introduction
- 10.2Planning the App
- 10.3Creating the Basic Project Setup
- 10.4The Products Overview Screen
- 10.5Setting Up a Navigator
- 10.6Styling the Product Items
- 10.7Adding Touchable Components
- 10.8Working on the Product Details Screen
- 10.9Using Custom Fonts
- 10.10Adding Items to the Cart
- 10.11Implementing Header Buttons
- 10.12Outputting Cart Items
- 10.13Adding Logic to Delete Items
- 10.14Adding Redux Logic for Orders
- 10.15SideDrawer & The Orders Screen
- 10.16Clearing the Cart
- 10.17Styling Order Items
- 10.18Making the “Show Details” Button Work
- 10.19Building the “User Products” Screen
- 10.20Reorganizing the ProductItem Component
- 10.21Deleting Items
- 10.22Adding Basic Editing & Navigation Logic
- 10.23Handling User Input
- 10.24Using Params to Submit User Input
- 10.25Dispatching Actions for Creating & Updating
- 10.26Time to Improve the App!
- 10.27Wrap Up
- 10.28Useful Resources & Links
- Handling User Input10
- 11.1Module Introduction
- 11.2Configuring TextInputs
- 11.3Adding Basic Validation
- 11.4Getting Started with useReducer()
- 11.5Finishing the Merged Form & Input Management
- 11.6Moving Input Logic Into A Separate Component
- 11.7Connecting Input Component & Form
- 11.8Tweaking Styles & Handling the Soft Keyboard
- 11.9Alternatives & Wrap Up
- 11.10Useful Resources & Links
- Http Requests & Adding a Web Server + Database15
- 12.1Module Introduction
- 12.2Setup & How To Send Requests
- 12.3Installing Redux Thunk
- 12.4Storing Products on a Server
- 12.5Fetching Products from the Server
- 12.6Displaying a Loading Spinner & Handling Errors
- 12.7Setting Up a Navigation Listener
- 12.8Updating & Deleting Products
- 12.9Handling Additional Errors
- 12.10Storing Orders
- 12.11Displaying an ActivityIndicator
- 12.12Fetching Stored Orders
- 12.13Adding “Pull to Refresh”
- 12.14Wrap Up
- 12.15Useful Resources & Links
- User Authentication15
- 13.1Module Introduction
- 13.2How Authentication Works
- 13.3Implementing a Basic Login Screen
- 13.4Adding User Signup
- 13.5Logging Users In
- 13.6Managing the Loading State & Errors
- 13.7Using the Token
- 13.8Mapping Orders to Users
- 13.9Improved Mapping (Scoping)
- 13.10Implementing “Auto Login”
- 13.11Adding Logout
- 13.12Implementing “Auto Logout”
- 13.13Auto-Logout & Android (Warning)
- 13.14Wrap Up
- 13.15Useful Resources & Links
- Native Device Features (Camera, Maps, Location, SQLite, ...) [GREAT PLACES APP]30
- 14.1Module Introduction
- 14.2Planning the App
- 14.3Navigation Setup in Next Lecture
- 14.4Screen & Navigation Setup
- 14.5Getting Started with the Form
- 14.6Redux & Adding Places
- 14.7Outputting a List of Places
- 14.8Accessing the Device Camera
- 14.9Configuring the Camera Access
- 14.10Using the Picked Image
- 14.11Storing the Image on the Filesystem
- 14.12Changed SQLite Import
- 14.13Diving into SQLite for Permanent Data Storage
- 14.14Storing Data in the Local Database
- 14.15Fetching Data from the Local Database
- 14.16Getting the User Location
- 14.17Showing a Map Preview of the Location
- 14.18More on Environment Variables
- 14.19Displaying an Interactive Map
- 14.20Adding a Marker
- 14.21Making the Picked Location “Saveable”
- 14.22Storing Picked Places
- 14.23Updating the Location Screen When the Location Changes
- 14.24Storing the Address
- 14.25Displaying the “Details” Screen
- 14.26Finishing the “Map” Screen
- 14.27Running the App on iOS
- 14.28Running the App on Android
- 14.29Wrap Up
- 14.30Useful Resources & Links
- Building Apps Without Expo10
- 15.1Module Introduction
- 15.2Alternatives to Expo
- 15.3Building Apps with Just the React Native CLI
- 15.4Live Reload and RN CLI Apps
- 15.5Important: Using React Native Image Picker
- 15.6Adding Native Modules to Non-Expo Apps
- 15.7Understanding Expo’s “Bare Workflow”
- 15.8Ejecting from Expo’s “Managed Workflow”
- 15.9When To Use Which?
- 15.10Useful Resources & Links
- Publishing React Native Apps11
- 16.1Module Introduction
- 16.2Deployment Steps
- 16.3Configuring the App & Publishing
- 16.4Configuring Icons & The Splash Screen
- 16.5Working with Offline Asset Bundles
- 16.6Using “Over the Air Updates” (OTA Updates)
- 16.7Building the Apps for Deployment (iOS & Android)
- 16.8Publishing iOS Apps without Expo
- 16.9Publishing Android Apps without Expo
- 16.10Configuring Android Apps
- 16.11Useful Resources & Links
- Updating to React Navigation 5+15
- 17.1Module Introduction
- 17.2What Changed?
- 17.3Preparing the Project
- 17.4More Information & Updating the Project Dependencies
- 17.5Moving from the “Registry-like” to the “Component-based” Navigation Config
- 17.6First Migration Steps
- 17.7Converting More Stack Navigators to the New Config
- 17.8Migrating the Drawer Navigation
- 17.9Replacing the “Switch” Navigator & Auth Flow
- 17.10Logout & Further Fixes/ Adjustments
- 17.11Extracting Screen Params
- 17.12Setting Screen Options Dynamically
- 17.13Remaining Migration Steps & Roundup
- 17.14A Summary Of All Important Changes
- 17.15Useful Resources & Links
- Push Notifications18
- 18.1Module Introduction
- 18.2Understanding Notifications
- 18.3Sending Local Notifications
- 18.4Getting Permissions
- 18.5Controlling How Notifications Are Displayed
- 18.6Reacting to Foreground Notifications
- 18.7Reacting to Background Notifications
- 18.8How Push Notifications Work
- 18.9Expo & Push Notifications
- 18.10Getting a Push Token
- 18.11Sending Push Notifications
- 18.12Using Expo’s Push Server
- 18.13More on Push Tokens
- 18.14Adding Push Notifications to the Shop App (1/3)
- 18.15Adding Push Notifications to the Shop App (2/3)
- 18.16Adding Push Notifications to the Shop App (3/3)
- 18.17Push Notifications in non-Expo Managed Apps
- 18.18Module Resources
- Course Roundup & Next Steps1
- Bonus1