11/10/2019, 10:11

Học React Native từ cơ bản đến nâng cao - Phần 8: Xây dựng Base Project (Boilerplate) cho React Native

Chào các bạn ! Trong bài viết ngày hôm nay tôi sẽ giới thiệu 1 React Native Boilerplate để các bạn dễ dàng áp dụng vào 1 dự án thực tế. Thực tế thì React Native Boilerplate này của tôi của chưa đầy đủ tất cả trường hợp nhưng trong thời gian tới tôi sẽ làm 1 ứng dụng dựa trên Boilerplate này ...

Chào các bạn ! Trong bài viết ngày hôm nay tôi sẽ giới thiệu 1 React Native Boilerplate để các bạn dễ dàng áp dụng vào 1 dự án thực tế.

Thực tế thì React Native Boilerplate này của tôi của chưa đầy đủ tất cả trường hợp nhưng trong thời gian tới tôi sẽ làm 1 ứng dụng dựa trên Boilerplate này để dần dần hoàn thiện nó.

Với Boilerpate này bạn sẽ giải quyết được những vấn đề cơ bản sau:

  1. Thống nhất bộ công cụ hỗ trợ cho VSCode và chuẩn format code chung giữa các thành viên trong team => Điều này sẽ giúp review code trên Github dễ dàng hơn.
  2. Bố cục và phân bố các file code có tổ chức

Vâng anh em chúng ta đều làm dân coder nên nói gì thì nói cũng phải show code ví dụ trước khi nói tiếp:

https://github.com/oTranThanhNghia/SimpleAppReactNative1 (đang tiếp tục hoàn thiện)

Trước tiên tôi muốn thống nhất môi trường của tôi với bạn để dễ làm việc

+ CocoaPods: 1.7.5 (hơn cũng được nhé)
+ Node: 10.15.0
+ React Native: 0.60.5
+ Android Studio: 3.4.1
+ Xcode: 10.2.1
+ Tôi đang dùng: react-native-cli

Như các bạn đã biết VSCode chỉ là 1 editor nên sẽ không bao giờ hỗ trợ tốt như một IDE. Vậy nên tôi gợi ý 1 vài Extensions sau giúp việc coding của bạn dễ thở hơn

  1. React Native Tools https://marketplace.visualstudio.com/items?itemName=msjsdiag.vscode-react-native Cái này thì chắc chắn phải cài khi code React Native rồi ????

  2. vscode-icons https://marketplace.visualstudio.com/items?itemName=vscode-icons-team.vscode-icons

  1. ESLint https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint
  2. Prettier - Code formatter https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode
  3. Babel JavaScript https://marketplace.visualstudio.com/items?itemName=mgmcdermott.vscode-language-babel
  4. Flow Language Support (nếu sau này bạn dùng Flow) https://marketplace.visualstudio.com/items?itemName=flowtype.flow-for-vscode

Ngoài ra các extensions hỗ trợ thêm

  1. Auto Close Tag https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag
  2. Auto Rename Tag https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag
  3. Color Highlight https://marketplace.visualstudio.com/items?itemName=naumovs.color-highlight
  4. GitLens — Git supercharged https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens
  5. TODO Highlight https://marketplace.visualstudio.com/items?itemName=wayou.vscode-todo-highlight
  6. Code Spell Checker https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker
  7. npm https://marketplace.visualstudio.com/items?itemName=eg2.vscode-npm-script
  8. npm Intellisense https://marketplace.visualstudio.com/items?itemName=christian-kohler.npm-intellisense

Config ESLint và Prettier trong project

Các bạn phải cài những thành phần sau trong file package.json

"devDependencies": {
    ...
    "eslint": "^6.4.0",
    "eslint-config-prettier": "^6.3.0",
    "eslint-config-standard": "^14.1.0",
    "eslint-plugin-import": "^2.18.2",
    "eslint-plugin-node": "^10.0.0",
    "eslint-plugin-prettier": "^3.1.1",
    "eslint-plugin-promise": "^4.2.1",
    "eslint-plugin-react": "^7.14.3",
    "eslint-plugin-react-native": "^3.7.0",
    "eslint-plugin-standard": "^4.0.1",
    "prettier": "^1.18.2",
   ...
  }

Bằng lệnh sau:

$ yarn add --dev eslint eslint-config-prettier eslint-config-standard eslint-plugin-import eslint-plugin-node eslint-plugin-prettier eslint-plugin-promise eslint-plugin-react eslint-plugin-react-native eslint-plugin-standard prettier

Sau đó các bạn tạo file .eslintrc (chi tiết https://eslint.org/docs/user-guide/configuring) với nội dung như dưới đây

{
  "plugins": ["react", "react-native", "prettier"],
  "parserOptions": {
    "ecmaVersion": 2018,
    "ecmaFeatures": {
      "jsx": true,
      "modules": true
    },
    "sourceType": "module",
    "useJSXTextNode": false
  },
  "env": {
    "react-native/react-native": true
  },
  "extends": [
    "standard",
    "plugin:react/recommended",
    "plugin:react-native/all",
    "plugin:prettier/recommended"
  ],
  "settings": {
    "react": {
      "version": "detect"
    }
  },
  "rules": {
    "react-native/no-raw-text": 0 // Avoid false positive, wait for fix
  }
}

Okay còn 1 file nữa là .prettierrc (chi tiết https://prettier.io/docs/en/options.html)

{
  "printWidth": 100,
  "tabWidth": 2,
  "useTabs": false,
  "semi": true,
  "singleQuote": true,
  "trailingComma": "es5",
  "bracketSpacing": true,
  "jsxBracketSameLine": false,
  "arrowParens": "always",
  "rangeStart": 0,
  "parser": "babel",
  "requirePragma": false,
  "insertPragma": false,
  "proseWrap": "preserve"
}

Vậy là đến đây là bạn đã chuẩn bị xong project cho để các đồng nghiệp có thể làm chung mà không bị conflict với nhau rồi đấy.

Để đảm bảo bạn không bao giờ quên format code

Các bạn vào Setting của VSCode rồi chọn Format on Save nhé

Trước khi sang phần tiếp theo. Mời các nghe 1 chút nhạc cho thư thái đầu óc nhé

Trước khi đi tiếp tôi muốn chắc chắn rằng bạn đã có kiến thức sau:

  1. Redux là gì ? (bạn có thể tìm hiểu trong https://viblo.asia/p/redux-cho-nguoi-moi-bat-dau-part-1-introduction-ZjleaBBZkqJ)
  2. Redux-saga là gì ? (tài liệu https://viblo.asia/p/redux-middleware-redux-saga-gGJ59X7jlX2)

Bạn phải có kiến thức trên thì mới có thể đọc code được. Vậy nên nếu bạn nào chưa biết redux và redux-saga là gì thì hãy tìm hiểu ngay đi nhé.

Tóm tắt lại redux-saga bạn xem hình mô phỏng dưới đây nhé:

Giải thích cách bố cục

  1. assets chứa các resourses cho dự án

  1. components để chứa các custom về UI

  1. config để cấu hình các môi trường trong dự án

  1. features để chứa các chức năng chính dự án

  1. lib chứa file thư viện js
  2. navigation chứa code điều hướng app
  3. stores nơi chứa store của app
  4. theme chứa các styles hay gọi cách khác là CSS chung của app
  5. utils chứa các code công cụ cần thiết cho app

Đọc code là cách nhanh nhất để hiểu những logic bên trong. Vậy nên bạn hãy clone về máy để chạy thử nhé.

$ git clone https://github.com/oTranThanhNghia/SimpleAppReactNative1.git
$ cd SimpleAppReactNative1
$ yarn 
// đợi 1 lúc để tải node_modules
$ cd ios
$ pod install // cài thư viện cho ios

Lưu ý đối với Android Studio

Do tôi dùng React Native >= 0.60 nên các thư viện sẽ được tự động import vào project Android như sau:

Nhưng nếu không được thì bạn làm theo https://stackoverflow.com/a/56580438/4509964 nhé, để Android Studio đồng bộ lại project

Trong bài viết này tôi sẽ không chụp ảnh demo vì tôi muốn các bạn chạy thử ví dụ của tôi và nhìn thấy kết quả ngay trên thiết bị của bạn.

Tôi biết chắc chắn BẠN CÓ THỂ LÀM ĐƯỢC ! ????

Cảm ơn các bạn đã theo dõi ????.

Trong các bài viết tới mình sẽ tập trung chủ yếu vào xây dựng app vào bài toán thực tế. Mong các bạn đón đọc nhé

  1. https://medium.com/react-native-training/vscode-for-react-native-526ec4a368ce
  2. https://github.com/thecodingmachine/react-native-boilerplate
  3. https://github.com/victorkvarghese/react-native-boilerplate
  4. Sample redux-saga: https://medium.com/@lavitr01051977/make-your-first-call-to-api-using-redux-saga-15aa995df5b6
  5. Docs redux-saga: https://redux-saga.js.org/docs/introduction/BeginnerTutorial.html
  6. https://medium.com/@aksudupa11/redux-sagas-714370b61692
  7. Bind Component Methods https://medium.com/@User3141592/react-gotchas-and-best-practices-2d47fd67dd22 https://reactjsnews.com/es6-gotchas
  8. https://stackoverflow.com/questions/12008120/console-log-timestamps-in-chrome
  9. iOS- Build Fails when Scheme is set to Release https://github.com/facebook/react-native/issues/4210#issuecomment-171944483
Bài liên quan

Học React Native từ cơ bản đến nâng cao - Phần 9: Xây dựng App đọc tin tức đơn giản với React Native và 1 số chia sẻ cá nhân

Trong bài viết này tôi sẽ làm 1 demo để hướng dẫn cách sử dụng Boilerplate được đề cập trong Phần 8: Xây dựng Base Project (Boilerplate) cho React Native. Cho nên bài này tôi sẽ viết ngắn gọn để các bạn có thể bắt đầu đọc code ngay trong link dưới đây. Github: https://github.com/oTranThanh ...

Trịnh Tiến Mạnh viết 10:20 ngày 12/11/2019

Học React Native từ cơ bản đến nâng cao - Phần 8: Xây dựng Base Project (Boilerplate) cho React Native

Chào các bạn ! Trong bài viết ngày hôm nay tôi sẽ giới thiệu 1 React Native Boilerplate để các bạn dễ dàng áp dụng vào 1 dự án thực tế. Thực tế thì React Native Boilerplate này của tôi của chưa đầy đủ tất cả trường hợp nhưng trong thời gian tới tôi sẽ làm 1 ứng dụng dựa trên Boilerplate này ...

Trịnh Tiến Mạnh viết 10:11 ngày 11/10/2019

10 tài liệu lập trình Android từ cơ bản đến nâng cao

Sách lập trình android là một trong những sự trợ giúp đắc lực giúp bạn trở thành nhà lập trình viên chuyên nghiệp. Nhưng hiện nay trên thị trường có rất nhiều cuốn sách học lập trình android. Điều này gây khó ra rất nhiều khó khăn cho người học. Bạn không biết nên chọn cuốn sách nào phù hợp với ...

Bùi Văn Nam viết 09:02 ngày 12/08/2019

Học React Native từ cơ bản đến nâng cao - Phần 6: Giới thiệu AppCenter, CodePush và 1 số chia sẻ cá nhân

Lấy ví dụ 1 chút về Facebook nhé. Vào 1 ngày đẹp giời bạn mở app Facebook ra thấy design thay đổi và thấy thêm 1 số chức năng mới nhưng lạ 1 điều là bạn không hề cập nhật ứng dụng trên Google Play hay App Store. Rồi bạn thắc mắc "Có cách nào để làm như vậy không ?" Câu trả lời của tôi là ...

Tạ Quốc Bảo viết 08:54 ngày 05/08/2019

Học React Native từ cơ bản đến nâng cao - Phần 4: Gọi Native UI (Android) trong React Native

Trong bài viết này tôi sẽ giới thiệu với các bạn cách sử dụng Native UI trong React Native. Do không có nhiều thời gian nên tôi xin phép giới hạn bài này giành cho Android <img alt="

Bùi Văn Nam viết 10:16 ngày 20/07/2019
0