React Native For Complete Beginners With Backend

Install node on mac using homebrew, verify with node -v, and ensure it's running. Install watchman to aid debugging, noting that it may take time on slow internet.

Install VS code on Mac by opening Chrome, searching Google, downloading the Mac version, unzipping, and double-clicking to run. Expect that you'll start with no project yet.

Install Android Studio to create an Android emulator and run React Native code in VS Code, following download, license acceptance, and setup steps for Apple Chip or Intel Chip.

Create a simple dummy project to set up and run an Android emulator in Android Studio, ensure the Android SDK is installed, and prepare for React Native development.

Start a new React Native project with Expo using npx create Expo app React Native e-commerce, choose the blank template, and open it in VS Code to explore directory structure.

Explore how package.json defines your project name, version, entry point (app entry.js), scripts, dependencies, dev dependencies like babel, and the private flag (private: true).

Explore package-lock.json, a generated file created by npm install that locks exact dependency versions, with package.json serving as its summary; this ensures others install the same versions.

Understand how Babel configuration enables cross-device React Native code by acting as a JavaScript compiler and caching the configuration with api.cache, and explore app.json.

Learn how to use export default in a React Native component, including importing text from React Native, returning a component, and understanding named vs default exports.

Explore how alignItems, justifyContent, and flex control layout in React Native by wrapping text in a view, applying style, and using flex to take all available space.

Master flex in React Native: size views with flex values, apply background color to the parent, and control layout with align items and justify content, flex start and flex end.

In this lecture, learn how flex direction controls layout in React Native, switching between column (default) and row layouts for text and view components using the style property.

Learn to structure layouts with nested views in React Native, using a parent view to control column or row directions, and place text content inside child views.

Learn how flex and nested views behave in React Native, comparing flex:1 with fractional values like 0.5 and 0.3, and using align items and justify content to center.

Separate styles in React Native using StyleSheet.create to organize styles into named blocks like container, top box, and bottom box, then reference them with styles.container, styles.topBox, and styles.bottomBox.

Create your first React Native component by defining a function, returning JSX with view and text, and rendering it inside the app component.

Organize your React Native app by separating components into a components folder with a welcome view file, using Pascal case and export default.

Style the app by applying border radius, margin, and padding to create space around boxes, then adjust text with font size and color for visual polish.

Learn to build a reusable text component in React Native by defining a shared style object and passing color and top margin as props.

Learn to build interactive React Native apps using touchable opacity and onPress, log outcomes with console.log, and add icons with Expo vector icons and feather styles.

Learn to implement a React Native text input with a placeholder in a search container, align it in a row with icons, and tune height, width, and margins.

Learn to implement SafeAreaView in a React Native app, wrap a text input in a search wrapper for styling, and add a compact icon button with proper alignment.

Rename the component to welcome component and create a centralized theme module with colors and sizes to standardize styling and enable reuse across the search wrapper, button, and icons.

Create a home carousel component in React Native, load images from assets/images with relative paths using require, and style for size, margins, and overflow hidden.

Understand how overflow hidden clips a child within a view with border radius to create a square image, and center it with justify content center and align items center.

Learn how to use the React Native FlatList to render an array of items by passing data, defining a renderItem component, and understanding unique keys and optional keyExtractor.

discover how to use arrow functions in react native to write concise components, returning jsx in a single line with flat arrow, or with curly braces and explicit return.

Learn to render dynamic data with FlatList by passing an item prop and using curly bracket syntax. Use a key extractor with item.id to improve caching and rendering.

Learn to display multiple images with FlatList in React Native, rendering items from an images array and enabling horizontal paging. Use dimensions and resize mode to size images correctly.

Enable snap to center and save the setting to center items for smoother scrolling, then set deceleration rate to fast to boost slider responsiveness.

Learn to refactor a React Native app by moving the welcome and carousel components into a dedicated home screen, organizing code under a screens folder, and preparing for navigation.

Create a React Native header with a text label and a grid icon inside a touchable opacity, styled with a theme-based style sheet and a row flex layout.

Install react navigation native and stack, set up a navigation container, and register screens with a stack navigator. Use useNavigation to call navigate to a dummy screen and return.

Install the React Native snippet plugin, generate an ES7 functional component named product list, and rename the dummy screen to product list screen with the top import correctly updated.

Set up a safe area view and render a FlatList of local product images using a renderItem function, showing image paths and ids.

Show images in a column by using an image component with source item.path, wrapping it in a view and applying width and height styles to control sizing.

Learn to display images correctly in a React Native app by configuring a two-column layout, styling with StyleSheet, and ensuring image containers have proper height, width, and overflow handling.

Build an image grid system with text captions by adding text blocks below each image, style with borders, padding, and border radius, and render dynamic items with titles and prices.

Learn to separate style objects and components by moving styles to a dedicated product card style file and passing item props, improving layout with theme colors and alignment.

Install and load custom fonts in a React Native app with Expo, loading Roboto regular and bold via useFonts and displaying a splash screen until fonts are ready.

Learn how hooks and useCallback manage font loading and splash screen visibility in a React Native app, using onready events, fonts loaded state, and hiding the splash screen when ready.

Explore loading fonts with useFonts and useCallback, switch to a Roboto bold font, and simulate image loading and reading data from server with a loading screen and splash screen.

Master loading state in React Native by using use state and use effect to initialize loading, toggle it with a set timeout, and clean up to prevent memory leaks.

Dive into deeper understanding of useEffect in React Native, exploring initial rendering, state changes, rerendering, and the asynchronous flow and closures that determine when effects run.

Simulate data loading in React Native by toggling a loading state and showing a loading text in a centered view, using useEffect for asynchronous operations.

Use empty dependencies in useEffect to ensure the effect runs only once and prevents repeated calls and crashes. Show a loading icon for smoother page transitions.

Learn to implement tabs and focus management in a React Native app by using a tab bar icon component with a focused prop and a ternary operator.

Create a fetch home product hook and a home product list screen to load data, manage loading and error states with use state and use effect.

Set up a React hook with useEffect to load data, manage is loading and error states, and simulate a network call using a promise and set time out.

Display a loading icon with a Lottie view, fetch home product data from the server, and render items in a flat list via a product card component.

Implement a scrollable home page using a scroll view with safe area and flex grow layout. Avoid nesting a FlatList inside a ScrollView to prevent issues.

Move components to the home screen and replace the scroll view with a flat list, using React fragments to render multiple items inside the list.

Create a reusable loading and error component for React Native, convert it to a functional component, and conditionally render loading or error states on the home screen.