Go Summarize

React Native Crash Course for Beginners - Build 4 Apps in 14 Hours (Redux, Tailwind + More) [2023]

Sonny Sangha2022-08-02
react#developer#reactjs#html#css#js#javascript#papa#papareact#papa-react#tutorial#frontend#webdev#dev#clone#backend#fullstack#motivation#reactnative#react-native#redux#typescript
521K views|1 years ago
💫 Short Summary

The video segment covers building iOS and Android apps with React Native, state management with Redux, Firebase integration, and React Context API for authentication. It demonstrates setting up components, styling with Tailwind CSS, creating scrollable containers, and connecting to a backend with Sanity CMS. The video also covers Redux setup, styling components, setting up Google Maps API, and implementing features like swiping, matching, and messaging. The presenter emphasizes clean code, UI design, and practical coding techniques for effective app development, with a focus on real-time data handling, navigation, and user authentication.

✨ Highlights
📊 Transcript
Overview of React Native App Development Course.
00:12
The course covers state management with Redux, styling with Tailwind CSS, navigation, animations, and Firebase Firestore.
It also includes using Google APIs, integrating Google authentication, and deploying apps with Expo.
Collaboration with Sanity CMS for back-end management is mentioned in the video.
The course aims to provide practical skills for app development on iOS and Android platforms.
Setting up Xcode simulator for iOS app development.
17:38
Installing Xcode, agreeing to prompts, accessing simulator, and spinning up a simulator.
Using React Native with Tailwind CSS.
Setting up Tailwind CSS in the project, installing dependencies, and configuring styles.
Delving into React Native navigation, setting up a home screen, and styling components with Tailwind CSS.
Emphasis on proper import statements and flexbox layout in React Native.
Designing and styling a scroll view in React Native.
50:37
Speaker encounters debugging issues and makes mistakes with component naming.
Setting up a horizontal scroll view with specific styling parameters like padding.
Speaker perseveres and demonstrates real-time problem-solving in the development process.
Styling techniques for building category cards in a React Native application.
53:16
Demonstrates how to force in category cards with dummy data and customize them using props.
Shows how to add images, titles, and descriptions to the cards, as well as style them for a visually appealing layout.
Covers the implementation of touchable buttons using Touchable Opacity and the use of icons for ratings and location markers.
Provides a step-by-step guide on creating and styling reusable components in React Native.
Setting up a frontend connection to a Sanity backend for a React Native app.
01:27:23
Demonstrates creating schemas for restaurants, dishes, and featured items.
Connecting to the backend using the Sanity client and retrieving the project ID.
Discusses using environment variables, optimizing caching with CDN, and specifying the API version.
Provides a detailed walkthrough of creating the necessary files and configurations for the frontend to interact with the Sanity backend.
Setting up an image builder in Sanity and querying information from a Sanity CMS backend using Groq syntax.
01:36:42
Creating a helper function to pull down images and get their URLs.
Adding exceptions for course policy in the sanity folder and whitelisting origins for API access.
Specifying fields to retrieve when querying information from a Sanity CMS backend.
Implementing UI on the front end by fetching data from the backend and rendering restaurant information dynamically.
Implementation of a user interface for a mobile app.
02:02:17
Adding images, text, icons, and buttons to create a visually appealing design.
Demonstrating the use of touchable opacity, icons, and text elements to build app sections.
Emphasizing styling details like colors, sizes, alignments, and spacing.
Showcasing how UI elements can be combined and customized for a polished layout.
Setting up Redux in an app for global state management with Redux Toolkit.
02:17:40
Creating slices for different features like a basket slice and defining initial states.
Implementing actions such as adding and removing items from the basket.
Using action creators to dispatch actions to the global store.
Benefits of Redux for managing global state and a step-by-step guide on setting it up in the app.
Implementation of adding and removing items from a basket in a React Redux application.
02:37:02
Modifying the state to reflect changes in the basket, including adding items and updating the total price.
Creating a selector function to access global store data and using the reduce function to calculate the total price.
Styling the basket icon and displaying the total price dynamically.
Building a UI for a basket screen in a mobile app.
02:55:51
Adding padding, creating a restaurant slice, setting up reducers, and connecting to the global store are key steps in the process.
Grouping items in the basket, displaying item details, and adding a remove button functionality are demonstrated.
Styling elements like text, currency display, and touchable opacity for interactions are covered.
The speaker highlights the importance of community support in development and showcases the functionality of the built UI components.
Styling and layout techniques for creating a user interface in React Native.
03:16:24
Demonstrates using flexbox properties, styling text and images, and adding animations.
Process includes creating components, applying styles for alignment and spacing, and implementing animations for visual effects.
Showcase of using libraries like React Native Animatable and React Native Progress for animations and progress bars.
Importance of using pre-workout to stay focused during live streams and layering elements for visually appealing design.
Development of a mobile app using React Native, Expo, and Google APIs.
03:34:48
Setting up the development environment is demonstrated, along with incorporating React Native Elements and React Navigation.
Google APIs like Places Autocomplete, Distance Matrix, and Directions are utilized for interactive maps and travel calculations.
Tailwind CSS and Redux are also used for styling and state management.
Emphasis is placed on the seamless integration of technologies to create a functional and visually appealing app.
Setting up Expo for development.
03:37:15
Installing dependencies and initializing an Expo app are key steps in the process.
Using Expo commands in the terminal is demonstrated for creating an Expo project.
Expo start is utilized to kickstart the application.
Expo offers advantages such as easy testing on Android and iOS devices, simplified dependency installation, and future incorporation of TypeScript.
Setting up a Redux store in a React Native application
03:53:34
Creation of a navigation slice folder with reducers and actions.
Steps include setting up a reducer, connecting it to the store, and utilizing selectors.
Introduction to using Tailwind for styling components and combining Tailwind classes with traditional styles.
Implementation of a home screen using Tailwind styles and safe area view for handling notch areas.
Adding a logo to a React Native app involves using a view container, image tags, and inline styles.
04:19:57
Importing the logo image and setting up a flat list to render items efficiently are demonstrated.
React Native Elements are utilized for icons, and Tailwind CSS is recommended for styling.
Integrating safe area context is important for design consistency.
Using keys for list items and efficiently rendering components in React Native are highlighted.
Setting up Google Places AutoComplete API in a React Native project.
04:42:49
The speaker demonstrates enabling Directions API, Places API, and Distance Matrix API in the Google Cloud Platform.
Emphasis on setting up a billing account and functionality of each API.
Navigating through the Google Cloud Platform console to enable the APIs, ensuring correct project and directory selection.
Successful enabling of all necessary APIs for the project.
Setting up Google API keys for accessing Google Places Autocomplete functionality.
04:44:46
The process involves creating and securing API keys, adding them to the environment file, and implementing them in the code.
Using React Native and handling cache issues during development.
Demonstrating setting up styles, passing query attributes, and language settings for the Google Maps API key.
Testing the autocomplete functionality by entering a location like London.
The tutorial demonstrates integrating the Google Places API to display location data on the map.
05:17:26
Using selectors to retrieve location information from the data layer and render it on the map.
Handling user input for locations like London, Scotland, and Los Angeles, and dynamically displaying markers at specified coordinates.
Explaining optional chaining for handling undefined values and enhancing the user experience with zoom functionality.
Setting up a map view in React Native with origin and destination for directions.
05:36:09
Demonstrates installing the 'react-native-maps-directions' package and importing necessary components.
Shows how to render the map view directions component with origin and destination descriptions.
Involves setting up the Google Maps API key and ensuring availability of both origin and destination before displaying directions on the map.
Setting up Google Maps API key and configuring map appearance.
05:36:54
Demonstrating the use of useRef hook in React to manipulate the map.
Explaining the use of useEffect hook to re-run code based on changes in origin or destination.
Creating UI components like nav favorites with FlatList, adding separators, and styling with Tailwind CSS.
Addressing keyboard avoidance for improved user experience on iOS and Android devices.
Setting up a Touchable Opacity button with an icon and text inside.
05:54:55
The icon is from Font Awesome and the text is styled with Tailwind.
Styling the button, including background color and text color.
Handling button press events for navigation and importing necessary dependencies.
Rendering a list of cars using a FlatList component and customizing the appearance of each item.
Setting up state to track selected items and handling item selection.
Implementation of a feature in a mobile app for selecting a car and viewing travel time and price for a destination.
06:16:40
Data is fetched from Google APIs, travel time is calculated, conditional styles are applied, and price is displayed based on surge charge rates and distance.
Internationalization JavaScript API is used to format currency and a menu icon is created for navigation.
The app showcases dynamic functionality and a preview of the complete user flow is provided.
Setting up a react native project using Expo and incorporating elements like touchable opacity and icons.
06:31:30
Styling is applied using Tailwind CSS with a focus on using Tailwind React Native for styling and the installation process.
Introduction to Firebase version nine for authentication and Firestore.
Emphasis on the importance of a clean workflow and showcasing how to set up VS Code for development.
Overall, the segment provides a comprehensive guide on setting up a react native project with various tools and frameworks.
Demonstrates the process of setting up a React Native app using Expo.
07:04:58
Shows how to create a stack navigator with multiple screens.
Highlights the importance of clean and organized code.
Covers setting up a home screen and chat screen, navigating between them, and using the onPress event for button interaction.
Setting up authentication for an app using context API and custom hooks.
07:23:16
Tutorial shows creating an auth provider to manage user authentication and passing down authentication data globally using useAuth custom hook.
Demonstrates setting up Firebase for authentication.
Adding iOS apps to a project in Firebase.
Emphasizes the benefits of using hooks over the consumer pattern for accessing context values easily and efficiently.
Setting up app bundle IDs for iOS and Android apps using Expo.
07:24:25
Emphasize on using specific bundle IDs to avoid errors during app deployment.
Steps covered include configuring host URLs, generating SHA-256 hashes, obtaining client IDs, and handling Google login authentication.
Demonstrates how to securely store sensitive information and use environment variables for production environments.
Coding examples provided for handling login results based on success or failure.
The process involves passing credentials to Firebase for user authentication.
07:57:48
An error is encountered due to not passing the auth object, resulting in an unhandled promise rejection.
The solution involves properly handling errors by setting up error state tracking.
Importance of using modular functions correctly is emphasized.
A step-by-step guide on implementing authentication in the app is provided.
Customizing authentication in a React Native app.
08:12:46
The useLayoutEffect hook is used to customize the header and layout within a component.
ImageBackground component is utilized for setting background images and displaying text elements.
Options for headers are set and memoization is used to optimize re-renders.
Building out the app further with features like swiping and matching functionality.
Styling and positioning elements in React Native app using Tailwind CSS.
08:34:56
Demonstrating application of styles such as flex, absolute positioning, and Expo Vector Icons.
Centering elements, utilizing Touchable Opacity for interactivity, and positioning images and icons.
Tips on importing and using icons, managing static assets, and utilizing layout options like justify between and flex row.
Styling components in React Native with Tailwind CSS and traditional stylesheets.
08:53:21
Demonstrates creating custom styles, applying shadows, and combining different styling languages.
Shows how to use shadow properties for light shadow effects and importance of styling for visual appeal.
Emphasizes manual refreshing for style changes and optimizing layouts and design elements.
Customizing a modal screen in a React Native app.
09:02:20
Adding overlay labels, styling input fields, and creating a step-by-step profile setup process.
Demonstrating the use of touchable opacity buttons for user interactions and styling elements with Tailwind CSS.
Setting up stack groups for modal screens and utilizing text input fields.
Handling user authentication and displaying dynamic user information to enhance user experience and functionality of the app.
The segment covers updating a user profile in a React Native app.
09:13:09
Styling a button and handling form inputs for image, job, and age are demonstrated.
Validation is implemented and connection to a Firebase database is established using Firebase Modular functions.
Real-time database updates are shown, focusing on error handling and data consistency.
Importance of cleanup functions to prevent listener accumulation is discussed.
Creating swipe feature for user profiles.
09:45:42
Demonstrates functions to record swipes and passes, filter out profiles already interacted with, and manage exclusion logic.
Explains fetching and filtering data on backend using Firebase Firestore.
Discusses use of query functions and importance of passing values when querying data.
Provides step-by-step guide on implementing swipe feature and managing user interactions with profiles.
The creation of matches in a dating app is explained, focusing on the logic behind matching users securely.
10:05:50
Matches are generated by creating unique IDs for user pairs and storing this information in a database.
Server-side processing is emphasized to maintain data integrity and security.
The segment provides insights into the technical aspects of implementing a match-making feature in an app.
Building a chat screen component for a mobile app.
10:25:00
Discussion on creating reusable components such as headers and chat lists.
Demonstrating setting up state for messages and fetching real-time data using onSnapshot.
Emphasis on the importance of modular code and learning new concepts.
Mention of optimizing queries for efficiency in database operations.
Implementation of chat feature in React Native app.
10:41:35
Components, libraries, and navigation set up for message screen.
Use of Tailwind for styling and touchable opacity for navigation.
Passing props like match details to different screens.
Showcasing helper functions, state management, and asynchronous data fetching.
Debugging code related to passing and displaying user information in a chat application.
10:45:12
Troubleshooting issues with passing correct values, displaying user details, and handling keyboard behavior.
Setting up text input fields, using state hooks, and creating sender and receiver message components.
Emphasis on coding practices, component organization, and ensuring proper data flow within the chat application.
Development of a real-time messaging app with swipeable tinder cards, one-to-one messaging, and real-time functionality using React Native and Firebase.
11:23:18
Tutorial showcases implementation of authentication, real-time listeners, and a custom use hook.
Chat functionality, matching algorithms, and UI design demonstrated with React Native elements.
Navigation handled with React Native Navigation, deployment done using Expo.
Next project previewed as a Signal clone for real-time messaging.
Building a React Native app with Expo and Firebase.
11:38:40
Demonstrates setting up project, installing dependencies, and adding navigation functionality with React Navigation.
Creating screens like a login screen and organizing components in a navigation container.
Discusses styling variances between React Native and web development.
Emphasizes the significance of comprehending component navigation in mobile app development.
Setting up React Native snippets for creating a login screen and navigation stack.
11:42:05
Demonstrates creating components, setting up a stack navigator, applying styles, handling input fields, and connecting buttons to functions.
Covers styling elements, handling keyboard behavior, and connecting to a register screen.
Emphasizes using React Native elements and components effectively to build a well-designed user interface.
Setting up a register screen in a React Native app.
11:58:44
Importing components and setting up navigation stacks are demonstrated for user registration.
Configuring the Firebase database and authentication is covered in the segment.
Explanation of using useEffect and useLayoutEffect hooks for navigation and screen rendering.
Walkthrough of initializing Firebase and setting up the app for authentication and database usage in an Expo project.
Implementing optimizations for native apps with Firebase.
12:16:39
Importance of avoiding unnecessary reinitializations and maintaining clean code.
Setting up database access and Firebase authentication variables.
Handling user registration, updating profiles, and managing navigation.
Debugging issues, optimizing app performance, and ensuring proper navigation.
Implementing scroll view and custom list item component in React Native.
12:33:25
Creating components and styling headers with background colors and text colors.
Implementing touchable opacity for clickable functionality.
Covering user authentication and sign-in functionality, handling errors, and logging users in and out.
Emphasizing patience in debugging and insights into cross-platform development between iOS and web platforms.
Implementing functionality to add a new chat in a React Native app.
13:02:20
Setting up a listener for user authentication is crucial for security and user access control.
Creating a new chat screen involves designing a user-friendly interface with input fields and buttons.
Connecting to a Firestore database allows for storing and retrieving chat data efficiently.
Ensuring real-time updates and seamless navigation between screens enhances the user experience.
Implementing chat functionality in a React Native application.
13:23:10
The video demonstrates setting up chat components, styling elements, and handling user interactions.
Using SafeAreaView, KeyboardAvoidingView, and ScrollView to manage layout and user input.
Customizing headers, icons, and navigation for the chat application.
Tutorial covers styling components, handling keyboard visibility, and creating interactive elements for a seamless chat experience.
Setting up a chat interface in a mobile app.
13:32:50
The process includes creating input fields and sending messages, styling components like text input fields, buttons, and chat messages.
Demonstrating handling user input, setting up real-time message listeners, and displaying messages in a chat interface.
Discussions on using Firebase for timestamp management and setting up user profiles.
Focus on implementing chat functionality and styling UI elements for a cohesive user experience.
Styling the chat receiver and sender interface.
13:42:45
Demonstrating how to style the receiver with padding, background color, and center alignment.
Showing how to style the sender with a blue color and flex start alignment.
Discussing absolute positioning and margin adjustments for the elements.
Implementing a hack for absolute positioning on the web.
Testing the functionality of the chat interface and ensuring cross-platform compatibility.
The segment demonstrates deploying a React Native app to the web using Firebase hosting.
14:11:06
Steps include initializing the app, using Expo, configuring single-page apps, and setting up automatic builds with GitHub.
The process involves creating a JavaScript bundle, deploying to Firebase hosting, and optimizing images.
Despite hitting a Firebase quota limit, the app successfully deploys, showcasing the power of React Native for web and mobile development.
The segment concludes with a recap of key learnings and an invitation to join a developer community for further support and learning opportunities.