Đăng trong

Cùng nhau tìm hiểu khái niệm ReactJs là gì ^^

React là một thư viện JavaScript mã nguồn mở để xây dựng giao diện người dùng. Nó được duy trì bởi Facebook và một cộng đồng gồm các nhà phát triển và công ty cá nhân. React có thể được sử dụng làm cơ sở trong việc phát triển các ứng dụng một trang hoặc di động.

Một ví dụ đơn giản nhất của React trông như thế này:

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('root')
);

Ví dụ trên hiển thị một tiêu đề với dòng chữ “Hello, world!” trên trang web.

Nhấn vào link bên trên để mở một trình soạn thảo trực tuyến. Hãy tự nhiên để làm vài sự thay đổi và thấy nó ảnh hưởng đến kết quả như thế nào. Hầu hết các trang trong hướng dẫn này sẽ có những ví dụ mà bạn có thể thay đổi được giống như ví dụ này.

Làm sao để đọc hướng dẫn này

Trong hướng dẫn này, chúng ta sẽ xem xét các “khối xây dựng” (building block) của các ứng dụng React: element và component. Một khi bạn đã nắm vững chúng, bạn có thể tạo ra những ứng dụng lớn hơn từ những component nhỏ có tính tái sử dụng.

Hướng dẫn này được thiết kế cho những người dự định tiếp cận các khái niệm từng bước một. Nếu bạn có dự định tiếp cận theo cách thực hành, bạn nên tham khảo hướng dẫn thực hành của chúng tôi. Bạn có thể tìm hướng dẫn này và chỉ dẫn thực hành bổ sung cho nhau.

Mẹo nhỏ.

Đây là chương đầu tiên trong hướng dẫn từng bước về các khái niệm cơ bản của React. Bạn có thể tìm thấy một danh sách tất cả các chương của nó trong thanh công cụ điều hướng. Nếu bạn đang đọc cái này trên điện thoại, bạn cũng có thể truy cập điều hướng bằng cách nhấn vào nút ở bên phải phía dưới góc màn hình của bạn.

Mỗi chương trong hướng dẫn này xây dựng trên kiến thức đã giới thiệu trong những chương trước. Bạn có thể học phần lớn React bằng cách đọc các chương hướng dẫn “Các khái niệm chính” theo thứ tự của chúng ở trong thanh công cụ. Ví dụ, “Giới thiệu JSX” là chương kế tiếp của chương này.

Kiến thức cơ bản cần có

React là một thư viện JavaScript, và vì thế chúng tôi giả định là bạn có một sự hiểu biết cơ bản về ngôn ngữ JavaScript. Nếu bạn cảm thấy không tự tin, chúng tôi khuyên bạn lướt qua một hướng dẫn về JavaScript để kiểm tra kiến thức của bạn và điều đó sẽ giúp bạn tiếp tục hướng dẫn này mà không bị lạc hướng. Điều này có thể cần 30 phút hoặc một tiếng đồng hồ, nhưng với kết quả cuối cùng thì bạn sẽ không phải cảm thấy giống như bạn đang học React và JavaScript cùng một thời điểm.

Hướng dẫn này thỉnh thoảng sử dụng một vài cấu trúc JavaScript mới trong các ví dụ. Nếu bạn chưa từng làm việc với JavaScript trong những năm gần đây, Ba điều này sẽ mang cho bạn kiến thức để bạn cảm thấy thoải mái hơn khi đọc các tài liệu của React.

Ghi chú

Tiếp tục kéo xuống bên dưới, và bạn sẽ tìm thấy đường dẫn đến chương kế tiếp của hướng dẫn này ngay mép bên phải trên cái chân của website.

Đăng trong

Vuex là gì và Kết hợp với Vue như thế nào?

Vuex là một thư viện + mẫu quản lý trạng thái cho các ứng dụng Vue.js. Nó phục vụ như một kho lưu trữ tập trung cho tất cả các thành phần trong một ứng dụng, với các quy tắc đảm bảo rằng trạng thái chỉ có thể được thay đổi theo kiểu có thể đoán trước được.

Nó cũng tích hợp với tiện ích mở rộng devtools chính thức của Vue để cung cấp các tính năng nâng cao giúp lập trình viên dễ dàng tìm ra lỗi trong hệ thống. Cũng như là sao lưu quá trình thay đổi trạng thái một cách trực quan và để theo dõi.

“State Management Pattern” là gì?

Hãy bắt đầu với một ứng dụng counter Vue đơn giản:

new Vue({
  // state
  data () {
    return {
      count: 0
    }
  },
  // view
  template: `
    <div>{{ count }}</div>
  `,
  // actions
  methods: {
    increment () {
      this.count++
    }
  }
})

Nó là một ứng dụng độc lập với các phần sau:

  • State: Dữ liệu và chúng ta cần lưu trong ứng dụng
  • View: Là nơi sử dụng và ánh xạ từ state để hiển thị ra giao diện người dùng
  • Actions: Là những hành động để thay đổi trạng thái trong State sau đó hiển thị ngược trở lại phần View.

Đây là một biểu diễn đơn giản của khái niệm “luồng dữ liệu một chiều”

Đối với vấn đề thứ nhất, việc chuyển các đạo cụ có thể tẻ nhạt đối với các thành phần lồng nhau sâu và đơn giản là không hoạt động đối với các thành phần anh em. Đối với vấn đề thứ hai, chúng tôi thường sử dụng các giải pháp như tiếp cận các tham chiếu cá thể cha / con trực tiếp hoặc cố gắng thay đổi và đồng bộ hóa nhiều bản sao của trạng thái thông qua các sự kiện. Cả hai mẫu này đều giòn và nhanh chóng dẫn đến mã không thể khắc phục được.

Vậy tại sao chúng ta không trích xuất trạng thái được chia sẻ ra khỏi các thành phần và quản lý nó trong một singleton toàn cục? Với điều này, cây thành phần của chúng ta trở thành một “khung nhìn” lớn và bất kỳ thành phần nào cũng có thể truy cập trạng thái hoặc kích hoạt các hành động, bất kể chúng ở đâu trong cây!

Đăng trong

VueJs Phần 02 — Vọc vạch xoay quanh đối tượng Vue

1. Tạo một đối tượng Vue

Một số tài liệu kĩ thuật ở Việt Nam dịch “instance” là “thể hiện.” Chúng tôi cho rằng cách dịch này nghe rất lạ tai với người Việt, nên sẽ dịch “instance” là “đối tượng” và giữ nguyên “object” là “object” như trong bản tiếng Anh.

Note from VueJs

Một ứng dụng Vue luôn được bắt đầu bằng cách khởi tạo một đối tượng Vue (Vue instance) sử dụng hàm Vue:

var vm = new Vue({
  // các tùy chọn
})

Thiết kế của Vue chịu ảnh hưởng – mặt dù không liên kết chặt chẽ – từ pattern MVVM. Vì thế trong bản hướng dẫn này, chúng tôi quy ước sử dụng tên biến vm (viết tắt của ViewModel) cho một đối tượng Vue.

Khi khởi tạo một đối tượng Vue, bạn truyền vào một object options với các tùy chọn. Phần lớn bản hướng dẫn này sẽ mô tả cách sử dụng các tùy chọn đó để tạo ra behavior (hành vi) mong muốn. Bạn cũng có thể tham khảo danh sách đầy đủ các tùy chọn ở trang API.

Một ứng dụng Vue bao gồm một đối tượng Vue gốc (root Vue instance) được tạo với lệnh new Vue. Ứng dụng này cũng thường được sắp xếp thành một cây gồm các component lồng nhau và tái sử dụng được. Ví dụ, cây component của một ứng dụng todo có thể trông như thế này:

Root Instance
└─ TodoList
   ├─ TodoItem
   │  ├─ DeleteTodoButton
   │  └─ EditTodoButton
   └─ TodoListFooter
      ├─ ClearTodosButton
      └─ TodoListStatistics

Chúng ta sẽ nói chi tiết về hệ thống component sau. Hiện tại, bạn chỉ cần biết rằng một component Vue cũng là một đối tượng Vue và do đó cũng nhận cùng một object options (trừ một số tùy chọn chỉ dành riêng cho root).

2. Dữ liệu và phương thức

Khi một đối tượng Vue được khởi tạo, tất cả các thuộc tính (property) được tìm thấy trong object data sẽ được thêm vào reactivity system (hiểu nôm na là “hệ thống phản ứng”) của Vue. Điều này có nghĩa là view sẽ “react” (phản ứng) khi giá trị của các thuộc tính này thay đổi, và tự cập nhật tương ứng với các giá trị mới.

// Chúng ta khởi tạo một object "data"
var data = { a: 1 }

// Object này được truyền vào một đối tượng Vue
var vm = new Vue({
  data: data
})

// Truy xuất đến thuộc tính của đối tượng 
// trả về giá trị của object "data" đã khởi tạo 
vm.a == data.a // => true

// Thay đổi thuộc tính của vm cũng
// ảnh hưởng đến dữ liệu ban đầu
vm.a = 2
data.a // => 2

// ... và ngược lại
data.a = 3
vm.a // => 3

Khi dữ liệu thay đổi, view sẽ render lại. Cũng nên lưu ý rằng một thuộc tính trong object data chỉ trở nên reactive nếu nó đã tồn tại khi chúng ta khởi tạo đối tượng Vue. Có nghĩa là nếu bạn thêm vào một thuộc tính mới như sau:

Đăng trong

Vue.js là gì?

Gọi tắt là Vue (phát âm là /vjuː/, giống như view trong tiếng Anh), Vue.js là một framework linh động (nguyên bản tiếng Anh: progressive – tiệm tiến) dùng để xây dựng giao diện người dùng (user interfaces). Khác với các framework nguyên khối (monolithic), Vue được thiết kế từ đầu theo hướng cho phép và khuyến khích việc phát triển ứng dụng theo từng bước. Khi phát triển lớp giao diện (view layer), người dùng chỉ cần dùng thư viện lõi (core library) của Vue, vốn rất dễ học và tích hợp với các thư viện hoặc dự án có sẵn. Cùng lúc đó, nếu kết hợp với những kĩ thuật hiện đại như SFC (single file components) và các thư viện hỗ trợ, Vue cũng đáp ứng được dễ dàng nhu cầu xây dựng những ứng dụng một trang (SPA – Single-Page Applications) với độ phức tạp cao hơn nhiều.

Nếu bạn muốn tìm hiểu thêm về Vue, chúng tôi đã tạo một video clip về những nguyên tắc cốt lõi và một dự án mẫu.

Nếu bạn là một lập trình viên front-end giàu kinh nghiệm và muốn hiểu hơn về tương quan giữa Vue và các thư viện hay framework khác, hãy xem phần So sánh với các framework khác.

Bắt đầu

Nếu bạn chưa quen với lập trình front-end, không nên bắt đầu bằng việc sử dụng một framework – hãy trang bị cho mình vốn kiến thức cơ bản trước đã. Đồng thời, nếu bạn đã có sẵn kinh nghiệm với các framework khác như React hoặc Angular thì tốt, nhưng nếu không thì cũng không sao cả.

VueJs Note

Để dùng thử Vue.js, không gì dễ hơn là bắt đầu với một ví dụ Hello World trên JSFiddle. Hãy mở ví dụ này trong một tab khác và làm theo những ví dụ cơ bản mà chúng tôi sẽ nhắc đến dần sau đây. Bạn cũng có thể tạo một file index.html và nhúng thư viện Vue vào:

<!-- bản phát triển (development), bao gồm những cảnh báo hữu ích trong console -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

hoặc:

<!-- bản production, được tối ưu về dung lượng và tốc độ -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

Trang Cài đặt sẽ cung cấp cho bạn nhiều lựa chọn hơn để cài đặt Vue. Lưu ý rằng chúng tôi không khuyến khích việc dùng vue-cli khi bạn chỉ mới bắt đầu, nhất là nếu bạn chưa quen với các công cụ xây dựng (build tools) trên nền tảng Node.js.

2. Render theo hướng khai báo

Tại trung tâm của Vue.js là một hệ thống cho phép chúng ta render (kết xuất) dữ liệu lên DOM theo hướng khai báo (declarative, thay vì hướng mệnh lệnh – imperative) sử dụng một cú pháp đơn giản:

<div id="app">
  {{ message }}
</div>
var app = new Vue({
  el: '#app',
  data: {
    message: 'Do you wanna build a Vue app?'
  }
})

Vậy là chúng ta đã viết xong một ứng dụng bằng Vue! Tuy rằng kết quả trên đây nhìn đơn giản chỉ như render một chuỗi kí tự ra màn hình, thật sự Vue đã thực hiện khá nhiều việc đằng sau hậu trường. Dữ liệu và DOM đã được liên kết với nhau, và mọi thứ giờ đây đã trở nên reactive (hiểu nôm na là “phản ứng,” chúng tôi sẽ giải thích sâu hơn trong các chương kế tiếp). Để kiểm chứng, hãy mở console của trình duyệt và gán cho app.message một giá trị khác, ví dụ app.message = 'OK bye'. Bạn sẽ thấy ví dụ trên thay đổi tương ứng.

Đăng trong

Git và GitHub — liệu bạn đã thật sự biết cách sử dụng?

Hãy đọc bài viết nóng hổi được chúng mình đặt hàng từ một kỹ sư lập trình nhà Got It— người chuyên review GitHub cho các bạn ứng viên nhé!

1. Git

Khi viết code, sẽ có rất nhiều lúc bạn muốn, hoặc cần phải quay lại đoạn code mình đã viết tại một thời điểm trước đây. Một cách đơn giản, ta hoàn toàn có thể dùng tính năng undo/redo của trình biên soạn (editor) mình đang dùng. Tuy nhiên, editor có thể sẽ không lưu lại lịch sử sau khi đóng, và bạn cũng có thể nhấn nhầm sang một phím khác thay vì nhấn redo, và thế là lịch sử trạng thái được editor lưu lại đã bị ghi đè khiến bạn không thể redo được nữa.

Ngoài ra, khi nhiều người cùng làm việc trong một dự án, các thành viên cần tìm ra cách chia sẻ các thay đổi của mình để đảm bảo rằng tất cả mọi người đang làm việc trên cùng một phiên bản của dự án. Trước đây, lập trình viên thường chia sẻ các thay đổi code bằng cách xuất ra file patch và gửi cho nhau qua email. Khi nhận được một bản patch, các thành viên sẽ áp dụng nó vào trong phiên bản code hiện tại của mình trên máy cá nhân.

Dưới đây là một ví dụ về file patch, được trích ra từ
https://bit.ly/34r4SVU

From 06f2790b5ca3fea45515e33c9660ad6265120a5a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=81ukasz=20Langa?= <lukasz@langa.pl>
Date: Wed, 4 Mar 2020 23:16:55 +0100
Subject: [PATCH] Rename FileMode into just Mode
The mode was never just about files to begin with.  There are no other modes in
Black, this can be the default one.
---
 black.py | 40 +++++++++++++++++++---------------------
 1 file changed, 19 insertions(+), 21 deletions(-)
diff --git a/black.py b/black.py
index 52096819..31859d1a 100644
--- a/black.py
+++ b/black.py
@@ -186,7 +186,7 @@ class Feature(Enum):
 
 
 @dataclass
-class FileMode:
+class Mode:
     target_versions: Set[TargetVersion] = field(default_factory=set)
     line_length: int = DEFAULT_LINE_LENGTH
     string_normalization: bool = True
@@ -209,6 +209,10 @@ def get_cache_key(self) -> str:
         return ".".join(parts)
 
 
+# Legacy name, left for integrations.
+FileMode = Mode
+
+
 def supports_feature(target_versions: Set[TargetVersion], feature: Feature) -> bool:
     return all(feature in VERSION_TO_FEATURES[version] for version in target_versions)

Mỗi file patch chỉ biết đến hai trạng thái của dự án, là trước và sau khi được trích xuất ra. Như vậy, khi có nhiều file patch, ta cần phải biết thứ tự của chúng để có thể xây dựng lại chính xác một phiên bản của dự án tại bất kì thời điểm nào. Ngoài ra, vì file patch cũng chỉ là file thông thường được lưu trong ổ cứng, nên ta cần một cách để sao lưu lại chúng. Khi có nhiều người cùng làm việc trên một file, ta cần thêm một cơ chế đồng bộ các file patch với nhau, vì rất có thể sẽ có những thay đổi chồng chéo lên nhau.

Để giải quyết các vấn đề nêu trên, ta cần đến một hệ thống quản lý phiên bản. Phần một của bài viết này sẽ giới thiệu đến các bạn Git, một trong những hệ thống quản lý phiên bản phổ biến nhất hiện nay.