데브허브 | DEVHUB | React Native Beginners Tutorial Step by Step | Part 2
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.
Part 1
• React Native For Absolute Beginners 2025 |...
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 Navigate to new screen
00:14:16 Understanding useRoute
00:19:47 View the image
00:24:12 Showing text, images together
00:37:23 Style star rating
00:47:41 Style title and price
00:52:25 Work on buttons
01:00:03 Use useState for increment and decrement
01:09:01 More about state variables
01:10:46 Style description text
01:19:45 Style location view
01:32:57 Style buy button
01:54:01 Introduce UseContext
02:00:09 Understanding useState and useContext
02:06:18 Create handlePress function
02:16:23 Mock API Call
02:29:25 Understanding how useContext works globally
02:35:28 Work on cart button
