Friday, January 22, 2021
Lưu Xuân Trường's Blog
  • Trang chủ
  • Backend
    • Laravel
    • Golang
    • NodeJS
    • MongoDB
    • Redis
    • WordPress
      • Kinh nghiệm
      • Plugins
  • Frontend
    • CSS
    • Javascript
      • ReactJS
      • UmiJS
      • VueJS
      • NuxtJS
      • Angular
      • RxJS
    • Game HTML5
  • Mobile
    • React Native
    • IOS
    • Android
    • Flutter
  • Tutorials
    • Redux-Saga
  • How to
  • Góc Ngoài Lề
    • Sống Chậm Nghĩ Sâu
    • Câu Hỏi Phỏng Vấn
    • IQ Test
  • Liên Hệ
No Result
View All Result
  • Trang chủ
  • Backend
    • Laravel
    • Golang
    • NodeJS
    • MongoDB
    • Redis
    • WordPress
      • Kinh nghiệm
      • Plugins
  • Frontend
    • CSS
    • Javascript
      • ReactJS
      • UmiJS
      • VueJS
      • NuxtJS
      • Angular
      • RxJS
    • Game HTML5
  • Mobile
    • React Native
    • IOS
    • Android
    • Flutter
  • Tutorials
    • Redux-Saga
  • How to
  • Góc Ngoài Lề
    • Sống Chậm Nghĩ Sâu
    • Câu Hỏi Phỏng Vấn
    • IQ Test
  • Liên Hệ
No Result
View All Result
Lưu Xuân Trường's Blog
No Result
View All Result

Giới thiệu về UmiJS P1 (Tổng quan về umiJS)

truongluu by truongluu
31/10/2020
in ReactJS, UmiJS
Reading Time: 5min read
0 0
4
Giới thiệu về UmiJS P1 (Tổng quan về umiJS)
0
SHARES
682
VIEWS
Share on FacebookShare on Twitter

Một khi các bạn đã quen với cách làm việc của ReactJS thì bước tiếp theo là tự mình build một cấu trúc chuẩn để làm việc, hoặc chọn 1 framework ReactJS để làm việc.
Trước khi mình biết đến umiJS hay dvaJS thì mình cũng đã build qua, nhưng mà sài umiJS đã quá, nên thôi không nên build những gì mà người ta đã làm quá tốt rồi (trừ khi bạn có thể build cấu trúc tốt hơn :)).
Bài viết này mình sẽ đi qua mô tả về umiJS, không đề cập tới dvaJS hay những gì liên quan reactJS nữa, những điểm mình thích khi làm việc với umiJS gồm những điểm sau:

  1. Tích hợp sâu với kiến trúc dvaJS (dvaJS là gì tham khảo link)
  2. Khỏi tạo nhanh 1 ứng dụng reactJS với 1 vài câu lệnh. (dùng umi-cli cài đặt bằng cách install umi package)
    1
    yarn global add umi
  3. Hổ trợ luôn server side render (SSR), 1 tính năng quá tiện khi dùng.

dùng umiJS bạn có dc gì, đó là có được 1 bộ admin reactJS Antd Design Pro, 1 ứng dụng react bên ngoài, và nếu muốn làm SSR thì có luôn, chỉ cần bật cấu hình ssr: true trong file cấu hình

1
2
3
export default {
  ssr: true,
};

I. Giới thiệu về umiJS:

Theo như tác giả mô tả thì umiJS là 1 bộ khung ứng dụng react cấp doanh nghiệp có khả năng cắm (pluggable) (nghe to tát đó), vì nó hổ trợ coi như đủ cho doanh nghiệp dùng, không cần phải viết thêm gì, dùng không cũng không hết 🙂 (theo ý mình)

II. Tính năng umiJS:

  • 📦 Out of box, tích hợp sẵn hổ trợ cho react, react-router, ….
  • 🏈 Next.js like and full featured routing conventions, hổ trợ cấu hình định tuyến
  • 🎉 Complete plugin system, bao gồm mọi vòng đời từ mã nguồn tới xuất bản
  • 🚀 High performance, với hổ trợ cho PWA, route-level code splitting, …. bằng plugin (có khả năng cắm ở đây, khi dùng umiJS nó sẽ cung cấp 1 số plugin cho mình gắn vào dùng)
  • 💈 Support for static export, thích hợp với nhiều môi trường khác nhau, như console app, mobile app (cấu hình fastclick, PWA), egg, …
  • 🚄 Fast dev startup, hổ trợ dll với việc cấu hình
  • 🐠 Compatible with IE9, dựa trên umi-plugin-polyfills
  • 🍁 Support TypeScript, bao gồm định nghĩa  d.ts và umi test
  • 🌴 Deep integration with dva, hổ trợ kiến trúc thư mục duck, tự động load model, chia nhỏ code, …

III. Một số câu lệnh thường dùng:

  1. Để tạo 1 ứng dụng với umiJS, gồm các bước
    • tạo thư mục ứng dụng: ví dụ umi-helloworld
    • vào trong thư mục vừa tạo, gõ lệnh:
      1
      yarn create umi
    • Sau khi gõ lệnh trên màn hình tiếp theo hiển thị cho bạn lựa chọn:
      1
      2
      3
      4
      5
      6
      ? Select the boilerplate type (Use arrow keys)
        ant-design-pro  - Create project with an layout-only ant-design-pro boilerplate, use together with umi block.
      ❯ app             - Create project with a simple boilerplate, support typescript.
        block           - Create a umi block.
        library         - Create a library with umi.
        plugin          - Create a umi plugin.

      – antd-design-pro: tạo dự án với layout là bản mẫu ant-design-pro
      – app: Tạo dự án với bản mẫu đơn giản, hổ trợ typescript (mình hay chọn phần này)
      mấy mục (block, library, plugin), umiJS cung cấp thêm để mình có thể xây dựng thêm plugin cho umi, này mình chưa dùng tới các bạn có thể tham khảo thêm nếu muốn trên umiJS.
    • Tiếp theo nó sẽ hỏi bạn có chọn typescript không, cài này tùy các bạn nếu thích làm việc với typescript thì chọn Yes
      1
      ? Do you want to use typescript? (y/N)
    • Chọn các chức năng kèm theo mà bạn muốn mở:
      1
      2
      3
      4
      5
      ? What functionality do you want to enable? (Press <space> to select, <a> to toggle all, <i> to invert selection)
      ❯◯ antd
      ◯ dva
      ◯ code splitting
      ◯ dll

      bao gồm antd, dva, code splitting, dll. Bước này bạn chọn hoặc bỏ qua việc này mình có thể cấu hình lại được trong file config của umiJS.
    • Vậy là xong cấu hình lúc tạo dự án, umi sẽ tự đông sinh mã code ra cho bạn:
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
         create package.json
         create .gitignore
         create .editorconfig
         create .env
         create .eslintrc
         create .prettierignore
         create .prettierrc
         create .umirc.js
         create mock/.gitkeep
         create src/app.js
         create src/assets/yay.jpg
         create src/global.css
         create src/layouts/index.css
         create src/layouts/index.js
         create src/models/.gitkeep
         create src/pages/index.css
         create src/pages/index.js
         create webpack.config.js
      ✨  File Generate Done
      ✨  Done in 161.20s.
    • Chạy lệnh yarn để cài đặt cách package tương ứng trong package.json
    • Chạy yarn start để chạy ứng dụng, gõ localhost:8000 để xem kết quả

Giới thiệu về UmiJS P2 (Cấu trúc thư mục, cấu hình thường dùng)

Nguồn: umiJS

Tags: dvaJSreactJSSSRumiJS
Previous Post

Thiết lập chế độ dark mode khi dùng Slack (macOS)

Next Post

Giới thiệu về UmiJS P2 (Cấu trúc thư mục, cấu hình thường dùng)

truongluu

truongluu

Next Post
Giới thiệu về UmiJS P1 (Tổng quan về umiJS)

Giới thiệu về UmiJS P2 (Cấu trúc thư mục, cấu hình thường dùng)

Comments 4

  1. Pingback: Giới thiệu về UmiJS (Phần 2) – Lưu Xuân Trường's Blog
  2. Pingback: Giới thiệu về UmiJS (Phần 3) - Lưu Xuân Trường's Blog
  3. Pingback: Giới thiệu về UmiJS P3 (Permission routing) - Lưu Xuân Trường's Blog
  4. Pingback: Giới thiệu về UmiJS P4 (Server Side Rendering) - Lưu Xuân Trường's Blog

Leave a Reply Cancel reply

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

Never give up. Today is hard, tomorrow will be worse, but the day after tomorrow will be sunshine

Jack Ma

Quotations

About me

Field of interests: Svelte, ReactJS, Angular, VueJS, React Native, Flutter, NodeJS, MongoDB, Message Broker, WordPress, AdonisJS, NestJS, NuxtJS, Docker, Microservice, Arduino, Game HTML5. Hope to share my experiences with everybody

Recent Posts

  • Styled components trong ReactJS
  • Frontity cơ bản phần I (Tạo và chạy dự án)
  • React framework for WordPress
  • How to run bash script in NodeJS
  • Thiết lập việc ưu tiên gọi saga worker trong redux-saga

Recent Comments

  • truongluu on Giới thiệu về UmiJS P2 (Cấu trúc thư mục, cấu hình thường dùng)
  • Hung on Giới thiệu về UmiJS P2 (Cấu trúc thư mục, cấu hình thường dùng)
  • Redux Saga phần III (Tips khi làm việc) - Lưu Xuân Trường's Blog on Quản lý trạng thái tải khi dùng redux-saga
  • Redux Saga phần II (Các khái niệm cơ bản) - Lưu Xuân Trường's Blog on Cheatsheets Non Blocking, Blocking Redux Saga
  • truongluu on Giới thiệu về UmiJS P4 (Server Side Rendering)

Archives

  • November 2020
  • October 2020
  • September 2020
  • August 2020
  • July 2020
  • June 2020
  • May 2020
  • March 2020
  • February 2020
  • January 2020
  • June 2019
  • May 2019
  • April 2019
  • March 2019
  • February 2019
  • January 2019
  • November 2018
  • October 2018
  • September 2018
  • August 2018
  • July 2018
  • April 2018
  • March 2018

Categories

  • Angular
  • Arduino
  • Backend
  • Câu Hỏi Phỏng Vấn
  • CSS
  • Ebook
  • Frontend
  • Frontity
  • Góc Ngoài Lề
  • How to
  • IOS
  • IQ Test
  • Javascript
  • Kinh nghiệm
  • Kinh nghiệm làm việc
  • Máy chủ
  • MongoDB
  • NestJS
  • NodeJS
  • NuxtJS
  • Plugins
  • React Native
  • React Native
  • ReactJS
  • Redis
  • Redux-Saga
  • RxJS
  • Tutorials
  • UmiJS
  • Uncategorized
  • VueJS
  • WordPress

Friends

Phu's blog
  • Giới thiệu về UmiJS P1 (Tổng quan về umiJS)

    Giới thiệu về UmiJS P1 (Tổng quan về umiJS)

    0 shares
    Share 0 Tweet 0
  • RxJS toàn tập (P1 giới thiệu RxJS là gì)

    0 shares
    Share 0 Tweet 0
  • Giới thiệu về UmiJS P2 (Cấu trúc thư mục, cấu hình thường dùng)

    0 shares
    Share 0 Tweet 0
  • Redux Saga phần I (Giới thiệu)

    0 shares
    Share 0 Tweet 0
  • Giới thiệu về UmiJS P3 (Permission routing)

    0 shares
    Share 0 Tweet 0

About me

Lưu Xuân Trường

Field of interests: Svelte, ReactJS, Angular, VueJS, React Native, Flutter, NodeJS, MongoDB, Message Broker, WordPress, AdonisJS, NestJS, NuxtJS, Docker, Microservice, Arduino, Game HTML5. Hope to share my experiences with everybody

© 2020 https://luuxuantruong.info

No Result
View All Result
  • Trang chủ
  • Backend
    • Laravel
    • Golang
    • NodeJS
    • MongoDB
    • Redis
    • WordPress
      • Kinh nghiệm
      • Plugins
  • Frontend
    • CSS
    • Javascript
      • ReactJS
      • UmiJS
      • VueJS
      • NuxtJS
      • Angular
      • RxJS
    • Game HTML5
  • Mobile
    • React Native
    • IOS
    • Android
    • Flutter
  • Tutorials
    • Redux-Saga
  • How to
  • Góc Ngoài Lề
    • Sống Chậm Nghĩ Sâu
    • Câu Hỏi Phỏng Vấn
    • IQ Test
  • Liên Hệ

© 2020 https://luuxuantruong.info

Welcome Back!

Login to your account below

Forgotten Password?

Create New Account!

Fill the forms below to register

All fields are required. Log In

Retrieve your password

Please enter your username or email address to reset your password.

Log In