Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. React
Code

Khóa học cấp tốc React cho người mới bắt đầu, phần 3

by
Length:LongLanguages:
This post is part of a series called React Crash Course for Beginners.
React Crash Course for Beginners, Part 2
React Crash Course for Beginners, Part 4

Vietnamese (Tiếng Việt) translation by Andrea Ho (you can also view the original English article)

Cho đến giờ trong loạt React này, chúng tôi đã tạo một ứng dụng mẫu hoạt động làm khởi điểm cho ứng dụng thư viện 'Movie Mojo' và chúng tôi đã thấy cách sử dụng prop cho phép chúng tôi tùy chỉnh sự diện mạo của các component bằng cách truyền dữ liệu thay vì code cứng cho nó.

Trong phần thứ 3 chúng ta sẽ tạo component tùy chỉnh đầu tiên và sau đó thêm state vào ứng dụng của chúng tôi. Điều này sẽ cho phép chúng tôi dễ dàng quản lý dữ liệu ứng dụng mà không cần quan tâm đến việc cập nhật thủ công DOM. Thay vào đó, chúng ta sẽ xem cách React xử lý tất cả kết xuất DOM kể từ bây giờ.

Một nhóm gồm 4 phim sẽ được hiển thị trong gallery của chúng tôi khi tải trang, và 4 phim nữa sẽ được tải và hiển thị khi nhấp vào nút Load more....

Trước tiên, hãy xử lý component <Movie/> để hiển thị thông tin về một bộ phim riêng lẻ.

Thêm một component Movie

Component <Movie/> sẽ hiển thị thông tin về một bộ phim riêng lẻ. Nhiều component  <Movie /> sẽ được hiển thị cùng nhau để tạo thành một gallery phim về một số bộ phim hay. Do đó, tên của ứng dụng React của chúng tôi là 'Movie Mojo'!

Trước khi chúng tôi thêm component <Movie />, hãy cập nhật CSS trong App.js để tạo kiểu cho từng phim riêng lẻ trong thư viện phim. Mở App.css và thay thế các style bằng:

Nó tạo style cho gallery để hiển thị phim theo grid và cải thiện khoảng cách xung quanh các yếu tố hình ảnh khác.

Ngoài ra, trong /public/posters/, tôi đã thêm 12 áp phích phim để thuận tiện cho bạn có thể dùng trong dự án của riêng bạn, nếu bạn đang cùng thực hiện. Bạn có thể tải chúng xuống như một phần của dự án đã hoàn thành cho bài hướng dẫn thứ 4. Chỉ cần sao chép từ thư mục posters vào thư mục public ứng dụng React của riêng bạn.

Bạn cũng có thể tải về áp phích phim của riêng bạn từ website gốc. Với hướng dẫn này, tôi đã sử dụng cinematerial.com cho tất cả các áp phích phim. Cần một khoản phí nhỏ để có thể tải xuống các áp phích, nhưng dĩ nhiên có nhiều nguồn khác cho áp phích nếu bạn muốn thử ở nơi khác.

OK, quay lại component <Movie/> của chúng tôi. Trong thư mục /src/components/, tạo file Movie.js mới, mở file đó trong trình chỉnh sửa và thêm vào nội dung như sau:

Điều này khá giống với component <Header/> ngoại trừ chúng tôi đang tham khảo một số prop thay vì chỉ một. Hãy sử dụng component <Movie/>  của chúng tôi để hiển thị một số phim.

Trong App.js, thêm bốn component <Movie/> bên trong wrapper <div> để chúng ta có thể dễ dàng áp dụng các kiểu dành riêng các component movie. Đây là code App.js đầy đủ:

Lưu ý cách chúng tôi import rõ ràng component <Movie/> , giống như chúng tôi đã làm cho <Header/>, để làm cho nó có sẵn trong code. Mỗi component movie triển khai prop cho title, year, description và poster.

Kết quả là chúng tôi bổ sung 4 component <Movie /> vào gallery:

Manually adding Movie components

Thật tẻ nhạt khi bổ sung từng bộ phim theo cách thủ công vào App.js. Trong thực tế, dữ liệu ứng dụng có thể sẽ đến từ database và được lưu trữ tạm thời trong một đối tượng JSON trước khi được thêm vào đối tượng state trong ứng dụng của bạn.

Quản lý state của React

State trong ứng dụng React là gì? Bạn có thể xem nó như một đối tượng JavaScript đại diện cho tất cả dữ liệu trong ứng dụng của bạn. State có thể được xác định trên bất kỳ component nào, nhưng nếu bạn muốn chia sẻ state giữa các component thì tốt hơn là định nghĩa state đó trên component cấp cao nhất. Sau đó state có thể được truyền lại cho các component con và truy xuất theo yêu cầu.

Mặc dù state là một đối tượng chính, đối tượng đó có thể chứa nhiều đối tượng phụ liên quan đến các phần khác nhau trong ứng dụng của bạn. Ví dụ: trong ứng dụng giỏ hàng, bạn có thể có một đối tượng state cho các mặt hàng trong đơn đặt hàng của mình và một đối tượng khác để theo dõi hàng tồn kho.

Trong ứng dụng 'Movie Mojo', chúng tôi chỉ có một đối tượng state phụ duy nhất để lưu trữ phim trong gallery của chúng tôi.

Ý tưởng cốt lõi đằng sau việc sử dụng state là bất cứ khi nào dữ liệu trong ứng dụng của bạn thay đổi, React sẽ cập nhật các phần DOM có liên quan cho bạn. Tất cả những gì bạn phải làm là quản lý dữ liệu hoặc state trong ứng dụng của mình và React sẽ xử lý tất cả các bản cập nhật DOM.

Thêm mới movie qua State

Để đơn giản, chúng tôi sẽ bỏ qua các bước về database và giả định dữ liệu phim của chúng tôi đã được truy xuất từ database và được lưu ở định dạng JSON.

Để minh hoạ cho việc bổ sung các mục vào state ban đầu, cũng như việc state cập nhật khi xảy ra sự kiện (như nhấn nút), chúng tôi sẽ sử dụng hai đối tượng JSON, mỗi đối tượng chứa dữ liệu về 4 phim.

Trong thư mục src, thêm file mới movie.js, mở file đó trong trình chỉnh sửa và thêm code sau đây để định nghĩa hai đối tượng JSON của chúng tôi:

Trước khi chúng ta có thể tham chiếu các đối tượng JSON trong component <App /> của mình, chúng ta cần nhập chúng. Thêm phần này vào trên cũng của App.js:

Mỗi đối tượng JSON hiện có sẵn thông qua các biến initialMovies và additionalMovies. Tuy nhiên, cho đến nay, chúng ta không có bất kỳ state nào liên quan đến ứng dụng của chúng tôi. Bây giờ hãy thay đổi việc này.

Thành phần cấp cao nhất trong ứng dụng 'Movie Mojo' của chúng tôi là <App />, vì vậy hãy thêm đối tượng state của chúng tôi vào đây. Chúng ta cần state được khởi tạo cùng với class component, chúng ta thực hiện điều này thông qua constructor.

Khi sử dụng constructor trong class React, trước tiên bạn cần gọi super() là đối tượng Component mà chúng tôi đang mở rộng cần phải được khởi tiên. Ngoài ra, từ khóa this sẽ không có sẵn bên trong hàm constructor cho đến khi super() trở lại.

Để khởi tạo đối tượng state của chúng tôi, hãy thêm đối tượng này vào bên trong class component <App />:

Điều này sẽ tạo ra một đối tượng state trống cho ứng dụng React của chúng tôi. Sử dụng các công cụ dành cho nhà phát triển React, chúng ta có thể thấy đối tượng state được khởi tạo trực tiếp trên component <App />.

Adding empty state

Tuy nhiên, chúng tôi muốn khởi tạo đối tượng state với một số phim để chúng hiển thị ngay khi tải trang. Để làm điều này, chúng ta có thể khởi tạo đối tượng state movies bằng initialMovies thay vì một đối tượng trống.

Đối tượng này sẽ thiết lập state ban đầu cho ứng dụng của chúng tôi thành 4 phim được lưu trữ trong đối tượng JSON initialMovies, nhưng các phim trong gallery vẫn được hiển thị thông qua các component <Movie />  được code cứng mà chúng tôi đã thêm trước đó.

Adding movies to our initial state

Thay vào đó, chúng ta cần xuất các phim trong đối tượng state movie bằng cách sử dụng một vòng lặp để lặp lại trên mỗi phim.

Bắt đầu bằng cách xóa các component <Movie /> được code cứng và thay thế chúng bằng:

Code này yêu cầu một số giải thích. Đối tượng state movie chứa các phim riêng lẻ được lưu trữ dưới dạng các đối tượng, nhưng để lặp lại qua chúng, sẽ dễ dàng hơn để làm việc với một mảng.

Vì vậy, chúng tôi sử dụng Object.keys() để lấy tất cả các key cho các đối tượng phim và lưu trữ chúng trong một mảng. Điều này sau đó được lặp lại bằng cách sử dụng .map() và một component <Movie />  được xuất ra cho mỗi phim trong đối tượng state movie.

Tuy nhiên, có một vài thay đổi so với cách trước đó, chúng tôi đã bổ sung thẻ <Movie />. Đầu tiên, chúng tôi chuyển tất cả thông tin cho một phim riêng lẻ thông qua một prop meta duy nhất. Điều này thực sự thuận tiện hơn trước đó, nơi chúng tôi đã chỉ định một prop tách biệt cho từng thuộc tính phim.

Ngoài ra, lưu ý rằng chúng tôi cũng chỉ định một prop key. Prop được React sử dụng nội bộ để theo dõi các component đã được thêm vào bởi vòng lặp. Prop này không thực sự có sẵn để được sử dụng bởi component, vì vậy bạn không nên cố gắng truy xuất nó trong code của riêng bạn.

Không có prop key, React sẽ gây ra lỗi, vì vậy điều quan trọng là phải bao kèm thêm prop này. React cần biết những phim mới nào đã được bổ sung, cập nhật hoặc xóa để nó có thể giúp mọi thứ được đồng bộ hóa.

Chúng ta cần phải làm một điều nữa trước khi các component của chúng ta có thể được hiển thị. Mở Movie.js và cho mỗi tham chiếu đến một chỗ dựa, hãy thêm tiền tố meta vào, như sau:

Movies initialized via state

Tải thêm phim

Chúng tôi đã thấy cách hiển thị các phim được thêm vào state khi ứng dụng của chúng tôi khởi chạy, nhưng nếu chúng tôi muốn cập nhật gallery phim của mình vào một lúc nào đó thì sao?

Đây là lúc React thực sự hữu ích. Tất cả những gì chúng ta phải làm là cập nhật các phim trong đối tượng state movie và React sẽ tự động cập nhật tất cả các phần trong ứng dụng của chúng ta sử dụng đối tượng này. Vì vậy, nếu chúng tôi thêm một số phim, React sẽ kích hoạt phương thức render() của component <App /> để cập nhật thư viện phim của chúng tôi.

Chúng ta hãy xem cách để triển khai điều này.

Bắt đầu bằng cách thêm một nút HTML bên trong thẻ đóng div của wrapper trong App.js.

Khi nhấn vào nút, một phương thức của class là loadAdditionalMovies được gọi. Bổ sung phương thức này vào component class <App />:

Việc cập nhật state tương đối đơn giản miễn là bạn làm theo phương pháp được khuyến nghị, đó là sao chép đối tượng state hiện tại thành một đối tượng mới và cập nhật bản sao đó với các item mới. Sau đó, để thiết lập state mới, chúng ta gọi this.setState và truyền vào đối tượng state mới của để ghi đè lên state trước đó. Ngay khi state được cập nhật, React chỉ cập nhật các phần của DOM đã bị ảnh hưởng bởi sự thay đổi.

Dòng đầu tiên trong loadAdditionalMovies() sử dụng toán tử spread để sao chép tất cả các thuộc tính của đối tượng this.state.movies vào đối tượng mới currentMovies.

Sau đó, chúng tôi sử dụng Object.assign để hợp nhất hai đối tượng lại với nhau, cho kết quả là danh sách các phim mới được thêm vào danh sách hiện tại.

Chỉ còn một bước nữa chúng ta cần hoàn thành trước khi phương thức loadAdditionalMovies() hoạt động. Để tham chiếu bất kỳ phương thức component tùy chỉnh nào, trước tiên chúng ta cần tự liên kết nó với component class.

Đây là một bước ngoặt của React và là điều bạn sẽ phải nhớ thực hiện. Bất cứ khi nào một phương thức được truy xuất mà không bị ràng buộc theo cách thủ công, React sẽ khiếu nại và đẩy ra lỗi biên dịch.

Thêm phần này vào hàm constructor của class trong App.js:

Miễn là bạn nhớ sử dụng cách giải pháp này cho mọi phương thức tùy chỉnh có yêu cầu sử dụng this, bạn sẽ không gặp phải bất kỳ vấn đề nào.

Bây giờ, hãy thử nhấp vào nút Load More... Bạn sẽ thấy thêm 4 bộ phim được bổ sung vào gallery.

Loading more movies via updating state

Điều này minh họa thế mạnh trọng yếu của React. Đó là cho phép bạn tập trung vào dữ liệu trong ứng dụng của mình và để React xử lý các phần cập nhật DOM đơn điệu. Để thêm các phim mới, tất cả điều chúng tôi phải làm là cập nhật dữ liệu trong đối tượng state movie của mình và React đã xử lý mọi thứ khác.

Ứng dụng ví dụ của chúng tôi vẫn còn khá cơ bản, nhưng hãy tưởng tượng một ứng dụng phức tạp hơn nhiều với nhiều component và nhiều đối tượng state. Cố gắng cập nhật DOM theo cách thủ công vì dữ liệu trong thay đổi của ứng dụng của bạn sẽ là một nhiệm vụ rất lớn (và dễ phát sinh lỗi)!

Tổng kết

Trong hướng dẫn này, chúng tôi thực sự đạt được tiến triển với ứng dụng 'Movie Mojo' của chúng tôi. Chúng tôi đã sử dụng state của React để quản lý danh sách phim trong ứng dụng của mình. Chúng tôi không chỉ bổ sung phim mới vào đối tượng state ban đầu khi ứng dụng của chúng tôi được khởi tạo, mà chúng tôi còn cập nhật danh sách phim trong gallery của mình khi nhấp vào nút Load more...

Trong phần thứ 4 - hướng dẫn cuối cùng trong loạt bài này, chúng ta sẽ xem cách chúng ta có thể tự bổ sung một phim mới vào gallery của mình thông qua một form tùy biến. Người dùng sẽ có thể điền vào form và thêm chi tiết về một bộ phim, phim đó sẽ được thêm vào danh sách các bộ phim được hiển thị trong gallery.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.