React Native For Absolute Beginners 2025 | Part 1

This mobile application has been developed using React Native, a popular framework for building cross-platform apps. The design process focused on incorporating the following key components: Text, TouchableOpacity, TextInput, StyleSheet, Image, ActivityIndicator, View, SafeArea, ScrollView, FlatList, and Alert. To ensure code cleanliness and organization, the styles have been extracted into a separate file and imported into the relevant components where they are utilized. This approach promotes code modularity and maintainability. State Management In React components, there are two types of data that govern their behavior: props and state. Props are set by the parent component and remain fixed throughout the component's lifespan. On the other hand, state is used for data that can change over time. For clarification let’s take one use case of how we are going to be managing our state in our app. When capturing the changes in a text Input, this data changes every time a user type something in the text Input, so every time there’s is a change setstate is called onChangedText to store the context of the TextInput. As good practice we initialize state in the constructor of a component. When you want to modify the state, using the setState method provided by React. Backend For the backend development of this application, we have chosen to use Node.js with the Express framework. We will utilize the following packages to enhance functionality: jsonwebtoken, nodemon, express, mongoose, cryptojs, dotenv By the end of this course, you will gain proficiency in: 1. Node Mongo (CRUD): Performing Create, Read, Update, and Delete operations on a MongoDB database using Node.js and mongoose. 2. Obtain access token with jwt: Generating and validating JWTs for user authentication and authorization in your Node.js application. 3. Node.js RESTful API: Building RESTful APIs using Node.js and Express, handling HTTP requests, implementing CRUD operations, and delivering JSON responses. Timeline 00:00:00 Introduction 00:02:34 Install node on mac 00:05:42 Download and install vscode 00:06:43 Download install Android Studio 00:09:15 Create and run Android Emulator 00:14:18 Create first react native project 00:17:25 Understand package 00:19:05 Understanding package-lock.json. mp4 00:21:06 Understanding config.bable 00:22:07 Understanding app.json 00:23:41 Understanding App.js 00:28:22 Understand Export Default 00:34:07 Understanding alignItems, justifyContent and flex 00:41:07 More about flex and view and text 00:45:40 Learn about Flex direction 00:50:43 Learn basics of views 00:56:43 Deeper understanding of Flex and nested views 01:05:39 Separate styles 01:12:15 Create our first component 01:18:30 Separate the component 01:26:05 More about styling properties margin, padding and color 01:33:34 Reusable style component 01:42:52 TouchableOpacity click and Icons 01:55:20 Showing TextInput 02:02:23 SafeAreaView and Ionicons 02:08:40 Retouch color and look of WelcomeComponent 02:24:09 Display image 02:40:44 Understanding overflow 02:44:35 Understand the basics of FlatList 02:56:19 Understanding arrow function 03:00:46 FlatList and Dynamic Data 03:08:38 FlatList and show Images 03:20:28 FlastList and faster snapping 03:21:50 Refactor code with homescreen 03:26:09 Create header and Touchable opacity 03:41:26 React native navigation 03:54:23 React native code snippet plugin 03:57:35 Images and path in FlatList 04:04:05 Showing images in a column 04:06:09 Display images correctly 04:11:02 Showing Images with Text 04:19:34 Separate style objects and components 04:29:46 Install fonts 04:39:36 How hooks and callback function works 04:48:20 Change fontFamily 04:52:10 Understanding of useEffect 05:07:52 Deeper understanding of useEffect 05:15:54 Showing the loading text 05:19:54 useEffect and dependencies 05:24:26 Showing Lottie json files 05:31:31 Showing bottom navigation in React 05:40:37 Styling and more screens 05:49:37 Tabs and focus management 06:01:40 Create hook for home screen product 06:12:07 Finishing the hook with Promise and Resolve 06:31:07 Showing loading icon and load the images 06:40:40 ScrollView and home page scrolling 06:43:14 React native fragment and FlatList Learn more about it here https://www.dbestech.com/tutorials/re... Multi vendor app https://www.dbestech.com/tutorials/re...