LỘ TRÌNH HỌC REACT NATIVE HIỆU QUẢ ĐƯỢC NHIỀU BẠN ÁP DỤNG NĂM 2022

React Native là công nghệ đang chiếm thế thượng phong trong phát triển ứng dụng di động đa nền tảng.


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.

Mặc dù nhiều người sẽ nói rằng có thể bạn không cần phải học bất kỳ thứ gì trước khi học React Native. Cứ nhảy vào đọc React Native Docs


Nhưng thực sự, việc phát triển ứng dụng di động với React Native đòi hỏi phải phải kết hợp nhiều kiến thức, kinh nghiệm và cần có thời gian để "chiêm nghiệm".


Thậm chí:



Vì vậy, nếu không có nền tảng gì mà bạn nhảy vào React Native ngay thì chúc mừng bạn:




Thế thì...

1. KHI NÀO CÓ THỂ BẮT ĐẦU HỌC REACT NATIVE?

Mình nghĩ, thời điểm tốt nhất để bắt đầu học lập trình ứng dụng di động với React Native là khi bạn đã có kinh nghiệm lập trình web ít nhất 1 năm (Hoặc nhiều năm).


Bởi vì HỌC LẬP TRÌNH WEB tương đối dễ dàng hơn.


Và bằng cách dành đủ thời gian để thực hành, bạn sẽ học được rất nhiều thứ như:

• Các khái niệm cơ bản về lập trình

• Lập trình hướng đối tượng (OOP)

• Cơ sở dữ liệu

• Cách xử lý lỗi

• Cách giải quyết vấn đề (đến lúc này bạn đã được giới thiệu và cảm ơn Github và StackOverflow).

Bên cạnh đó, một số công nghệ web có thể được sử dụng trên thiết bị di động hoặc các khái niệm sẽ tương tự như:

• JavaScript

• Hướng đối tượng (OOP)

• Lập trình hàm

• CSS

• Form...

• ...

2. REACT NATIVE CÓ DỄ KHÔNG?

Mình không muốn dọa bạn, nhưng mình phải trung thực.


Học lập trình ứng dụng di động không phải dễ ăn đâu.


Nó tương đối khó hơn so với lập trình web.


React Native cũng vậy.


Nhưng rất may cho bạn là, một khi bạn có kiến ​​thức tốt về tất cả các khái niệm cơ bản và các công nghệ mà mình sẽ đưa ra ở phần dưới thì nó không quá khó.

>>> Đă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<<<

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?



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

---