Become an Expert Mobile Apps Developer and Start Freelancing Career to Earn Money Online
Mobile apps are one of the best ways to engage with users – no wonder everyone wants to build one! Wouldn’t it be great if you could use your web development knowledge, combined with your React knowledge, to build mobile apps with that? That’s exactly what …
Overview
Mobile apps are one of the best ways to engage with users – no wonder everyone wants to build one!
Wouldn’t it be great 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 animate React Native apps, 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 “Awesome 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
Who this course is for:
- Anyone who wants to use React to build native mobile apps
- Every mobile developer who wishes to learn only one language to write cross-platform mobile apps
- Every mobile or web developer who’s interested in writing high-performance native apps with JavaScript
Curriculum
- 2 Sections
- 869 Lessons
- 12 Weeks
- Learn React Js, Professional Training Course with Internship526
- 1.1Getting Started
- 1.2Introduction
- 1.3Join our Online Learning Community
- 1.4Real-World SPAs & React Web Apps
- 1.5Writing our First React Code
- 1.6Why Should we Choose React?
- 1.7React Alternatives
- 1.8Understanding Single Page Applications and Multi Page Applications
- 1.9Course Outline
- 1.10How to get the Most out of This Course
- 1.11Useful Resources & Links
- 1.12Refreshing Next Generation JavaScript (Optional)
- 1.13Module Introduction
- 1.14Understanding “let” and “const”
- 1.15Arrow Functions
- 1.16Exports and Imports
- 1.17Understanding Classes
- 1.18Classes, Properties and Methods
- 1.19The Spread & Rest Operator
- 1.20Destructuring
- 1.21Reference and Primitive Types Refresher
- 1.22Refreshing Array Functions
- 1.23Wrap Up
- 1.24Next-Gen JavaScript – Summary
- 1.25JS Array Functions
- 1.26Understanding the Base Features & Syntax
- 1.27Module Introduction
- 1.28The Build Workflow
- 1.29Using Create React App
- 1.30Understanding the Folder Structure
- 1.31Understanding Component Basics
- 1.32Understanding JSX
- 1.33JSX Restrictions
- 1.34Creating a Functional Component
- 1.35Components & JSX Cheat Sheet
- 1.36Working with Components & Re-Using Them
- 1.37Outputting Dynamic Content
- 1.38Working with Props
- 1.39Understanding the “children” Prop
- 1.40Understanding & Using State
- 1.41Props & State
- 1.42Handling Events with Methods
- 1.43To Which Events Can You Listen?
- 1.44Manipulating the State
- 1.45Function Components Naming
- 1.46Using the useState() Hook for State Manipulation
- 1.47Stateless vs Stateful Components
- 1.48Passing Method References Between Components
- 1.49Adding Two Way Binding
- 1.50Adding Styling with Stylesheets
- 1.51Working with Inline Styles
- 1.52Time to Practice – The Base Syntax
- 1.53[OPTIONAL] Assignment Solution
- 1.54Useful Resources & Links
- 1.55Working with Lists and Conditionals
- 1.56Module Introduction
- 1.57Rendering Content Conditionally
- 1.58Handling Dynamic Content “The JavaScript Way”
- 1.59Outputting Lists (Intro)
- 1.60Outputting Lists
- 1.61Lists & State
- 1.62Updating State Immutably
- 1.63Lists & Keys
- 1.64Flexible Lists
- 1.65Wrap Up
- 1.66Time to Practice – Lists & Conditionals
- 1.67[OPTIONAL] Assignment Solution
- 1.68Useful Resources & Links
- 1.69Styling React Components & Elements
- 1.70Module Introduction
- 1.71Outlining the Problem Set
- 1.72Setting Styles Dynamically
- 1.73Setting Class Names Dynamically
- 1.74Adding and Using Radium
- 1.75Using Radium for Media Queries
- 1.76Introducing Styled Components
- 1.77More on Styled Components
- 1.78Styled Components & Dynamic Styles
- 1.79Working with CSS Modules
- 1.80CSS Modules & Media Queries
- 1.81More on CSS Modules
- 1.82Useful Resources & Links
- 1.83Debugging React Apps
- 1.84Module Introduction
- 1.85Understanding Error Messages
- 1.86Finding Logical Errors by using Dev Tools & Sourcemaps
- 1.87Working with the React Developer Tools
- 1.88Using Error Boundaries (React 16+)
- 1.89Wrap Up
- 1.90Useful Resources & Links
- 1.91Diving Deeper into Components & React Internals
- 1.92Module Introduction
- 1.93A Better Project Structure
- 1.94Splitting an App Into Components
- 1.95Comparing Stateless and Stateful Components
- 1.96Class-based vs Functional Components
- 1.97class Component Lifecycle Overview
- 1.98Component Creation Lifecycle in Action
- 1.99Component Update Lifecycle (for props Changes)
- 1.100Component Update Lifecycle (for state Changes)
- 1.101Using useEffect() in Functional Components
- 1.102Controlling the useEffect() Behavior
- 1.103Cleaning up with Lifecycle Hooks & useEffect()
- 1.104Cleanup Work with useEffect() – Example
- 1.105Using should Component Update for Optimization
- 1.106Optimizing Functional Components with React.memo()
- 1.107When should you optimize?
- 1.108PureComponents instead of should Component Update
- 1.109How React Updates the DOM
- 1.110Rendering Adjacent JSX Elements
- 1.111Windows Users Must Read
- 1.112Using React.Fragment
- 1.113Higher Order Components (HOC) – Introduction
- 1.114Another Form of HOCs
- 1.115Passing Unknown Props
- 1.116Setting State Correctly
- 1.117Using PropTypes
- 1.118Using Refs
- 1.119Refs with React Hooks
- 1.120Understanding Prop Chain Problems
- 1.121Using the Context API
- 1.122ContextType & useContext()
- 1.123Wrap Up
- 1.124Useful Resources & Links
- 1.125A Real App: The Burger Builder (Basic Version)
- 1.126About React Hooks
- 1.127Module Introduction
- 1.128Planning an App in React – Core Steps
- 1.129Planning our App – Layout and Component Tree
- 1.130Planning the State
- 1.131MUST READ: Enabling CSS Modules
- 1.132Setting up the Project
- 1.133Creating a Layout Component
- 1.134Starting Implementation of The Burger Builder Container
- 1.135Adding a Dynamic Ingredient Component
- 1.136Adding Prop Type Validation
- 1.137Starting the Burger Component
- 1.138Outputting Burger Ingredients Dynamically
- 1.139Calculating the Ingredient Sum Dynamically
- 1.140Adding the Build Control Component
- 1.141Outputting Multiple Build Controls
- 1.142Connecting State to Build Controls
- 1.143Removing Ingredients Safely
- 1.144Displaying and Updating the Burger Price
- 1.145Adding the Order Button
- 1.146Creating the Order Summary Modal
- 1.147Showing & Hiding the Modal (with Animation!)
- 1.148Implementing the Backdrop Component
- 1.149Adding a Custom Button Component
- 1.150Implementing the Button Component
- 1.151Adding the Price to the Order Summary
- 1.152Adding a Toolbar
- 1.153Using a Logo in our Application
- 1.154Adding Reusable Navigation Items
- 1.155Creating a Responsive Sidedrawer
- 1.156Working on Responsive Adjustments
- 1.157More about Responsive Adjustments
- 1.158Reusing the Backdrop
- 1.159Adding a Sidedrawer Toggle Button
- 1.160Adding a Hamburger Icon
- 1.161Improving the App – Introduction
- 1.162Prop Type Validation
- 1.163Improving Performance
- 1.164Using Component Lifecycle Methods
- 1.165Changing the Folder Structure
- 1.166Wrap Up
- 1.167Useful Resources & Links
- 1.168Reaching out to the Web (Http / Ajax)
- 1.169Module Introduction
- 1.170Understanding Http Requests in React
- 1.171Understanding our Project and Introducing Axios
- 1.172Creating a Http Request to GET Data
- 1.173Rendering Fetched Data to the Screen
- 1.174Transforming Data
- 1.175Making a Post Selectable
- 1.176Fetching Data on Update (without Creating Infinite Loops)
- 1.177Posting Data to the Server
- 1.178Sending a DELETE Request
- 1.179Fixing a Bug
- 1.180Handling Errors Locally
- 1.181Adding Interceptors to Execute Code Globally
- 1.182Removing Interceptors
- 1.183Setting a Default Global Configuration for Axios
- 1.184Creating and Using Axios Instances
- 1.185Wrap Up
- 1.186Useful Resources & Links
- 1.187Burger Builder Project: Accessing a Server
- 1.188Module Introduction
- 1.189Firebase & The Right Database
- 1.190Creating the Firebase Project
- 1.191Creating the Axios Instance
- 1.192Sending a POST Request
- 1.193Displaying a Spinner while Sending a Request
- 1.194Handling Errors
- 1.195Retrieving Data from the Backend
- 1.196Removing Old Interceptors
- 1.197Useful Resources & Links
- 1.198Multi-Page-Feeling in a Single-Page-App: Routing
- 1.199Module Introduction
- 1.200Routing and SPAs
- 1.201Setting Up Links
- 1.202Setting Up the Router Package
- 1.203react-router vs react-router-dom
- 1.204Preparing the Project For Routing
- 1.205Setting Up and Rendering Routes
- 1.206Rendering Components for Routes
- 1.207Switching Between Pages
- 1.208Using Links to Switch Pages
- 1.209Using Routing-Related Props
- 1.210The “withRouter” HOC & Route Props
- 1.211Absolute vs Relative Paths
- 1.212Absolute vs Relative Paths (Article)
- 1.213Styling the Active Route
- 1.214Passing Route Parameters
- 1.215Extracting Route Parameters
- 1.216Parsing Query Parameters & the Fragment
- 1.217Using Switch to Load a Single Route
- 1.218Navigating Programmatically
- 1.219Additional Information Regarding Active Links
- 1.220Understanding Nested Routes
- 1.221Creating Dynamic Nested Routes
- 1.222Redirecting Requests
- 1.223Conditional Redirects
- 1.224Using the History Prop to Redirect (Replace)
- 1.225Working with Guards
- 1.226Handling the 404 Case (Unknown Routes)
- 1.227Loading Routes Lazily
- 1.228Lazy Loading with React Suspense (16.6)
- 1.229Routing and Server Deployment
- 1.230Time to Practice – Routing
- 1.231Wrap Up
- 1.232Useful Resources & Links
- 1.233Adding Routing to our Burger Project
- 1.234Module Introduction
- 1.235Building the Checkout Container
- 1.236Setting Up Routing & Routes
- 1.237Navigating to the Checkout Page
- 1.238Navigating Back & To Next Page
- 1.239Passing Ingredients via Query Params
- 1.240Navigating to the Contact Data Component
- 1.241Order Submission & Passing Data Between Pages
- 1.242Adding an Orders Page
- 1.243Implementing Navigation Links
- 1.244Fetching Orders
- 1.245Outputting the Orders
- 1.246Wrap Up
- 1.247Useful Resources & Links
- 1.248Forms and Form Validation
- 1.249Module Introduction
- 1.250Analyzing the App
- 1.251Creating a Custom Dynamic Input Component
- 1.252Setting Up a JS Config for the Form
- 1.253Dynamically Create Inputs based on JS Config
- 1.254Adding a Dropdown Component
- 1.255Handling User Input
- 1.256Handling Form Submission
- 1.257Adding Custom Form Validation
- 1.258Fixing a Common Validation Gotcha
- 1.259Adding Validation Feedback
- 1.260Improving Visual Feedback
- 1.261Showing Error Messages
- 1.262Handling Overall Form Validity
- 1.263Working on an Error
- 1.264Fixing a Bug
- 1.265Useful Resources & Links
- 1.266Redux
- 1.267Module Introduction
- 1.268Understanding State
- 1.269The Complexity of Managing State
- 1.270Understanding the Redux Flow
- 1.271Setting Up Reducer and Store
- 1.272Dispatching Actions
- 1.273Adding Subscriptions
- 1.274Connecting React to Redux
- 1.275Connecting the Store to React
- 1.276Dispatching Actions from within the Component
- 1.277Time to Practice – Dispatching Actions
- 1.278Passing and Retrieving Data with Action
- 1.279Switch-Case in the Reducer
- 1.280Updating State Immutably
- 1.281Updating Arrays Immutably
- 1.282Immutable Update Patterns
- 1.283Outsourcing Action Types
- 1.284Combining Multiple Reducers
- 1.285Understanding State Types
- 1.286Time to Practice – Redux Basics
- 1.287[OPTIONAL] Assignment Solution
- 1.288Combining Local UI State and Redux
- 1.289Wrap Up
- 1.290Useful Resources & Links
- 1.291Adding Redux to our Project
- 1.292Module Introduction
- 1.293Installing Redux and React Redux
- 1.294Basic Redux Setup
- 1.295Finishing the Reducer for Ingredients
- 1.296Connecting the Burger Builder Container to our Store
- 1.297Working on the Total Price Calculation
- 1.298Redux & UI State
- 1.299Adjusting Checkout and Contact Data
- 1.300Wrap Up
- 1.301Useful Resources & Links
- 1.302Redux Advanced
- 1.303Module Introduction
- 1.304Adding Middleware
- 1.305Using the Redux Devtools
- 1.306Executing Asynchronous Code – Introduction
- 1.307Introducing Action Creators
- 1.308Action Creators & Async Code
- 1.309Handling Asynchronous Code
- 1.310Restructuring Actions
- 1.311Where to Put Data Transforming Logic?
- 1.312Using Action Creators and Get State
- 1.313Using Utility Functions
- 1.314A Leaner Switch Case Statement
- 1.315An Alternative Folder Structure
- 1.316Diving Much Deeper
- 1.317Wrap Up
- 1.318Useful Resources & Links
- 1.319Redux Advanced: Burger Project
- 1.320Module Introduction
- 1.321Installing the Redux Devtools
- 1.322Preparing the Folder Structure
- 1.323Creating Action Creators
- 1.324Executing Asynchronous Code
- 1.325Fetching Ingredients Asynchronously
- 1.326Initializing Ingredients in the BurgerBuilder
- 1.327Changing the Order of our Ingredients Manually
- 1.328Adding Order Actions
- 1.329Connecting Contact Data Container & Actions
- 1.330The Order Reducer
- 1.331Working on Order Actions
- 1.332Redirect to Improve UX
- 1.333Combining Reducers
- 1.334Handling Purchases & Updating the UI
- 1.335Resetting the Price after Purchases
- 1.336Fetching Orders (via Redux)
- 1.337Checking our Implemented Functionalities
- 1.338Refactoring Reducers
- 1.339Refactoring Reducers Continued
- 1.340Wrap Up
- 1.341Useful Resources & Links
- 1.342Adding Authentication to our Burger Project
- 1.343Module Introduction
- 1.344Understanding Authentication in Single Page Applications
- 1.345Required App Adjustments
- 1.346Adding an Auth Form
- 1.347Adding Actions
- 1.348Getting a Token from the Backend
- 1.349Adding Sign-In
- 1.350Storing the Token
- 1.351Adding a Spinner
- 1.352Logging Users Out
- 1.353Accessing Protected Resources
- 1.354Updating the UI Depending on Auth State
- 1.355Adding a Logout Link
- 1.356Forwarding Unauthenticated Users
- 1.357Redirecting the User to the Checkout Page
- 1.358Persistent Auth State with localStorage
- 1.359Fixing Connect + Routing Errors
- 1.360Ensuring App Security
- 1.361Guarding Routes
- 1.362Displaying User Specific Orders
- 1.363Wrap Up
- 1.364Useful Resources & Links
- 1.365Improving our Burger Project
- 1.366Module Introduction
- 1.367Fixing the Redirect to the Frontpage
- 1.368Using updateObject in the Entire App
- 1.369Sharing the Validation Method
- 1.370Using Environment Variables
- 1.371Removing console.log()s
- 1.372Adding Lazy Loading
- 1.373Wrap Up
- 1.374Useful Resources & Links
- 1.375Testing
- 1.376Module Introduction
- 1.377What is Testing?
- 1.378Required Testing Tools
- 1.379What To Test?
- 1.380Writing our First Test
- 1.381Testing Components Continued
- 1.382Jest and Enzyme Documentations
- 1.383Testing Components Correctly
- 1.384Testing Containers
- 1.385How to Test Redux
- 1.386Wrap Up
- 1.387Useful Resources & Links
- 1.388Deploying the App to the Web
- 1.389Module Introduction
- 1.390Deployment Steps
- 1.391Building the Project
- 1.392Example: Deploying on Firebase
- 1.393Wrap Up
- 1.394Useful Resources & Links
- 1.395Bonus: Working with Webpack
- 1.396Module Introduction
- 1.397DON’T SKIP: Webpack Versions
- 1.398Introducing Webpack
- 1.399How Webpack works
- 1.400Basic Workflow Requirements
- 1.401Project & npm Setup
- 1.402Creating a Basic Folder & File Structure
- 1.403Creating the Basic React Application
- 1.404Installing Production Dependencies
- 1.405Setting Up the Basic Webpack Config
- 1.406Adding File Rules & Babel
- 1.407Loading CSS Files
- 1.408Loading Images & Injecting into HTML Page
- 1.409Production Workflow & Wrap Up
- 1.410Adding babel-polyfill
- 1.411Useful Resources & Links
- 1.412Bonus: Next.js
- 1.413Module Introduction
- 1.414Understanding Server Side Rendering
- 1.415Setting Up a Project
- 1.416Understanding the Basics
- 1.417Next.js & Components & Pages
- 1.418Styling our App in Next.js
- 1.419Handling (404) Errors
- 1.420A Special Lifecycle Hook
- 1.421Useful Resources & Links
- 1.422Deploying our App
- 1.423Bonus: Animations in React Apps
- 1.424Module Introduction
- 1.425Preparing the Demo Project
- 1.426Using CSS Transitions
- 1.427Using CSS Animations
- 1.428CSS Transition & Animations Limitations
- 1.429Using ReactTransitionGroup
- 1.430Using the Transition Component
- 1.431Wrapping the Transition Component
- 1.432Animation Timings
- 1.433Transition Events
- 1.434Customizing CSS Classnames
- 1.435The CSSTransition Component
- 1.436Animating Lists
- 1.437Alternative Animation Packages
- 1.438Wrap Up
- 1.439Useful Resources & Links
- 1.440Bonus: A Brief Introduction to Redux Saga
- 1.441Module Introduction
- 1.442Installing Redux Saga
- 1.443Creating our First Saga
- 1.444Hooking the Saga Up (to the Store and Actions)
- 1.445Moving Logic from the Action Creator to a Saga
- 1.446Moving More Logic Into Sagas
- 1.447Handling Authentication with a Saga
- 1.448Handling Auto-Sign-In with a Saga
- 1.449Moving the BurgerBuilder Side Effects into a Saga
- 1.450Moving the Orders Side Effects into Sagas
- 1.451Why Sagas can be Helpful
- 1.452Diving Deeper into Sagas
- 1.453Useful Resources & Links
- 1.454React Hooks
- 1.455Introduction
- 1.456What are “React Hooks”?
- 1.457The Starting Project
- 1.458Getting Started with useState()
- 1.459More on useState() & State Updating
- 1.460Array Destructuring
- 1.461Multiple States
- 1.462Rules of Hooks
- 1.463Passing State Data Across Components
- 1.464Time to Practice: Hooks Basics
- 1.465Sending Http Requests
- 1.466useEffect() & Loading Data
- 1.467Understanding useEffect() Dependencies
- 1.468More on useEffect()
- 1.469What’s useCallback()?
- 1.470Working with Refs & useRef()
- 1.471Cleaning Up with useEffect()
- 1.472Deleting Ingredients
- 1.473Loading Errors & State Batching
- 1.474More on State Batching & State Updates
- 1.475Understanding useReducer()
- 1.476Using useReducer() for the Http State
- 1.477Working with useContext()
- 1.478Performance Optimizations with useMemo()
- 1.479Getting Started with Custom Hooks
- 1.480Sharing Data Between Custom Hooks & Components
- 1.481Using the Custom Hook
- 1.482Wrap Up
- 1.483Using Hooks in the Burger Builder
- 1.484Introduction
- 1.485Converting
- 1.486Routing with React.lazy()
- 1.487Converting the Layout Component
- 1.488Converting withErrorHandler HOC
- 1.489Adjusting the Order & Checkout Containers
- 1.490Add Hooks to ContactData
- 1.491Converting the BurgerBuilder Container
- 1.492Adjusting Auth & Logout Components
- 1.493Using React.memo() & More!
- 1.494Adding a Custom Error Handling Hook
- 1.495Setting the right useEffect() Dependencies
- 1.496Working with useSelector() and useDispatch()
- 1.497Wrap Up
- 1.498Useful Resources & Links
- 1.499Bonus: Replacing Redux with React Hooks
- 1.500Module Introduction
- 1.501Starting Project & Why You Would Replace Redux
- 1.502Alternative: Using the Context API
- 1.503Toggling Favorites with the Context API
- 1.504Context API Summary (and why NOT to use it instead of Redux)
- 1.505Getting Started with a Custom Hook as a Store
- 1.506Finishing the Store Hook
- 1.507Creating a Concrete Store
- 1.508Using the Custom Store
- 1.509Custom Hook Store Summary
- 1.510Optimizing the Custom Hook Store
- 1.511Bonus: Managing Multiple State Slices with the Custom Store Hook
- 1.512Wrap Up
- 1.513Useful Resources & Links
- 1.514Bonus: Building the Burger CSS
- 1.515Building the Burger CSS Code
- 1.516Next Steps and Course Roundup
- 1.517Module Introduction
- 1.518More Inspiration: Real-World Projects Built with React
- 1.519React Rocks! Where to find more Examples
- 1.520Static React Apps with Gatsby.js
- 1.521Introducing React Native
- 1.522Component Libraries (Example: Material UI)
- 1.523Smaller Apps with Preact
- 1.524Comparing React with Preact
- 1.525Congratulations
- 1.526Bonus: More Content!
- Learn React Native, Professional Training Course with Internship343
- 2.1Getting Started
- 2.2What is React Native?
- 2.3Join our Online Learning Community
- 2.4How React Native Works
- 2.5Expo vs React Native CLI
- 2.6Node.js Download
- 2.7Creating Our First React Native App
- 2.8Working on Our First App
- 2.9React Native Apps Are Hard Work!
- 2.10React Native Alternatives
- 2.11Course Requirements
- 2.12Course Requirement Refreshers
- 2.13Running the App on an Android Emulator
- 2.14Running the App on an iOS Simulator
- 2.15Course Outline
- 2.16How to get the Most out of This Course
- 2.17Useful Resources & Links
- 2.18JavaScript Refresher
- 2.19Module Introduction
- 2.20JavaScript – A Summary
- 2.21Project Setup
- 2.22Core Syntax Refresher
- 2.23let & const
- 2.24Arrow Functions
- 2.25Objects: Properties & Methods
- 2.26Arrays & Array Methods
- 2.27Arrays, Objects & Reference Types
- 2.28Spread Operator & Rest Parameters
- 2.29Destructuring
- 2.30Async Code & Promises
- 2.31Wrap Up
- 2.32Module Resources
- 2.33React.js Refresher
- 2.34Module Introduction
- 2.35What is React
- 2.36A Starting Project
- 2.37Understanding JSX
- 2.38Understanding Components
- 2.39Working with Multiple Components
- 2.40Working with Props
- 2.41Rendering Lists of Data
- 2.42Handling Events
- 2.43Parent-Child Communication
- 2.44Managing State
- 2.45More on State
- 2.46User Input & Two-Way Binding
- 2.47Wrap Up
- 2.48Module Resources
- 2.49Diving into the Basics [COURSE GOALS APP]
- 2.50Module Introduction
- 2.51How to work with React Native Components
- 2.52Setting Up A New Project
- 2.53Planning the App
- 2.54Working with Core Components
- 2.55Getting Started with Styles
- 2.56Flexbox & Layouts (Intro)
- 2.57React Native Flexbox Deep Dive
- 2.58Inline Styles & StyleSheet Objects
- 2.59Components, Styles, Layouts
- 2.60Working with State & Events
- 2.61Outputting a List of Items
- 2.62Styling List Items
- 2.63Making it Scrollable with ScrollView!
- 2.64A Better List: FlatList
- 2.65More Components & Lists
- 2.66Splitting the App Into Components
- 2.67Passing Data Between Components
- 2.68Working with Touchable Components
- 2.69Deleting Items
- 2.70Adding a Modal Overlay
- 2.71More Flexbox Styling
- 2.72Closing the Modal & Clearing Input
- 2.73Finishing the Modal Styling
- 2.74Wrap Up
- 2.75Useful Resources & Links
- 2.76Debugging React Native Apps
- 2.77Module Introduction
- 2.78What To Debug & How To Debug?
- 2.79Running the App on a Real Device & Debugging
- 2.80Handling Error Messages
- 2.81Understanding Code Flow with console.log()
- 2.82Using the Remote Debugger & Breakpoints
- 2.83Working with the Device DevTools Overlay
- 2.84Debugging the UI & Using React Native Debugger
- 2.85Wrap Up
- 2.86Useful Resources & Links
- 2.87Components, Styling, Layouts – Building Real Apps [GUESS A NUMBER APP]
- 2.88Module Introduction
- 2.89Setup & App Planning
- 2.90Adding a Custom Header Component
- 2.91Adding a Screen Component
- 2.92Working on the Layout
- 2.93Styling a View as a “Card” Container (with Drop Shadows & Rounded Corners)
- 2.94React Native Styling vs CSS Styling
- 2.95Extracting a Card Component (Presentational Component)
- 2.96Components & Styling
- 2.97Color Theming with Constants
- 2.98Configuring & Styling a TextInput
- 2.99Cleaning User Input & Controlling the Soft Keyboard
- 2.100Resetting & Confirming User Input
- 2.101Configuring Components
- 2.102Showing an Alert
- 2.103Time to Finish the “Confirmation Box”
- 2.104Adding Random Number Generation
- 2.105Switching Between Multiple “Screens”
- 2.106Adding Game Features: Hints & Validation
- 2.107Checking the “Win” Condition with useEffect()
- 2.108Finishing the Game Logic
- 2.109Adding AppLoading
- 2.110Adding Custom Fonts
- 2.111Installing expo-font
- 2.112A Synthetic Style “Cascade”: Custom Wrapper Components & Global Styles
- 2.113Adding Local Images
- 2.114Styling Images
- 2.115Working with Network (Web) Images
- 2.116A Closer Look at the “Text” Component (and what you can do with it)
- 2.117vs – A Summary
- 2.118Building a Custom Button Component
- 2.119Adding Icons
- 2.120Exploring UI Libraries
- 2.121Managing Past Guesses as a List
- 2.122Styling List Items & Lists
- 2.123ScrollView & Flexbox (Yes, that works!)
- 2.124Using FlatList Instead of ScrollView
- 2.125Wrap Up
- 2.126Useful Resources & Links
- 2.127Responsive & Adaptive User Interfaces and Apps
- 2.128Module Introduction
- 2.129Finding Improvement Opportunities
- 2.130Working with More Flexible Styling Rules
- 2.131Introducing the Dimensions API
- 2.132Using Dimensions in “if” Checks
- 2.133Calculating Sizes Dynamically
- 2.134Problems with Different Device Orientations
- 2.135Controlling Orientation & Using the KeyboardAvoidingView
- 2.136Listening to Orientation Changes
- 2.137Rendering Different Layouts
- 2.138Fixing the GameOver Screen
- 2.139Updating All Code to Update Dynamically
- 2.140The Dimensions API & Responsive UIs
- 2.141Expo’s ScreenOrientation API
- 2.142Introducing the Platform API
- 2.143Working with Platform.select() and Platform in “if” Checks
- 2.144Using Platform-specific Code Files
- 2.145The Platform API
- 2.146Using the SafeAreaView
- 2.147Wrap Up
- 2.148Useful Resources & Links
- 2.149Navigation with React Navigation [THE MEALS APP]
- 2.150Module Introduction
- 2.151Planning the App
- 2.152Adding Screens
- 2.153Adding AppLoading
- 2.154Adding Fonts
- 2.155React Navigation Docs
- 2.156Installing React Navigation & Adding Navigation to the App
- 2.157MUST READ: Installing Different Navigators
- 2.158Creating a StackNavigator
- 2.159React Navigation & Code Attachments
- 2.160Navigating Between Screens
- 2.161Alternative Navigation Syntax
- 2.162Navigation Basics
- 2.163Navigation to the “Meal Details” Screen
- 2.164Pushing, Popping & Replacing
- 2.165Outputting a Grid of Categories
- 2.166Configuring the Header with Navigation Options
- 2.167Passing & Reading Params Upon Navigation
- 2.168Setting Dynamic Navigation Options
- 2.169Default Navigation Options & Config
- 2.170Navigation Params & Configuration
- 2.171Grid Styling & Some Refactoring
- 2.172Adding Meal Models & Data
- 2.173Loading Meals for Categories
- 2.174Rendering a Meals List
- 2.175Passing Data to the Meal Detail Screen
- 2.176Adding Header Buttons
- 2.177Fixing the Shadows
- 2.178Adding Tabs-based Navigation
- 2.179Setting Icons and Configuring Tabs
- 2.180NavigationOptions inside of a Navigator
- 2.181Adding MaterialBottomTabs
- 2.182Adding a Favorites Stack
- 2.183Adding a Menu Button & Drawer Navigation
- 2.184Configuring the Drawer
- 2.185More Navigation Config & Styling
- 2.186Adding a DefaultText Component
- 2.187Adding the MealDetail Screen Content
- 2.188Time for the “Filters” Screen Content!
- 2.189Passing Data Between Component & Navigation Options (Header)
- 2.190[React Refresher] useEffect() & useCallback()
- 2.191Wrap Up
- 2.192Useful Resources & Links
- 2.193State Management & Redux
- 2.194Module Introduction
- 2.195What is State & What is Redux?
- 2.196Redux & Store Setup
- 2.197Selecting State Slices
- 2.198Redux Data & Navigation Options
- 2.199Dispatching Actions & Reducer Logic
- 2.200Switching the Favorites Icon
- 2.201Rendering a Fallback Text
- 2.202Adding Filtering Logic
- 2.203Dispatching Filter Actions
- 2.204Debugging Redux in React Native Apps
- 2.205Wrap Up
- 2.206Useful Resources & Links
- 2.207Time to Practice – THE SHOP APP
- 2.208Module Introduction
- 2.209Planning the App
- 2.210Creating the Basic Project Setup
- 2.211The Products Overview Screen
- 2.212Setting Up a Navigator
- 2.213Styling the Product Items
- 2.214Adding Touchable Components
- 2.215Working on the Product Details Screen
- 2.216Using Custom Fonts
- 2.217Adding Items to the Cart
- 2.218Implementing Header Buttons
- 2.219Outputting Cart Items
- 2.220Adding Logic to Delete Items
- 2.221Adding Redux Logic for Orders
- 2.222SideDrawer & The Orders Screen
- 2.223Clearing the Cart
- 2.224Styling Order Items
- 2.225Making the “Show Details” Button Work
- 2.226Building the “User Products” Screen
- 2.227Reorganizing the ProductItem Component
- 2.228Deleting Items
- 2.229Adding Basic Editing & Navigation Logic
- 2.230Handling User Input
- 2.231Using Params to Submit User Input
- 2.232Dispatching Actions for Creating & Updating
- 2.233Time to Improve the App!
- 2.234Wrap Up
- 2.235Useful Resources & Links
- 2.236Handling User Input
- 2.237Module Introduction
- 2.238Configuring TextInputs
- 2.239Adding Basic Validation
- 2.240Getting Started with useReducer()
- 2.241Finishing the Merged Form & Input Management
- 2.242Moving Input Logic Into A Separate Component
- 2.243Connecting Input Component & Form
- 2.244Tweaking Styles & Handling the Soft Keyboard
- 2.245Alternatives & Wrap Up
- 2.246Useful Resources & Links
- 2.247Http Requests & Adding a Web Server + Database
- 2.248Module Introduction
- 2.249Setup & How To Send Requests
- 2.250Installing Redux Thunk
- 2.251Storing Products on a Server
- 2.252Fetching Products from the Server
- 2.253Displaying a Loading Spinner & Handling Errors
- 2.254Setting Up a Navigation Listener
- 2.255Updating & Deleting Products
- 2.256Handling Additional Errors
- 2.257Storing Orders
- 2.258Displaying an ActivityIndicator
- 2.259Fetching Stored Orders
- 2.260Adding “Pull to Refresh”
- 2.261Wrap Up
- 2.262Useful Resources & Links
- 2.263User Authentication
- 2.264Module Introduction
- 2.265How Authentication Works
- 2.266Implementing a Basic Login Screen
- 2.267Adding User Signup
- 2.268Logging Users In
- 2.269Managing the Loading State & Errors
- 2.270Using the Token
- 2.271Mapping Orders to Users
- 2.272Improved Mapping (Scoping)
- 2.273Implementing “Auto Login”
- 2.274Adding Logout
- 2.275Implementing “Auto Logout”
- 2.276Auto-Logout & Android (Warning)
- 2.277Wrap Up
- 2.278Useful Resources & Links
- 2.279Native Device Features (Camera, Maps, Location, SQLite, …) [GREAT PLACES APP]
- 2.280Module Introduction
- 2.281Planning the App
- 2.282Navigation Setup in Next Lecture
- 2.283Screen & Navigation Setup
- 2.284Getting Started with the Form
- 2.285Redux & Adding Places
- 2.286Outputting a List of Places
- 2.287Accessing the Device Camera
- 2.288Configuring the Camera Access
- 2.289Using the Picked Image
- 2.290Storing the Image on the Filesystem
- 2.291Changed SQLite Import
- 2.292Diving into SQLite for Permanent Data Storage
- 2.293Storing Data in the Local Database
- 2.294Fetching Data from the Local Database
- 2.295Getting the User Location
- 2.296Showing a Map Preview of the Location
- 2.297More on Environment Variables
- 2.298Displaying an Interactive Map
- 2.299Adding a Marker
- 2.300Making the Picked Location “Saveable”
- 2.301Updating the Location Screen When the Location Changes
- 2.302Storing the Address
- 2.303Storing Picked Places
- 2.304Displaying the “Details” Screen
- 2.305Finishing the “Map” Screen
- 2.306Running the App on iOS
- 2.307Running the App on Android
- 2.308Wrap Up
- 2.309Useful Resources & Links
- 2.310Building Apps Without Expo
- 2.311Module Introduction
- 2.312Alternatives to Expo
- 2.313Building Apps with Just the React Native CLI
- 2.314Live Reload and RN CLI Apps
- 2.315Important: Using React Native Image Picker
- 2.316Adding Native Modules to Non-Expo Apps
- 2.317Understanding Expo’s “Bare Workflow”
- 2.318Ejecting from Expo’s “Managed Workflow”
- 2.319When To Use Which?
- 2.320Useful Resources & Links
- 2.321Push Notifications
- 2.322Module Introduction
- 2.323Understanding Notifications
- 2.324Sending Local Notifications
- 2.325Getting Permissions
- 2.326Controlling How Notifications Are Displayed
- 2.327Reacting to Foreground Notifications
- 2.328Reacting to Background Notifications
- 2.329How Push Notifications Work
- 2.330Expo & Push Notifications
- 2.331Getting a Push Token
- 2.332Sending Push Notifications
- 2.333Using Expo’s Push Server
- 2.334More on Push Tokens
- 2.335Adding Push Notifications to the Shop App (1/3)
- 2.336Adding Push Notifications to the Shop App (2/3)
- 2.337Adding Push Notifications to the Shop App (3/3)
- 2.338Push Notifications in non-Expo Managed Apps
- 2.339Module Resources
- 2.340Course Roundup & Next Steps
- 2.341Roundup & Next Steps
- 2.342Bonus
- 2.343Bonus: More Content!