• Home
  • |
  • Hướng dẫn cài đặt React Native đơn giản bao chạy được tháng 01/2020

Tháng Một 10, 2020

Hướng dẫn cài đặt React Native đơn giản bao chạy được tháng 01/2020

React Native là một framework không mấy xa lạ đối với các lập trình viên, đặc biệt là mobile developer. Thế nhưng việc cài đặt react native không phải lúc nào cũng đơn giản và suôn sẻ, thậm chí dù là bạn đã làm theo đúng như hướng dẫn chính chủ của Facebook. Trong bài viết này mình xin chia sẻ các bước cài đặt theo kinh nghiệm thực tế của mình, giúp các bạn đỡ mất thời gian và công sức để làm những thứ hay ho hơn là mò mẫm những config này 😀.

Yêu cầu tối thiểu

Bài hướng dẫn này được viết với các điều kiện như sau:

  1. Macos: Khuyến nghị phiên bản mới nhất (mình đang dùng macos Catalina version 10.15.2)
  2. Xcode: Khuyến nghị phiên bản mới nhất (mình dùng xcode 11.2). Bạn có thể cài từ AppStore hoặc tải trực tiếp. Nhưng mình khuyến khích các bạn tải từ AppStore để đảm bảo độ ổn định được cao hơn, việc cập nhật sau này cũng dễ dàng hơn
  3. Android Studio: Khuyến nghị phiên bản mới nhất.
  4. Homebrew

Thực hiện

Hãy đảm bảo rằng bạn không cài đặt npm từ trang chủ của Node.js. Nếu trong trường hợp đã lỡ cài đặt rồi thì mình thành thật khuyên các bạn hãy xoá nó đi nhé! Vì lúc trước khi mình cài thì các package liên quan có thể chạy vẫn ổn, nhưng đến khi cái đặt react native vào thì lại ra rất nhiều lỗi dị và không khắc phục. Ngoài ra nếu các bạn cài từ nguồn khác ngoài Homebrew hoặc yarn thì cũng nên xoá. Ngày trước lúc mới tập toẹ mình mất toi hơn 2 ngày chỉ cho vụ này 😭.

Sau khi đã làm sạch các phiên bản npm cũ, bạn mở terminal lên và chạy lệnh sau:

brew install yarn

Tiếp theo bạn chạy lệnh ở dưới để cài đặt React Native:

yarn global add react-native-cli

Sau khi chạy xong lệnh này bạn đã có thể tạo 1 project react native, bạn có thể chạy lệnh sau để tạo, vd bạn muốn tạo 1 project có tên HelloWorld:

react-native init HelloWorld

Trong quá trình tạo project terminal có thể sẽ hiện lên thông báo rằng bạn chưa cài đặt Cocoapods:

Bạn chọn cách nào cũng được, nhưng mình đề nghị là cách số 1 vì đây là cách default trên trang chủ của cocoapods. Ngoài ra bản thân mình thực tế cũng hay dùng cách này, cho đến nay thì vẫn ổn định không vấn đề gì cả.

Đợi thêm 1 chút nữa nếu thấy màn hình hiện ra như hình dưới thì tức là bạn đã tạo project thành công:

Đến đây thì bạn đã có thể vào thư mục ios và android để có thể build và test thử rồi đấy 😃!

Tổng kết

Các bạn có thể thấy bài hướng dẫn này mình viết khá ngắn gọn và bỏ nhiều bước so với hướng dẫn có trên trang chủ của React Native. Vì nhìn chung hướng dẫn chỉnh chủ của facebook tuy rất đầy đủ và chi tiết, tuy nhiên nó lại tương đối dài dòng và rắc rối đối với những ai mới làm quen với React Native. Hy vọng thông qua bài viết này các bạn có thể nhanh chóng tiến vào thế giới React Native nhé! 😃

Related Posts

Custom text input trong Eureka

Custom picker row trong Eureka

Hướng dẫn mô hình MVVM trong ios kỳ 4: Dependency Injection và Unit Test ViewController

Hướng dẫn mô hình MVVM trong ios kỳ 3: Unit Test ViewModel

Hiển Phạm


Mình là một lập trình viên ios. Khi rảnh rỗi mình thích chơi game, đọc sách và tìm hiểu nhiều hơn về kỹ thuật lập trình.

Your Signature

Leave a Reply


Your email address will not be published. Required fields are marked

{"email":"Email address invalid","url":"Website address invalid","required":"Required field missing"}