HỌC REACT NATIVE TRONG 7 NGÀY

PHẦN 1 - LÝ THUYẾT

Ngày 1: Làm quen & Cài đặt Môi trường

Mục tiêu: Hiểu tổng quan về React Native và chuẩn bị môi trường phát triển.
Nội dung:
- Tìm hiểu về React Native: Khái niệm, lợi thế so với native và hybrid.
- Phân biệt giữa React Native CLI và Expo.
- Cài đặt Node.js, npm/yarn.
- Cài đặt Expo CLI (hoặc React Native CLI nếu bạn muốn khám phá các giải pháp native).
- Tạo và chạy một dự án mẫu “Hello World” bằng Expo.
Thực hành: Tạo một dự án mới, chạy trên thiết bị (hoặc trình giả lập) và làm quen với cấu trúc thư mục.

Ngày 2: Cấu trúc, Component và Styling

Mục tiêu: Nắm vững các component cơ bản và cách định dạng giao diện.
Nội dung:
- Các component cơ bản: View, Text, Image, ScrollView, TextInput, Button.
- Cách sử dụng và cấu trúc component.
- Styling với StyleSheet, Flexbox và các kỹ thuật responsive.
Thực hành:
- Xây dựng giao diện cơ bản cho một ứng dụng demo (ví dụ: trang đăng nhập, trang danh sách).
- Thử nghiệm các kiểu layout với Flexbox.

Ngày 3: Navigation và Quản lý Trạng thái

Mục tiêu: Hiểu cách điều hướng giữa các màn hình và quản lý dữ liệu ứng dụng.
Nội dung:
- Cài đặt và cấu hình React Navigation.
- Các kiểu navigation: Stack, Tab, Drawer.
- Giới thiệu về state management trong React Native (sử dụng Context API hoặc Redux cho dự án nhỏ).
Thực hành:
- Tạo ứng dụng demo với nhiều màn hình và thực hành chuyển đổi giữa các màn hình.
- Xây dựng ví dụ đơn giản về quản lý trạng thái giữa các màn hình.

Ngày 4: Giao tiếp với API và Xử lý Dữ liệu

Mục tiêu: Làm việc với dữ liệu từ API, xử lý bất đồng bộ và quản lý dữ liệu.
Nội dung:
- Fetch API: sử dụng fetch hoặc axios để gọi API.
- Hiểu về Promise, async/await và cách xử lý lỗi.
- Quản lý dữ liệu nhận từ API và hiển thị chúng trong giao diện.
Thực hành:
- Tạo một ứng dụng demo để gọi API (ví dụ: lấy danh sách bài viết, người dùng hoặc hình ảnh từ một API công khai).
- Xử lý loading state và error state khi gọi API.

Ngày 5: Tích hợp Native Modules & Tối ưu Hiệu Suất

Mục tiêu: Khám phá cách tích hợp các module native và tối ưu hóa ứng dụng.
Nội dung:
- Giới thiệu về Native Modules: Khi nào và tại sao cần tích hợp.
- Các thư viện hữu ích (ví dụ: react-native-gesture-handler, react-native-reanimated).
- Các mẹo tối ưu hiệu suất: sử dụng memoization, FlatList, và phân tách code.
Thực hành:
- Thêm một tính năng sử dụng một module native (ví dụ: truy cập camera, cảm biến).
- Tối ưu một danh sách dài với FlatList và thực hành các kỹ thuật tối ưu khác.

Ngày 6: Testing, Debugging & Phát hành

Mục tiêu: Nắm vững cách kiểm thử, gỡ lỗi và chuẩn bị ứng dụng cho môi trường production.
Nội dung:
- Debugging: Sử dụng React Native Debugger, console logs, và các công cụ DevTools.
- Testing: Unit test với Jest và snapshot testing.
- Chuẩn bị build và phát hành ứng dụng (cho Android và iOS).
Thực hành:
- Thực hành gỡ lỗi một vài lỗi phổ biến.
- Viết một số test đơn giản cho các component.
- Tìm hiểu quy trình build ứng dụng với Expo hoặc React Native CLI.

Ngày 7: Xây dựng Dự Án Mini

Mục tiêu: Ứng dụng tất cả kiến thức đã học để xây dựng một ứng dụng hoàn chỉnh.
Nội dung:
- Lên ý tưởng cho một dự án nhỏ (ví dụ: ứng dụng ToDo, ứng dụng thời tiết, hay một app danh bạ đơn giản).
- Lập kế hoạch kiến trúc ứng dụng: phân chia màn hình, luồng dữ liệu, gọi API (nếu cần).
- Tích hợp các tính năng: giao diện, navigation, quản lý trạng thái, gọi API, và tối ưu hiệu suất.
Thực hành:
- Bắt đầu xây dựng dự án từ đầu.
- Thực hành refactoring code, xử lý lỗi và gỡ debugging khi cần.
- Nếu có thể, triển khai ứng dụng trên thiết bị thật và chia sẻ kết quả.

Lưu ý Chung

Tài liệu tham khảo:
- React Native Documentation
- Các khoá học, video hướng dẫn trên YouTube hoặc các nền tảng học trực tuyến như Udemy, Coursera.
Cộng đồng: Tham gia các group, diễn đàn (Stack Overflow, Reddit) để trao đổi và học hỏi từ cộng đồng.
Luyện tập: Sau mỗi ngày học, hãy thử viết code và tự tạo ra các bài tập nhỏ để củng cố kiến thức.
Ghi chép: Ghi lại những vấn đề gặp phải và cách giải quyết để tham khảo sau này.

Chúc bạn thành công với kế hoạch học tập và sớm trở thành chuyên gia React Native!

PHẦN 2 - THỰC HÀNH

SpiProLang sẽ tạo một kế hoạch chi tiết sử dụng code ví dụ cho từng ngày, giúp học React Native từ cơ bản đến nâng cao dễ dàng hơn. Dưới đây là kế hoạch học tập 7 ngày cho React Native, mỗi phần đều kèm theo ví dụ cụ thể để bạn dễ hình dung và thực hành.

Ngày 1: Làm quen & Cài đặt Môi trường

Mục tiêu: Hiểu tổng quan về React Native và chuẩn bị môi trường phát triển.

Nội dung & Ví dụ:

Tìm hiểu về React Native:
Ví dụ: Đọc tài liệu chính thức của React Native để hiểu cách hoạt động của framework và điểm khác biệt so với ứng dụng native.
Phân biệt giữa React Native CLI và Expo:
Ví dụ:
- Expo: Dễ dàng khởi tạo và chạy ứng dụng mà không cần cấu hình native code.
- React Native CLI: Cho phép bạn tùy chỉnh sâu vào native modules khi cần thiết.
Cài đặt Node.js, npm/yarn và Expo CLI:
Ví dụ lệnh cài đặt Expo CLI qua npm:

bash

Sao chépChỉnh sửa

npm install -g expo-cli

Tạo và chạy một dự án mẫu “Hello World”: Ví dụ:

bash

Sao chépChỉnh sửa

expo init HelloWorldApp

cd HelloWorldApp

expo start

Sau đó, mở ứng dụng Expo Go trên điện thoại hoặc trình giả lập để xem kết quả.

Ví dụ code “Hello World” trong App.js:

jsx

Sao chépChỉnh sửa

import React from 'react';

import { View, Text, StyleSheet } from 'react-native';

export default function App() {

return (

<Text style={styles.text}>Hello World!</Text>

</View>

);

}

const styles = StyleSheet.create({

container: {

flex: 1,

justifyContent: 'center',

alignItems: 'center',

backgroundColor: '#fff',

text: {

fontSize: 24,

fontWeight: 'bold',

});

Ngày 2: Cấu trúc, Component và Styling

Mục tiêu: Nắm vững các component cơ bản và cách định dạng giao diện.

Nội dung & Ví dụ:

Các component cơ bản:
Ví dụ sử dụng View, Text, Image, TextInput và Button:

jsx

Sao chépChỉnh sửa

import React, { useState } from 'react';

import { View, Text, TextInput, Button, Image, StyleSheet } from 'react-native';

export default function BasicComponents() {

const [input, setInput] = useState('');

return (

<TextInput

style={styles.input}

placeholder="Nhập tên đăng nhập"

value={input}

onChangeText={setInput}

<Button title="Đăng nhập" onPress={() => alert(`Chào ${input}`)} />

<Image

style={styles.image}

source={{ uri: 'https://reactnative.dev/img/tiny_logo.png' }}

</View>

);

}

const styles = StyleSheet.create({

container: {

flex: 1,

justifyContent: 'center',

alignItems: 'center',

padding: 16,

backgroundColor: '#f0f0f0',

title: {

fontSize: 24,

marginBottom: 16,

input: {

width: '80%',

height: 40,

borderColor: '#ccc',

borderWidth: 1,

marginBottom: 16,

paddingHorizontal: 8,

borderRadius: 4,

image: {

width: 50,

height: 50,

marginTop: 16,

});

Styling với Flexbox:
Ví dụ sử dụng Flexbox để tạo layout responsive:

jsx

Sao chépChỉnh sửa

import React from 'react';

import { View, Text, StyleSheet } from 'react-native';

export default function FlexboxExample() {

return (

</View>

</View>

</View>

);

}

const styles = StyleSheet.create({

container: {

flex: 1,

flexDirection: 'row',

justifyContent: 'space-around',

alignItems: 'center',

box: {

width: 80,

height: 80,

backgroundColor: '#add8e6',

justifyContent: 'center',

alignItems: 'center',

});

Ngày 3: Navigation và Quản lý Trạng thái

Mục tiêu: Hiểu cách điều hướng giữa các màn hình và quản lý dữ liệu ứng dụng.

Nội dung & Ví dụ:

Cài đặt và cấu hình React Navigation:
Ví dụ cài đặt thư viện:

bash

Sao chépChỉnh sửa

npm install @react-navigation/native @react-navigation/native-stack

npm install react-native-screens react-native-safe-area-context

Cấu hình Navigation với Stack Navigator:
Ví dụ tạo hai màn hình và chuyển đổi giữa chúng:

jsx

Sao chépChỉnh sửa

// App.js

import * as React from 'react';

import { NavigationContainer } from '@react-navigation/native';

import { createNativeStackNavigator } from '@react-navigation/native-stack';

import HomeScreen from './screens/HomeScreen';

import DetailsScreen from './screens/DetailsScreen';

const Stack = createNativeStackNavigator();

export default function App() {

return (

<Stack.Navigator initialRouteName="Home">

<Stack.Screen name="Home" component={HomeScreen} />

<Stack.Screen name="Details" component={DetailsScreen} />

</Stack.Navigator>

</NavigationContainer>

);

}

jsx

Sao chépChỉnh sửa

// screens/HomeScreen.js

import React from 'react';

import { View, Text, Button, StyleSheet } from 'react-native';

export default function HomeScreen({ navigation }) {

return (

<Text>Trang chủ</Text>

<Button

title="Chuyển đến trang Details"

onPress={() => navigation.navigate('Details')}

</View>

);

}

const styles = StyleSheet.create({

container: {

flex: 1,

justifyContent: 'center',

alignItems: 'center',

});

jsx

Sao chépChỉnh sửa

// screens/DetailsScreen.js

import React from 'react';

import { View, Text, StyleSheet } from 'react-native';

export default function DetailsScreen() {

return (

<Text>Trang chi tiết</Text>

</View>

);

}

const styles = StyleSheet.create({

container: {

flex: 1,

justifyContent: 'center',

alignItems: 'center',

});

Quản lý trạng thái đơn giản với Context API:
Ví dụ tạo Context để chia sẻ trạng thái:

jsx

Sao chépChỉnh sửa

// AppContext.js

import React, { createContext, useState } from 'react';

export const AppContext = createContext();

export const AppProvider = ({ children }) => {

const [user, setUser] = useState(null);

return (

<AppContext.Provider value={{ user, setUser }}>

{children}

</AppContext.Provider>

);

};

jsx

Sao chépChỉnh sửa

// Sử dụng trong App.js

import { AppProvider } from './AppContext';

export default function App() {

return (

{/* Stack Navigator */}

</NavigationContainer>

</AppProvider>

);

}

Ngày 4: Giao tiếp với API và Xử lý Dữ liệu

Mục tiêu: Làm việc với dữ liệu từ API, xử lý bất đồng bộ và quản lý dữ liệu.

Nội dung & Ví dụ:

Sử dụng fetch hoặc axios để gọi API:
Ví dụ gọi API lấy danh sách người dùng từ JSONPlaceholder:

jsx

Sao chépChỉnh sửa

import React, { useState, useEffect } from 'react';

import { View, Text, FlatList, ActivityIndicator, StyleSheet } from 'react-native';

export default function UsersList() {

const [users, setUsers] = useState([]);

const [loading, setLoading] = useState(true);

const [error, setError] = useState(null);

useEffect(() => {

const fetchUsers = async () => {

try {

const response = await fetch('https://jsonplaceholder.typicode.com/users');

const data = await response.json();

setUsers(data);

} catch (err) {

setError(err);

} finally {

setLoading(false);

}

};

fetchUsers();

}, []);

if (loading) {

return <ActivityIndicator size="large" color="#0000ff" />;

}

if (error) {

return <Text>Lỗi: {error.message}</Text>;

}

return (

<FlatList

data={users}

keyExtractor={(item) => item.id.toString()}

renderItem={({ item }) => (

<Text>{item.email}</Text>

</View>

)}

);

}

const styles = StyleSheet.create({

item: {

padding: 16,

borderBottomWidth: 1,

borderBottomColor: '#ccc',

});

Xử lý bất đồng bộ với async/await và error handling:
Ví dụ ở trên đã minh họa cách sử dụng async/await và try/catch.

Ngày 5: Tích hợp Native Modules & Tối ưu Hiệu Suất

Mục tiêu: Khám phá cách tích hợp các module native và tối ưu hóa ứng dụng.

Nội dung & Ví dụ:

Tích hợp các module native:
Ví dụ sử dụng react-native-gesture-handler cho cử chỉ vuốt:
- Cài đặt thư viện:

bash

Sao chépChỉnh sửa

npm install react-native-gesture-handler

Ví dụ sử dụng Gesture Handler:

jsx

Sao chépChỉnh sửa

import React from 'react';

import { View, Text, StyleSheet } from 'react-native';

import { GestureHandlerRootView, Swipeable } from 'react-native-gesture-handler';

const RightActions = () => {

return (

</View>

);

};

export default function SwipeableItem() {

return (

</View>

</Swipeable>

</GestureHandlerRootView>

);

}

const styles = StyleSheet.create({

item: {

padding: 20,

backgroundColor: '#fff',

borderBottomWidth: 1,

borderColor: '#ccc',

rightAction: {

backgroundColor: '#ff0000',

justifyContent: 'center',

alignItems: 'flex-end',

padding: 20,

actionText: {

color: '#fff',

fontWeight: '600',

});

Tối ưu hiệu suất:
Ví dụ sử dụng FlatList để hiển thị danh sách dài:

jsx

Sao chépChỉnh sửa

import React from 'react';

import { View, Text, FlatList, StyleSheet } from 'react-native';

const data = Array.from({ length: 1000 }, (_, i) => ({ id: i.toString(), title: `Item ${i}` }));

export default function OptimizedList() {

return (

<FlatList

data={data}

keyExtractor={(item) => item.id}

renderItem={({ item }) => (

<Text>{item.title}</Text>

</View>

)}

initialNumToRender={20}

);

}

const styles = StyleSheet.create({

item: {

padding: 10,

borderBottomWidth: 1,

borderColor: '#eee',

});

Ngày 6: Testing, Debugging & Phát hành

Mục tiêu: Nắm vững cách kiểm thử, gỡ lỗi và chuẩn bị ứng dụng cho môi trường production.

Nội dung & Ví dụ:

Debugging với React Native Debugger và console.log:
Ví dụ:
- Thêm console.log trong component:

jsx

Sao chépChỉnh sửa

useEffect(() => {

console.log('Component mounted');

}, []);

Sử dụng React Native Debugger (cài đặt React Native Debugger) để theo dõi state và props.

Testing với Jest:
Ví dụ viết unit test cho một component đơn giản:

jsx

Sao chépChỉnh sửa

// MyComponent.js

import React from 'react';

import { View, Text } from 'react-native';

export default function MyComponent({ message }) {

return (

<View>

<Text>{message}</Text>

</View>

);

}

jsx

Sao chépChỉnh sửa

// __tests__/MyComponent.test.js

import React from 'react';

import renderer from 'react-test-renderer';

import MyComponent from '../MyComponent';

test('Hiển thị message đúng', () => {

const tree = renderer.create(<MyComponent message="Xin chào" />).toJSON();

expect(tree).toMatchSnapshot();

});

Chạy test với lệnh:

bash

Sao chépChỉnh sửa

npm test

Chuẩn bị build và phát hành:
Ví dụ:
- Nếu dùng Expo, bạn có thể chạy:

bash

Sao chépChỉnh sửa

expo build:android

expo build:ios

Đối với React Native CLI, hãy tham khảo tài liệu Build and Release Apps.

Ngày 7: Xây dựng Dự Án Mini

Mục tiêu: Ứng dụng tất cả kiến thức đã học để xây dựng một ứng dụng hoàn chỉnh.

Nội dung & Ví dụ:

Lên ý tưởng dự án:
Ví dụ: Xây dựng một ứng dụng ToDo đơn giản với các tính năng:
- Thêm task.
- Hiển thị danh sách task.
- Đánh dấu task đã hoàn thành.
Cấu trúc dự án:
- Components: ToDoList, ToDoItem, AddTaskForm.
- Navigation: Một màn hình chính cho danh sách tasks.
- Quản lý trạng thái: Sử dụng useState hoặc Context API để quản lý danh sách tasks.
Ví dụ code dự án ToDo:

jsx

Sao chépChỉnh sửa

// App.js

import React, { useState } from 'react';

import { View, Text, FlatList, StyleSheet, TextInput, Button } from 'react-native';

export default function App() {

const [tasks, setTasks] = useState([]);

const [input, setInput] = useState('');

const addTask = () => {

if (input.trim() !== '') {

setTasks([...tasks, { id: Date.now().toString(), title: input, completed: false }]);

setInput('');

}

};

const toggleTask = (id) => {

setTasks(

tasks.map(task =>

task.id === id ? { ...task, completed: !task.completed } : task

)

);

};

return (

<TextInput

style={styles.input}

body{ background-color: #fff; } .news-banner{ padding-top: 70%; background-repeat: no-repeat; background-position: center; background-size: cover; } .news-info-banner-item .breadcrumb-item a{ color: #fff; } .news-info-banner-item .breadcrumb-item.active{ color: #fff; font-weight: bold; }