Xây dựng ứng dụng đầu tiên với React Native

Xây dựng ứng dụng đầu tiên với React Native, sau bài cài đặt React Native tiếp theo chúng ta cùng tạo một một ứng dụng React Native và xem trong đó có những gì nào 🚀

Trước khi vào code một ứng dụng React Native chúng ta cần hiểu sơ qua cấu trúc project của một dự án React Native, các file trong một project React Native dùng để làm gì, hay các tổ chức file theo từng sở thích của người sử dụng 

Các bạn có để ý ở bài cài đặt React Native không chúng ta sử dụng npm, và cài đặt thư viện react-native bằng lệnh

npm i -g react-native-cli

sau khi cài đặt React Native ở chế độ global nên chúng ta chỉ cần bật terminal là có thao tác được với thư viện qua các lệnh command line:

Sau đây là một số lệnh hay được sử dụng khi lập trình react-native:

react-native -v  // kiểm tra phiên bản react-native-cli, react-native trong project react-native 
react-native -help // lệnh hiển thị giúp đỡ

react-native init <projectName> // lệnh tạo một project mới 

// lệnh tạo một project mới, khi phiên bản react-native mới nhất đang bị lỗi sấp mặt thì trở về phiên bản cũ
// ổn định hơn là giải pháp ngồi fix, hay lên github đọc comment *** nhau 
react-native init <projectName> --version <Version React Native>
react-native init appdemo --version 0.57.5  // ví dụ 


react-native run-android // chạy react-native cho thiết bị Android 
react-native run-android --variant=release // chạy react-native release trên môi thiết bị Android  
react-native run-ios // chạy react-native cho thiết bị IOS


react-native install <package-name> // Cài đăt thư viện mới, sau đó link thư viện nếu thư viện đó có module native
react-native link <package-name> // Link module native vào project react-native 

react-native log-android // log android
react-native log-ios // log ios 
react-native info // hiển thị thông tin, môi trường chạy react-native

Tiếp theo ta sẽ tạo một project React Native mới

react-native init appdemo
cd appdemo
react-native run-ios 

Lưu ý: Các bạn để ý sẽ thấy khi chạy react-native thì có một màn hình terminal bật lên màn hình này chính là một cái server chứa code javascript của bạn ứng dụng load từ đây về thông qua giao thức socket, chính vì thế react native mới có chức năng Hot Reload max xịn, khi thay đổi code javascript mà không cần build lại ứng dụng, chức năng được sử dụng khi app và server đang chạy, trên IOS bấm "Command + D" Chọn Reload, trên Android bấm R + R

Khi chạy project started của React Native thành công rồi chúng ta vào project vừa được sinh ra có gì ở trong

Sau đây là những file, folder chúng ta hay tao tác khi lập trình với React Native:

package.json

File package.json là một file rất quan trọng của các ứng dụng nodejs, trong đây chứa cấu hình các thư viện cài thêm mà trong project chính của chúng ta đang sử dụng, để ý chúng ta sẽ thấy có hai mục chứ thư viện: dependencies, devDependencies

dependencies

Là nơi chứa các thư viện được sử dụng trong code, và nó sẽ được mang đi theo khi chúng ta tạo bản release, hay deploy code lên server

devDependencies

Là nơi chứa các thư viện dùng trong môi trường dev cho các lập trình viên khi đang phát triển ứng dụng, khi deploy, hay release thì nó không được mang đi theo lên nó không hề ảnh hưởng đến app của chúng ta, không có các thư viện này thì app trên môi trường production vẫn chạy không hề phát sinh ra các lỗi liên quan tới thư viện
- Để ý thấy có phần Scripts: Đây là nơi chứa các kịch bản mà chúng ta tạo gia giúp việc tự đông hoá, hay giảm tải việc gõ lệnh, không phải nhớ các lệnh phức tạp

app.json

Là file chứa thông tin cơ bản của ứng dụng như: tên app, tên hiển thị của app

index.js 

Là file code chạy đầu tiên khi khởi động ứng dụng React Native, để ý các bạn sẽ thấy khi đặt file là /test/index.js khi gọi tới thư mục test mặc định compiler sẽ hiểu là gọi đến file index.js, bạn muốn gọi đến file khác trong thư mục test/ thì bạn phải chỉ rõ trên file mà bạn muốn gọi ra ví dụ: /test/main.js

.gitignore

 File của github không check các file này, tránh việc up các file không cần thiết lên github

.flowconfig

File này là một library tên là flow, của facebook phát triển với mục đích kiểm tra kiểu cho các biến trong react-native, tại sao phải có việc này vì javascript là một ngôn ngữ rất mềm dẻo lên nó không có kiểu, khi sau này sự án lớn dần lên, code của bạn lại rẩt lỏng lẻo gặp lỗi bạn không biết tại sao, lúc đó bạn ước gì code của mình code kiểu, có thể đặt log xịn như Java, C#...

.babelrc

Đây là file config cho vụ build file js chuẩn ES6, ES7 sang ES5, đơn giản vì khi bạn code React Native là bạn đang code trên chuẩn Javascript xịn nhất rồi, mà phiên bản javascript chạy ổn định phổ biến vẫn là mấy phiên bản JS cũ, lên chúng ta chuyển về cái JS cũ hơn thế thôi, đoán vậy  😂

node_modules folder

Là thư mục chứa toàn bộ thứ viện cần cho dự án của bạn, các thư viện bạn cấu hình trong file package.json khi bạn chạy lênh

npm install

thì nó sẽ tải thư viện này về máy của bạn và ném vô node_modules, nhiều bạn thắc mác tại sao trong cái package.json có ít thư viện mà mình cần, nhưng sau khi chạy lệnh npm install nó tải về mấy trăm cái thư việc trong node_modules đó chính là sự ngu người của mấy cái mã nguồn mở các lib được viết ồ ạt theo quan điểm cá nhân của từng người, mọi  người dựa vào đó phát triển thêm, cứ thằng này lấy của thằng khác xong xây ra cái thư viện mà mình coi là bá, thực ra nó cũng chưa được kiểm nghiệm rồi vứt lên github anh em mang về sài lỗi sấp mặt anh em nhảy vào contribute xong tạo thành một đống hỗn độn như cái thư mục node_modules, đấy là nói mặt xấu thôi nhé, mặt tốt nói nhiều rồi không cần nhắc lại ai cũng biết rồi  😂

android folder

Chứa toàn bộ một project native android như bình thường, tất nhiên project này code bằng java, và dùng android studio mở ra được và code ầm ầm được rồi

ios folder 

Chứa toàn bộ project native ios, hai project này bạn sẽ cần quan tâm khi dùng các thư viện mà nói gọi tới các native module


Đến đây là mình đã giới thiệu xong một Project React Native cơ bản trong nó có cái gì, và để làm gì rồi nhé.

Like fanpage, chia sẻ bài viết để ủng hộ mình nhé !!