Cài Đặt Môi Trường React Native

React Native là một framework mã nguồn mở được phát triển bởi Facebook, cho phép các nhà phát triển xây dựng các ứng dụng di động native cho cả iOS và Android bằng cách sử dụng JavaScript và React. Để bắt đầu phát triển với React Native, bạn cần thiết lập môi trường phát triển phù hợp. Bài viết này sẽ hướng dẫn chi tiết cách cài đặt môi trường React Native trên cả Windows và macOS, cùng với các ví dụ cụ thể.

Giới Thiệu

Trước khi bắt đầu, bạn cần quyết định xem sẽ sử dụng Expo CLI hay React Native CLI. Expo CLI dễ cài đặt và sử dụng hơn, đặc biệt là cho người mới bắt đầu. Tuy nhiên, nếu bạn cần tích hợp mã native hoặc sử dụng các thư viện không được hỗ trợ bởi Expo, bạn nên sử dụng React Native CLI.

Cài Đặt Môi Trường Trên Windows

1. Cài Đặt Node.js và npm

Node.js là một môi trường chạy JavaScript trên server, và npm (Node Package Manager) là trình quản lý gói đi kèm với Node.js. Để cài đặt Node.js và npm, bạn làm theo các bước sau:

1. Truy cập trang web chính thức của Node.js và tải xuống phiên bản LTS (Long Term Support).
2. Chạy file cài đặt và làm theo hướng dẫn để hoàn tất quá trình cài đặt.

Sau khi cài đặt xong, mở Command Prompt và kiểm tra phiên bản Node.js và npm bằng cách chạy các lệnh sau:

node -v
npm -v

2. Cài Đặt Chocolatey

Chocolatey là một trình quản lý gói cho Windows, giúp cài đặt các phần mềm dễ dàng hơn. Để cài đặt Chocolatey, mở PowerShell với quyền quản trị và chạy lệnh sau:

Set-ExecutionPolicy Bypass -Scope Process -Force; [System.Net.ServicePointManager]::SecurityProtocol = [System.Net.ServicePointManager]::SecurityProtocol -bor 3072; iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))

3. Cài Đặt Java Development Kit (JDK)

React Native yêu cầu JDK để biên dịch mã Android. Để cài đặt JDK, bạn có thể sử dụng Chocolatey:

choco install openjdk8

4. Cài Đặt Android Studio

Android Studio là IDE chính thức để phát triển ứng dụng Android. Để cài đặt Android Studio, làm theo các bước sau:

1. Truy cập trang web chính thức của Android Studio và tải xuống file cài đặt.
2. Chạy file cài đặt và làm theo hướng dẫn để hoàn tất quá trình cài đặt.
3. Mở Android Studio và cài đặt các SDK cần thiết.

5. Cài Đặt React Native CLI

React Native CLI là công cụ dòng lệnh để tạo và quản lý các dự án React Native. Để cài đặt React Native CLI, mở Command Prompt và chạy lệnh sau:

npm install -g react-native-cli

6. Thiết Lập Biến Môi Trường

Để React Native có thể tìm thấy SDK Android, bạn cần thiết lập biến môi trường ANDROID_HOME. Mở Control Panel và làm theo các bước sau:

1. Chọn "System and Security" > "System" > "Advanced system settings".
2. Trong tab "Advanced", chọn "Environment Variables".
3. Thêm biến môi trường mới với tên ANDROID_HOME và giá trị là đường dẫn đến thư mục SDK Android (thường là C:\Users\<Your-Username>\AppData\Local\Android\Sdk).
4. Thêm đường dẫn đến platform-tools vào biến Path.

7. Tạo và Chạy Ứng Dụng React Native

Bây giờ bạn đã sẵn sàng để tạo và chạy ứng dụng React Native đầu tiên của mình. Mở Command Prompt và chạy các lệnh sau:

npx react-native init MyFirstApp
cd MyFirstApp
npx react-native run-android

Cài Đặt Môi Trường Trên macOS

1. Cài Đặt Homebrew

Homebrew là một trình quản lý gói cho macOS. Để cài đặt Homebrew, mở Terminal và chạy lệnh sau:

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

2. Cài Đặt Node.js và npm

Sử dụng Homebrew để cài đặt Node.js và npm:

brew install node

3. Cài Đặt Watchman

Watchman là một công cụ theo dõi thay đổi file, giúp tăng tốc độ phát triển ứng dụng React Native. Cài đặt Watchman bằng Homebrew:

brew install watchman

4. Cài Đặt Java Development Kit (JDK)

Cài đặt JDK bằng Homebrew:

brew install --cask adoptopenjdk/openjdk/adoptopenjdk8

5. Cài Đặt Android Studio

Tải xuống và cài đặt Android Studio từ trang web chính thức. Mở Android Studio và cài đặt các SDK cần thiết.

6. Cài Đặt Xcode

Xcode là IDE chính thức để phát triển ứng dụng iOS. Tải xuống và cài đặt Xcode từ Mac App Store.

7. Cài Đặt React Native CLI

Cài đặt React Native CLI bằng npm:

npm install -g react-native-cli

8. Thiết Lập Biến Môi Trường

Thêm đường dẫn đến SDK Android vào file ~/.bash_profile hoặc ~/.zshrc:

export ANDROID_HOME=$HOME/Library/Android/sdk
export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools

Chạy lệnh sau để áp dụng thay đổi:

source ~/.bash_profile

9. Tạo và Chạy Ứng Dụng React Native

Mở Terminal và chạy các lệnh sau để tạo và chạy ứng dụng React Native đầu tiên của bạn:

npx react-native init MyFirstApp
cd MyFirstApp
npx react-native run-ios

Kết Luận

Việc cài đặt môi trường React Native có thể đòi hỏi một số bước thiết lập ban đầu, nhưng khi đã hoàn tất, bạn sẽ có một môi trường phát triển mạnh mẽ để xây dựng các ứng dụng di động native cho cả iOS và Android. Hy vọng bài viết này đã cung cấp cho bạn một hướng dẫn chi tiết và dễ hiểu để bắt đầu với React Native. Chúc bạn thành công trong hành trình phát triển ứng dụng di động của mình!