The Complete React Native Masterclass for Beginners

Learn React Native basics in one hour through efficient, short tutorials and live, semi-scripted coding with real-time rendering on multiple devices using Jasmine.

Explore how HTML forms the web page foundation while JavaScript adds interactivity, from creating elements and styling basics to using alerts, strings, and simple output in the console.

Add a button and wire it to a JavaScript function with on click to trigger an alert. Understand function declarations, braces, and case sensitivity to ensure the correct function runs.

Learn how to scale functions in a real app by creating multiple dedicated functions, naming them clearly, and organizing code for readability and maintainability.

Learn to change page text with JavaScript by selecting a paragraph by its id and updating its innerHTML through a click-triggered function.

Explore variables in JavaScript by declaring and initializing numbers and strings, and explore floats and integers, learn how concatenation works, and observe JavaScript's forgiving data types.

Explore arrays by treating them as egg cartons, define number and string arrays, and understand zero-based indexes, printing elements, handling out-of-range undefined, and the flexibility of JavaScript to mix types.

Learn to work with objects by declaring a car object with properties like name, range, unit, color, and top speed, access them with dot notation, and print with proper spacing.

Understand variable scope in JavaScript by comparing global variables, accessible across the page, with scope variables confined to curly brackets within functions, if statements, and loops.

Add a text input, capture the entered text with JavaScript, store it in a variable, and update the displayed text when the button is clicked.

Learn how to call functions in JavaScript from a click event, assign IDs to buttons, and chain function calls to update text, reducing repetition for efficient code.

Explore how if statements control code flow by evaluating conditions and executing actions, using equal, not equal, less than, and greater than tests to prevent crashes.

Master if, else if, and else chains in React Native by implementing specific conditions, understanding when each branch runs, and avoiding using else as the main logic.

Learn to change element styles with JavaScript by selecting an element by id and updating color, font size, and font family. Work with on click events and zero-based function naming.

Unlock unlimited access on training mammoth interactive dot com with a discount coupon for monthly, annual, and lifetime subscriptions, featuring hundreds of courses, thousands of videos, and weekly course additions.

Explore how the React Native framework works, its purpose and architecture, along with tools. Build and run your first app on Android and iOS simulators, then review and challenge yourself.

Explore how React Native lets you build Android and iOS apps from a single JavaScript code base using React UI libraries and native capabilities.

Discover how React Native converts JavaScript into Android and iOS components, and how the UI thread, JavaScript thread, and bridge enable app interactivity.

Compare Expo and React Native CLI: Expo enables fast development without Android Studio or Xcode, while CLI requires native tools and allows native bridging via eject.

Learn to build your first React Native app by setting up the environment for Windows, macOS, or Linux and initializing a new project, with Android and iOS folders to explore.

Run the React Native app on the Android simulator from your project folder using React Native run android; Android Studio simulator launches the Metro server and installs a basic page.

Launch the react native app on the iOS simulator using 'react native run-ios', watch the metro server start in development mode, and view the same basic welcome screen as Android.

Explore how React Native works, including the JavaScript, shadow, and UI threads and the bridge with serialized JSON, then set up the environment and run on Android and iOS simulators.

Discover how to build your first react native app by setting up a new project, exploring core components, planning the app’s purpose, and completing a final challenge.

Explore built-in core components in React Native, such as view, text, image, text input, scroll view, flat list, and Android-specific components.

Set up a new react native project by examining the default android and ios folders, package.json scripts, index.js, app.js, and the recommended folders for components, containers, themes, images, and fonts.

Plan a React Native app by defining functionalities and scope, estimating effort and resources, selecting libraries and services, and establishing error handling, testing milestones, and ad hoc releases.

Show how to build a React Native app by creating a class component, managing state, rendering views, images, and a text input with styling and core components.

Summarizes React Native core and community components, project setup, and planning, then builds a landing page with a title, image, and input box, plus a title driven by user input.

Build the mobile application layout by applying styles to enhance design and user interface. Explore React Native flex box, inline styles, and stylesheet objects.

Learn how to style React Native components with the style property or a stylesheet object, and master flex box to control direction, alignment, and spacing on row or column layouts.

Explore inline styles and the StyleSheet object in React Native, apply styles with the style prop, and organize reusable styles across components and screens into files.

Explore react native flexbox basics, including align items and justify content, and compare inline styles with stylesheet objects while building a two-panel layout with four colored views, vertical and horizontal.

Build a list and related components by outlining state and events, outputting and styling items, and making the list scrollable, then construct a flat list.

Learn how to manage state and handle events in React Native by updating state with setState, binding handlers, and responding to inputs and button presses.

Build a horizontal list in React Native by mapping hard-coded data to image cards with titles, touchable interactions, and alerts, preparing for a flat list in the next video.

Learn how to implement a flat list in react native by wiring data, render item, and key extractor, and compare its performance to a scroll view.

Summarizes states and events and introduces a touchable capacity button. Guides building a flat list, styling rows as cards, and rendering a data array with name, occupation, and mobile.

Explore the React Native masterclass for beginners by learning to split apps into components, pass data between them, build touchable components, and delete items, with a final recap and challenge.

Split the app into multiple components and use React Navigation to move between screens with stack and bottom tab navigators, organizing splash, login, home, profile, and search screens.

Pass data between two React Native components with a stack navigator. Navigate from home to details, pass a json object as route params, and read values via route.params.

Learn to build touchable components in React Native, using touchable opacity or container wrappers for text, images, and icons, with onPress actions and vector icons.

Explains splitting an app into components, passing data between them, and creating touchable elements, and guides a stack navigation login challenge that passes and displays the login name.

Improve app layout using various components and flexible styling. Explore the model overlay and learn how to use it, then close the door and clear input.

Learn to add a modal overlay in React Native by toggling visibility with state, customizing its animation, and styling with shadows, elevation, and rounded corners.

In this lecture, you enhance a modal with flexbox and add two text inputs for username and occupation, including placeholders and state updates, plus a clear button and horizontal controls.

Build a modal with an overlay and flexbox styling, managing name, occupation, city, country, and mobile with state variables. Implement close, save, and clear actions with validation and error messaging.

Build a responsive app by addressing responsivity issues with flexible styling rules and dynamic dimensions, and use the keyboard avoiding view to keep content visible during orientation changes.

Explore building a responsive cross-platform React Native app for Android and iOS by mastering flexbox layouts, orientation handling, dimensions and platform APIs to adapt UI across devices.

Learn to work with images in React Native using local and remote sources, preserve aspect ratio with resizeMode contain, and ensure responsive image display across devices.

Learn to build responsive React Native apps using the Dimensions API. Read window and screen sizes, handle orientation changes with listeners, and update state to apply proportional fonts and layouts.

Explains responsivity challenges in React Native and how to use layout props and the Dimensions API to adapt to device orientation, including a practical two-text-two-image exercise.

Explore responsivity tools and the platform's capabilities. Implement the safe area view function and explore the screen orientation api, then finish with a summary and a forward challenge.

Learn to use the platform module and platform specific extensions to run code on Android or iOS, using Platform OS and Platform select to tailor UI and behavior.

Explore how the safe area view in React Native for iOS adds padding to keep content inside the device’s safe zones, avoiding the status bar, notch, camera, and navigation bars.

Explore using the platform API to tailor Android and iOS experiences with platform select and safe area view. Implement platform-specific registration and home screens with distinct colors, fonts, and layouts.