Series
CodeFresher hướng dẫn lập trình React Native với Typescript – giúp bạn nắm được cơ bản về lập trình mobile React Native, thực hành theo hướng dẫn và có được những ứng dụng vào công việc thực tế.
Cài đặt môi trường lập trình React Native (Typescript) – Chạy và debug app
Cấu trúc dự án React Native (Typescript) sử dụng function components
Cách dùng Stylesheet CSS để style giao diện trong React Native
Hướng dẫn sử dụng Props trong React Native – Demo code
Giới thiệu Props, State, Hooks trong lập trình React Native
Giới thiệu và ứng dụng State, React Hooks trong lập trình React Native
Demo code sử dụng Hooks: useEffect, useCallback trong lập trình React Native
Demo code sử dụng useMemo, custom Hooks trong lập trình React Native
Giới thiệu High order components, demo code – lập trình React Native
Code màn hình Login bằng React Native Components, Props, Hooks
Xử lý Navigation trong project React Native (Typescript) – Phần 1
Xử lý Navigation trong project React Native (Typescript) – Phần 2 – Bottom Navigation
Giới thiệu React Redux – Hướng dẫn ứng dụng vào code project
Hướng dẫn Code ứng dụng xem phim bằng React Native (Typescript)
Updating…
Cách đăng ký khoá học CodeFresher: ib page fb.com/CodeFresherVN hoặc điền form sau: //forms.gle/WYMuwame4UEXygMy9 , SĐT: 081.318.8668
Series
CodeFresher hướng dẫn lập trình React Native (update mới nhất 2023) – giúp bạn nắm được cơ bản đến nâng cao về lập trình React Native (Javascript + Typescript), thực hành theo hướng dẫn, làm dự án app React Native thực chiến.
Học lập trình mobile React Native – Buổi 1 – Giới thiệu, cài đặt môi trường, chạy project app
Học lập trình mobile React Native – Buổi 2 – chạy app trên Expo, CLI – thực hành UI cơ bản
Học lập trình mobile React Native – Buổi 3 – Stylesheet cơ bản, Thực hành FlatList
Học lập trình React Native – Buổi 4 – Thực hành FlatList, SectionList, Callback
React Native – Buổi 5 (tóm tắt) – Tìm hiểu và thực hành về Props, State
Liên hệ
Địa chỉ: Tầng 5, Tòa nhà Diamond Flower, số 1 Hoàng Đạo Thúy, Thanh Xuân, Hà Nội Email: contact@codefresher.vn Hotline: 081.318.8668 (call / mess / zalo)
Nó giúp các Startup và cả các công ty lớn nhanh chóng phát hành ứng dụng với chi phí và thời gian thấp hơn rất nhiều so với trước đây.
React Native tốt không?
Có!
Bạn có muốn học nó không?
Có!
Mình cũng vậy, mình tìm hiểu về React Native và cách nó giúp mình xây dựng các ứng dụng iOS và Android.
Nhưng "What the fu*k", thực sự thì đường cong học tập và độ khó của React Native không giống như HỌC JAVASCRIPT THUẦN
Và mình cũng đã phải nỗ lực "Vài lần" để học nó.
Để bạn bớt mông lung hơn, mình viết ra tất cả những thứ bạn sẽ cần học để có một lộ trình học React Native suôn sẻ.
Cho dù bạn là lập trình viên phát triển web có kinh nghiệm hoặc bạn mới học lập trình thì thì lộ trình học React Native 2022 này đều dành cho bạn.
Khóa học Lập trình App với React Native ngay hôm nay<<<
3. REACT VS REACT NATIVE
Điểm tương đồng giữa hai công nghệ này không chỉ ở tên gọi mà cả hai đều được sử dụng ở phía front end và dựa trên Javascript.
Sự khác biệt là React được sử dụng trên Web và React Native thì sử dụng trên thiết bị di động.
Rất nhiều khái niệm và cú pháp trong React Native cũng giống như trong React.
Điều này dẫn đến một vấn đề.
Một số chuyên gia khuyên bạn nên học React trước khi học React Native và một số thì không.
Để giải quyết câu hỏi này thì chúng ta đến câu hỏi tiếp theo.
4. CÓ PHẢI HỌC REACT.JS TRƯỚC REACT NATIVE?
Mình thực sự khuyên bạn nên HỌC REACT.JS trước khi học React Native.
Mặc dù có thể có những người học React Native ngay và xây được ứng dụng di động chỉ trong vài tuần.
Nhưng chúng ta không phải họ.
Tốt nhất là học chắc chắn từ đầu. Không đi đâu mà phải vội cả.
\> Xem thêm: LỘ TRÌNH HỌC REACT.JS
5. ĐIỀU KIỆN TIÊN QUYẾT TRƯỚC KHI HỌC REACT NATIVE
Như đã nói ở trên, lộ trình này hướng dẫn cả cho người bắt đầu từ đầu. Nếu bạn đã có kinh nghiệm thì có thể kéo xuống để tiếp tục sang các phần tiếp theo.
5.1. Kiến thức lập trình Web căn bản
Như đã nói ở trên, để học React Native thì tốt nhất bạn nên có kinh nghiệm lập trình web trước.
Hoặc, có thể bạn không cần có kinh nghiệm đi làm lập trình web.
Thì tối thiểu bạn cần hoàn thành một khóa học lập trình web nào đó để hiểu được những thứ cơ bản: Kỹ thuật lập trình, Cơ sở dữ liệu (Học SQL), HTML, CSS, JavaScript...
5.2. ES6 và JavaScript nâng cao
Bạn nên thành thạo các kỹ thuật làm việc với mảng, đối tượng.
Vận dụng tốt các phương thức map / reduce / filter, toán tử rest / spread, lập trình hàm, arrow function.
Hiểu sự khác nhau của let / const / var trong JS.
\> Đọc thêm: CÁC TÍNH NĂNG CỦA ES6
5.3. Node.js
Nodejs là một công nghệ dành cho Back end. Tuy nhiên, mình khuyên bạn nên học nó vì bạn sẽ sử dụng code của node.js trong React Native.
Nhiều khái niệm sẽ gặp phải trong React Native là:
- NPM
- Các lệnh như npm install, npm install - save-dev, npm start, ...
- Promises / Callbacks / Async Await (Đọc thêm: Xử lý bất động bộ trong JS)
Thử hoàn thành một vài ứng dụng thô sơ như CRUD, to-do apps, kết nối thành công với một số cơ sở dữ liệu là cực kỳ quan trọng.
Hoặc bạn có thể thực hiện một số loại ứng dụng Thương mại điện tử hoặc chat app nếu bạn muốn hiểu sâu hơn.
5.4. React
Không bắt buộc phải học React nhưng mình thực sự khuyên bạn nên học React trước và ít nhất là hiểu về các chủ đề sau:
- Components (Class với Functional)
- Kiểm soát các thành phần
- Handlers
- this.setState và this.props trong React
- Life cycle methods (Một chuỗi các sự kiện xảy ra từ khi thành phần React ra đời cho đến khi nó chết.)
- Fetch/Axios để gọi APIs
5.5. Redux với React
Vì state được duy trì ở cấp component trong React, bạn có thể chuyển các handler với các biến cho các component con từ cha mẹ và ngược lại.
Những thứ này sẽ trở nên lộn xộn và khó quản lý khi ứng dụng của bạn phát triển và phức tạp hơn.
Thế nên, chúng ta có Redux.
Nhưng tài liệu chính thức nói rằng đừng quá vội vàng để sử dụng redux. Đôi khi trong các ứng dụng nhỏ, tốt hơn là không sử dụng redux.
Vì vậy, hãy sử dụng nó sau khi đã học những kiến thức cơ bản về React.
Bạn cũng có thể học redux trong react native và nó vẫn hoàn toàn giống nhau. Nhưng lý do khi học Redux với React là bạn sẽ tìm thấy rất nhiều câu trả lời và hỗ trợ cộng đồng trên Redux.
\> Nếu bạn là người mới bắt đầu. mình đề nghị bạn nên tham gia một KHÓA HỌC FRONT END (Với React.js) trước khi bắt đầu học React Native.
5.6. Flexbox
Nếu bạn chưa biết Flexbox thì bạn phải học nó. Flexbox rất hữu ích trong việc thiết kế giao diện người dùng và thành phần quan trọng của Lộ trình học React Native.
Nó sẽ đòi hỏi bạn ít thời gian để nắm bắt và bạn sẽ có những lợi ích to lớn trong việc tạo kiểu dáng cho các thành phần của mình.
Mình gợi ý cho bạn FlexboxFroggy, trang web này có 24 bài tập nhỏ và bạn sẽ hiểu ý tưởng của Flexbox sau khi làm hết chúng.
\> Hoặc bấm vào đây để HỌC FLEXBOX đầy đủ hơn.
\> Hay thử học với 8 HƯỚNG DẪN FLEXBOX thú vị này
5.7. Một số kiến thức nên biết khác
Về mặt kỹ thuật, điều kiện tiên quyết của Lộ trình học React Native đã đủ. Nhưng mình muốn đề xuất thêm một số công nghệ bạn nên tìm hiểu.
Những thứ này không bắt buộc phải biết nhưng bạn sẽ có thể viết ứng dụng di động hiệu quả hơn nếu bạn cũng biết chúng.
- redux-thunk
- redux-saga
- LESS, SASS
- React hooks
- TypeScript
- Proptypes
- Bất kỳ cơ sở dữ liệu nào để kết nối ứng dụng của bạn, tốt nhất là Firebase (đây là một giải pháp đám mây tốt của Google để xác thực, cơ sở dữ liệu, lưu trữ...)
6. NHẢY VÀO HỌC REACT NATIVE THÔI
Bây giờ bạn đã thu thập đủ các điều kiện tiên quyết, bạn đã có thể bắt đầu học React Native ngay.
Nhưng đợi một chút...
Hãy nhớ thiết lập môi trường cho React Native tại đây.
Và chúng ta có 2 tùy chọn để thiết lập môi trường cho React Native.
6.1. Expo CLI (hoặc expo init)
Vì vậy, một lần nữa hai tùy chọn để lựa chọn.
Chọn cái nào.
- Chọn cả hai
- Từng cái một
- Và chọn Expo trước.
Nó được xây dựng trên chính dự án React-native CLI.
Nó cung cấp nhiều built-in API và công cụ sẽ giúp bạn không mất nhiều thời gian để thiết lập dự án react-native CLI.
Khi bạn thiết lập môi trường, hãy tiếp tục và kiểm tra React của bạn và tất cả kiến thức bạn đã học bằng cách triển khai những thứ sau:
- Sử dụng các component đơn giản như Image, Text, TouchableOpacity (Button), Alert, Toast, ....
- Debug sử dụng console.log
- Sử dụng Flatlist để hiển thị dữ liệu tĩnh
- Life cycle methods
- Sử dụng API cho dữ liệu động
- Thêm react-navigation
- Thêm Redux
- Làm quen với công cụ hỗ trợ debug
- Thêm redux persist
- Redux persist với storge
- và ....
Nhưng tại sao chúng ta lại có React-native CLI nếu Expo hữu ích đến vậy?
"CÁI GÌ CŨNG CÓ LÝ DO CỦA NÓ"
Nhiều APIs gốc chưa được hỗ trợ trong Expo như Bluetooth, chỉ hỗ trợ Android 5+ và iOS 10+....
Đọc thêm về các giới hạn của Expo tại đây.
Và để khắc phục điều đó, bạn sẽ phải chuyển sang...
6.2. React Native CLI (hoặc react-native init)
Như chúng ta đã thảo luận rằng Expo CLI bị giới hạn, vì thế, chúng ta sử dụng React-native CLI để tạo ứng dụng. Nó cung cấp cho chúng ta nhiều tính năng hơn.
Chúng ta có các dự án khác nhau cho iOS và Android. Vì vậy, chúng ta có thể tích hợp SDK của bên thứ 3 hoặc viết cầu nối để giao tiếp giữa bản gốc và Javascript.
Đối với nhiều dự án vừa đến lớn, bạn nên chuyển từ Expo CLI đến React-native CLI.
Mẹo:
- Trước tiên, hãy chạy ứng dụng của bạn trên trình giả lập, sau đó trên thiết bị của bạn.
- Chạy code của bạn trên cả hai nền tảng và chạy thường xuyên, khi bạn tích hợp một tính năng mới hoặc cài đặt và liên kết một thư viện mới.
- Nếu bạn gặp lỗi hoặc không mong muốn của ứng dụng, bạn phải tìm kiếm trong các vấn đề "đang mở" của thư viện bạn vừa cài đặt hoặc liên kết.
- Tìm kiếm thêm giải pháp trên Google. Bởi vì React Native vẫn đang phát triển, thay đổi. Thế nên, bạn sẽ thường xuyên thấy một số lỗi và cảnh báo không mong muốn.
TẠM KẾT
Đó là tất cả về LỘ TRÌNH HỌC REACT NATIVE. Hy vọng mình đã trình bày rõ ràng tất cả các bước quan trọng và hành trang cần chuẩn bị trước khi nhảy vào React Native.
>>> Đăng ký nhận ưu đãi 40% cho Khóa học Lập trình App với React Native ngay hôm nay<<<
Chúc bạn học tốt.
Có thể bạn sẽ thích:
- LỘ TRÌNH HỌC LẬP TRÌNH iOS
- LỘ TRÌNH HỌC LẬP TRÌNH ANDROID
---
HỌC VIỆN ĐÀO TẠO CNTT NIIT - ICT HÀ NỘI
Học Lập trình chất lượng cao (Since 2002). Học thực tế + Tuyển dụng ngay!
Đc: Tầng 3, 25T2, N05, Nguyễn Thị Thập, Cầu Giấy, Hà Nội
SĐT: 0243.557.4074 - 0383.180086
Email: hello@niithanoi.edu.vn
Fanpage: //facebook.com/NIIT.ICT/