kiến thức React cho người mới bắt đầu: Cách tạo một ứng dụng từ a-z

Component <articles /> từ địa chỉ directory ./src/pages/article-content.js/

Đây là nơi chúng ta lưu một số bài viết ban đầu. Trong môi trường thực tế production, chúng ta sẽ lưu dữ liệu trên cơ sở dữ liệu phía máy chủ server side, có thể là rDBMS relational database management system như MySQL, hoặc là NoSQL. Tôi sẽ chọn cái thứ 2, bởi vì tôi sẽ sử dụng MERN stack trong series hướng dẫn này (MongoDB - Express - React - Node).

Alright, component <articles /> trong giai đoạn này chỉ là sample mẫu để truyền thông tin inject data vào component <ArticlePage /> mà ta đã code ở phía trên. Mục đích chỉ là để fix bugs và hiển thị nội dung tại port http://localhost:3000 mà thôi. Let's get started!

JavaScript:
const articles = [
    {
        name: 'y-kien',
        title: 'Ý kiến bạn đọc',
        subtitle: `Những bên bán hàng thứ ba của Amazon`,
        content: [
            `Tiêu đề "Kiếm triệu đô từ tỉ đô của Bezos" trên số báo tháng 4.2021 đã gây tò mò. Bức tranh về thị trường thương mại điện tử lớn nhất thế giới, nơi không chỉ có quy mô thị trường và khối lượng sản phẩm giao dịch mang lại giá trị lợi nhuận, mà khi nó đạt đến một quy mô nhất định thì ngay chính sự khai thác trong quá trình của chuỗi cung ứng cũng có thể kiếm ra bộn tiền. Những người có lợi là người tiên phong áp dụng công nghệ và phần mềm để quản lý và tối ưu quy trình vận hành và giao dịch, cũng như các phương thức của marketing hiện đại phát huy hiệu quả khi tăng lượng khách hàng tương tác.`,
            `Cách mạng công nghiệp 4.0 đã sản sinh nhiều khái niệm mới như biến Google, Twitter thành những động từ, thì nay khái niệm “bất động sản kỹ thuật số" để chỉ sự mua bán không gian trên các nền tảng thương mại điện tử đang mang lại siêu lợi nhuận. Hiện tượng này xuất hiện trong vòng bốn, năm năm trở lại đây trên để chế thương mại lớn nhất thế giới Amazon của Bezos, đặc biệt là từ sau đại dịch COVID-19.`,
            `Những người tiêu dùng trẻ tại Việt Nam đang có xu hướng tiêu dùng online, lựa chọn mua sắm trên Shoppee, Tiki, Lazada thay thế cho chợ và siêu thị truyền thống, và dân bớt sử dụng tiền mặt cũng sẽ là mảnh đất đầy hứa hẹn cho những nhà đầu tư tìm kiếm những cơ hội kiếm tiền tuyệt vời này. Tuy nhiên, với quy mô thị trường chưa đạt tới mức tối ưu cũng như các nhà bán lẻ thứ ba trên các nền tảng điện tử chủ yếu là cá nhân và hộ gia đình tiểu thương như của Việt Nam hiện tại vẫn chưa thời điểm đủ độ chín để sinh ra những “hiệp sĩ trắng” Thrasio như vậy.`,
            `Lê My Khuyên, giảng viên khoa Tài Chính, ĐH Ngân hàng TP.HCM`
        ]
    },

    {
        name: 'thu-toa-soan',
        title: 'Thư tòa soạn',
        subtitle: `Dấu ấn vô hình`,
        content: [
            `Trong danh sách 2.755 tỉ phú do Forbes công bố năm 2022, có khoảng 120 vị tỉ phú có 90 pháp nhân doanh nghiệp đăng ký hoạt động theo pháp luật Việt Nam. Các công ty này tập trung chủ yếu trong ba lĩnh vực công nghệ, sản xuất, thực phẩm. Cơ cấu như vậy cũng phù hợp với dòng chảy FDI vào Việt Nam.`,
            `Các doanh nghiệp kể trên cũng như khối FDI nói chung giữ vai trò quan trọng trong sự phát triển của nền kinh tế Việt Nam. Trong các mặt hàng dẫn đầu về giá trị kim ngạch xuất khẩu, một số do doanh nghiệp FDI đóng vai trò chủ chốt như xuất khẩu điện tử, điện thoại và linh kiện.`,
            `Ảnh hưởng tích cực từ dòng vốn đầu tư của 90 doanh nghiệp do các tỉ phú sở hữu nói riêng và doanh nghiệp FDI nói chung là tạo công ăn việc làm, nghĩa vụ thuế với nhà nước, hay đóng góp vào tăng trưởng kim ngạch xuất khẩu cho nền kinh tế Việt Nam. Những tác động như vậy đều được thể hiện qua các số liệu thống kê nên dễ nhận biết. Có những đóng góp khác khó có thể đo lường, đánh giá bằng số liệu.`,
            `Đóng góp quan trọng đầu tiên là thúc đẩy sự hoàn thiện môi trường pháp lý, thể chế, tuân thủ luật lệ, quy định quốc tế. Sự góp mặt của doanh nghiệp đến từ các châu lục, đa văn hóa, mang lại sức sống cho nền kinh tế khi tồn tại và phát triển dựa trên nguyên tắc cạnh tranh công bằng, bình đẳng. Việc xây dựng chuỗi giá trị khép kín của C.P Việt Nam, thay đổi tư duy và cách thức canh tác, tiêu dùng sản phẩm nông nghiệp là trường hợp điển cứu cho doanh nghiệp trong nước. Có một số dẫn chứng tốt từ doanh nghiệp FDI trong thực thi trách nhiệm xã hội doanh nghiệp, quan tâm tới môi trường mà câu chuyện về Heineken là điển hình, để cộng đồng doanh nghiệp suy nghĩ và hành động.`,
            `Không ai có thể phủ nhận vai trò sếu đầu đàn của một số doanh nghiệp FDI, đặc biệt ở lĩnh vực công nghệ, trong thu hút đầu tư vào Việt Nam. Những thương hiệu cần kể đến gồm Nidec, Intel, Samsung hay LG. Sự xuất hiện và gia tăng dòng vốn từ các doanh nghiệp đầu ngành này, theo thời gian, kéo theo sự xuất hiện các doanh nghiệp phụ trợ, cung ứng linh kiện của nước ngoài lẫn trong nước. Đó là tiền đề cho việc xây dựng các cụm liên kết trong công nghệ cao.`,
            `Câu chuyện của Intel không dừng lại ở vai trò đưa Việt Nam có tên trên bản đồ công nghệ thế giới, mà còn là minh chứng cho sự thành công trong đào tạo, phát triển nguồn nhân lực có chất lượng. Họ không chỉ đào tạo cho mục tiêu sử dụng nội bộ, mà còn thúc đẩy giáo dục - đào tạo đạt chuẩn của khu vực và quốc tế. Tác động vào cỗ máy giáo dục - đào tạo về lâu dài sẽ góp phần thực hiện các mục tiêu phát triển được lãnh đạo đất nước xây dựng trong tàm nhìn 2045: Việt Nam trở thành nước công nghiệp, phát triển theo hướng bền vững, thân thiện môi trường.`
        ]
    },

    {
        name: 'cp-viet-nam',
        title: 'C.P Việt Nam',
        subtitle: `Khát vọng nhà bếp thế giới`,
        content: [
            `Nhân chuyến công du Thái Lan đầu những năm 1990, một lãnh đạo cấp cao nhà nước Việt Nam ghé thăm nhà máy C.P sản xuất sản phẩm xuất khẩu sang Nhật Bản, ngỏ ý mời C.P mở nhà máy tương tự tại Việt Nam. Việt Nam lúc bấy giờ chủ yếu vẫn nuôi heo quy mô nhỏ, gà thả trong vườn. Gần ba thập niên sau, cuối tháng 12.2020, C.P khai trương nhà máy hiện đại nhất thế giới của họ tại Bình Phước, xuất lô thịt gà made in Việt Nam đầu tiên sang Hong Kong, sau đó tới Nhật Bản, châu Âu. Ngày khai trương, ông Montri Suwanposri, tổng giám đốc công ty cổ phần Chăn nuôi C.P Việt Nam nói với các lãnh đạo cấp cao trong nước: “C.P muốn đưa Việt Nam gia nhập vào bản đồ xuất khẩu thịt gia cầm có thương hiệu trên thế giới”.`,
            `Nhà máy tại Bình Phước là 1 trong 16 nhà máy tại Việt Nam của công ty có sản lượng thức ăn chăn nuôi lớn nhất thế giới, theo thống kê của Watt Global Media. Đây cũng là nhà máy khép kín từ thức ăn chăn nuôi (Feed) - trang trại chăn nuôi (Farm) đến chế biến thực phẩm (Food). Vào Việt Nam từ năm 1988, đến nay công ty của tỉ phú Dhanin Chearavanont - người sở hữu khối tài sản 18,1 tỉ đô la Mỹ theo xếp hạng của Forbes, đã nắm giữ 20% thị phần thức ăn chăn nuôi và 15% sản lượng thịt từ các trang trại tại Việt Nam, theo ước tính riêng của C.P. Thị trường Việt Nam mang về 18% doanh thu cho C.P năm ngoái. Vị thế dẫn đầu thị trường của họ tạo ra những tác động đáng kể, làm thay đổi ngành chăn nuôi Việt Nam. Tham vọng kế tiếp của C.P: trở thành nhà bếp của thế giới từ các nguyên liệu tại Việt Nam.`,
            `Theo báo cáo thường niên của C.P năm 2020, Việt Nam là 1 trong 15 quốc gia tập đoàn Thái Lan đầu tư trang trại và nhà máy chế biến; 1 trong 11 quốc gia công ty có nhà máy thức ăn chăn nuôi. Công ty của tỉ phú Dhanin Chearatanat có nhiều pháp nhân tại Việt Nam: C.P Việt Nam có vốn điều lệ 9.188 tỉ đồng chuyên sản xuất và kinh doanh thức ăn chăn nuôi, trang trại và nhà máy chế biến thực phẩm; công ty CPV Ford về trang trại và chế biến thức ăn có vốn điều lệ 1.073 tỉ đóng. C.P đóng thời sở hữu công ty cổ phần AHM Lifestyles - Creative Hospitality trong lĩnh vực nhà hàng. Họ cũng mở chuỗi cửa hàng Five Stars bán thức ăn nhanh, nhà hàng thương hiệu Chickita chế biến gà thả vườn từ nông trại ở Bình Phước và nhà hàng phong cách Trung Hoa Wan Chai tại Việt Nam.`,
            `Năm 1993, Montri Suwanposri, kế toán trẻ sinh sống ở tỉnh có nhiều người Việt tại Thái, nhận đề nghị của đồng nghiệp tìm giúp họ giám đốc tài chính cho nhà máy của C.P tại Việt Nam. Người tuyển dụng lưỡng lự nhìn Montri một lát rồi nói: “Hay là em đi đi”. Montri bối rối vì anh không hiểu nhiều về đất nước còn bị cấm vận kinh tế. Thế nhưng, 28 năm sau, chàng kế toán giờ đang quản lý gần 30 ngàn nhân viên người Việt ngồi trong căng tin nhà máy bài trí lãng mạn như một quán cà phê, các cánh hoa baby trắng điểm xuyết khắp nơi, nói tiếng Việt rất rõ ràng: “Đây là nhà máy hiện đại nhất thế giới của C.P, hơn cả công ty mẹ ở Thái Lan”. Giống các lãnh đạo người Thái khác tại Việt Nam, Montri được khuyến khích học tiếng Việt để hiểu người bản địa.`,
        ]
    },
];

export default articles;

Như anh chị có thể thấy, articles là object, nó chứa 4 properties là name, title, subtitle, content. Name là một property quan trọng, vì sau này nó sẽ là một phần trong đường dẫn path của URL và nhiều components khác sẽ dùng nó để match với property content tương ứng. Có thể hiểu nó là key trong cặp giá trị key-value. Ok xong phần nội dung thì anh chị nhớ export default để <ArticlePage> có thể sử dụng import nhé!.
 
Tại sao lai là React
Top1: Nó quá nổi , hầu hết các thằng tai to măt lớn sươn sống của internet đều dùng React,(skype, Team,discord, wordpress, figma,notion,shopify, tiktok,twitter, vân vân , mây mây). Giờ chỉ ra thằng nao ko React còn mât nhieu thoi gian hon
Top 2, top 3 ,top4 ko còn quan trọng
Tại sao mâý ông lớn chon React
Top1: do thăng dev lead chọn
Tại sao mâý thăng dev lâu năm thích React
Vì nó opensource , Và nó tách app thành 3 phần entites, view components, functions .Toàn các thành phần dễ dàng Crtl C=>ctrl V, thỏa mãn thú vui của chúng nó
 
Những bài viết như này, đọc và viết không cẩn thận sẽ bị sai lệch nhiều kiến thức.

Việc quá nhiều Component được ref với nhau cũng không hẳn là tốt. Nó chả khác gì loops & callback hell cả.

Còn lý do tôi chọn react cho nhiều dự án,
  • là nó có cộng đồng lớn
  • nhiều thư viện hỗ trợ.
  • đã được chứng minh qua nhiều project lớn
 
cấu trúc lại source, viết các base configs đưa vào một chỗ
những thứ cần quản lý cơ bản như là routes (private routes, fallback error routes), theme, i18n, etc thì viết thành wrapper hoặc hooks
 
Vừa và nhỏ làm vue cho nhanh thím
Cũng ko hẳn đâu nhé. Giờ các build tool khá mì ăn liền rồi, bấm rẹt rẹt cái là build ra file. Nên xài react hay vue cho project nhỏ vừa cũng ko còn là vấn đề nữa.

React, Vue hay Angular ... gì gì đó cuối cùng cũng phải xem mình có dùng để kiếm ăn hay ko thôi.
Còn học cho vui thì ... cái nào vui mình học :big_smile:
 
Last edited:
Chào buổi tối anh chị.

Còn 3 chức năng quan trọng nữa thì chúng ta cơ bản hoàn thành phần khung của website application. Đó là về:

  • Xác thực authentication, nói đơn giản là đăng nhập và tạo tài khoản mới
  • Tương tác với bài viết bao gồm like upvote và comment
  • Liệt kê tất cả những bài viết trên website kèm theo đường link để users dễ dàng truy cập

Tôi sẽ nói về phần dễ trước là liệt kê danh sách bài viết

Component chính của chức năng này tôi đặt tên là <ArticlesListPage />. Nó sẽ lấy thông tin từ <articles /> và map từ component <ArticlesList />

JavaScript:
import articles from './article-content';
import ArticlesList from '../components/ArticlesList';

const ArticlesListPage = () => {
    return (
        <>
            <h1> Danh sách bài viết</h1>
            <ArticlesList articles={articles} />
        </>
    )
}

export default ArticlesListPage;

Chức năng của <articles /> là khi các anh chị muốn post một bài viết mới, một thông tin lên website, anh chị sẽ ghé vào component này. Nó là một đối tượng object và chứa những thuộc tính properties như sau

  • Property name là duy nhất và khác nhau giữa các bài viết distinct, nó dùng để map những bài viết khác nhau, và đồng thời cũng là đường dẫn path trong URL
  • Properties title và subtitle hiển thị tiêu đề của bài viết
  • Property content để chứa nội dung bài viết

Khi hoàn thành anh chị nhớ export default articles để những components khác sử dụng

JavaScript:
const articles = [
    {
        name: 'y-kien',
        title: 'Ý kiến bạn đọc',
        subtitle: `Những bên bán hàng thứ ba của Amazon`,
        content: [
            `Tiêu đề "Kiếm triệu đô từ tỉ đô của Bezos" trên số báo tháng 4.2021 đã gây tò mò. Bức tranh về thị trường thương mại điện tử lớn nhất thế giới, nơi không chỉ có quy mô thị trường và khối lượng sản phẩm giao dịch mang lại giá trị lợi nhuận, mà khi nó đạt đến một quy mô nhất định thì ngay chính sự khai thác trong quá trình của chuỗi cung ứng cũng có thể kiếm ra bộn tiền. Những người có lợi là người tiên phong áp dụng công nghệ và phần mềm để quản lý và tối ưu quy trình vận hành và giao dịch, cũng như các phương thức của marketing hiện đại phát huy hiệu quả khi tăng lượng khách hàng tương tác.`,
            `Cách mạng công nghiệp 4.0 đã sản sinh nhiều khái niệm mới như biến Google, Twitter thành những động từ, thì nay khái niệm “bất động sản kỹ thuật số" để chỉ sự mua bán không gian trên các nền tảng thương mại điện tử đang mang lại siêu lợi nhuận. Hiện tượng này xuất hiện trong vòng bốn, năm năm trở lại đây trên để chế thương mại lớn nhất thế giới Amazon của Bezos, đặc biệt là từ sau đại dịch COVID-19.`,
            `Những người tiêu dùng trẻ tại Việt Nam đang có xu hướng tiêu dùng online, lựa chọn mua sắm trên Shoppee, Tiki, Lazada thay thế cho chợ và siêu thị truyền thống, và dân bớt sử dụng tiền mặt cũng sẽ là mảnh đất đầy hứa hẹn cho những nhà đầu tư tìm kiếm những cơ hội kiếm tiền tuyệt vời này. Tuy nhiên, với quy mô thị trường chưa đạt tới mức tối ưu cũng như các nhà bán lẻ thứ ba trên các nền tảng điện tử chủ yếu là cá nhân và hộ gia đình tiểu thương như của Việt Nam hiện tại vẫn chưa thời điểm đủ độ chín để sinh ra những “hiệp sĩ trắng” Thrasio như vậy.`,
            `Lê My Khuyên, giảng viên khoa Tài Chính, ĐH Ngân hàng TP.HCM`
        ]
    },

    {
        name: 'thu-toa-soan',
        title: 'Thư tòa soạn',
        subtitle: `Dấu ấn vô hình`,
        content: [
            `Trong danh sách 2.755 tỉ phú do Forbes công bố năm 2022, có khoảng 120 vị tỉ phú có 90 pháp nhân doanh nghiệp đăng ký hoạt động theo pháp luật Việt Nam. Các công ty này tập trung chủ yếu trong ba lĩnh vực công nghệ, sản xuất, thực phẩm. Cơ cấu như vậy cũng phù hợp với dòng chảy FDI vào Việt Nam.`,
            `Các doanh nghiệp kể trên cũng như khối FDI nói chung giữ vai trò quan trọng trong sự phát triển của nền kinh tế Việt Nam. Trong các mặt hàng dẫn đầu về giá trị kim ngạch xuất khẩu, một số do doanh nghiệp FDI đóng vai trò chủ chốt như xuất khẩu điện tử, điện thoại và linh kiện.`,
            `Ảnh hưởng tích cực từ dòng vốn đầu tư của 90 doanh nghiệp do các tỉ phú sở hữu nói riêng và doanh nghiệp FDI nói chung là tạo công ăn việc làm, nghĩa vụ thuế với nhà nước, hay đóng góp vào tăng trưởng kim ngạch xuất khẩu cho nền kinh tế Việt Nam. Những tác động như vậy đều được thể hiện qua các số liệu thống kê nên dễ nhận biết. Có những đóng góp khác khó có thể đo lường, đánh giá bằng số liệu.`,
            `Đóng góp quan trọng đầu tiên là thúc đẩy sự hoàn thiện môi trường pháp lý, thể chế, tuân thủ luật lệ, quy định quốc tế. Sự góp mặt của doanh nghiệp đến từ các châu lục, đa văn hóa, mang lại sức sống cho nền kinh tế khi tồn tại và phát triển dựa trên nguyên tắc cạnh tranh công bằng, bình đẳng. Việc xây dựng chuỗi giá trị khép kín của C.P Việt Nam, thay đổi tư duy và cách thức canh tác, tiêu dùng sản phẩm nông nghiệp là trường hợp điển cứu cho doanh nghiệp trong nước. Có một số dẫn chứng tốt từ doanh nghiệp FDI trong thực thi trách nhiệm xã hội doanh nghiệp, quan tâm tới môi trường mà câu chuyện về Heineken là điển hình, để cộng đồng doanh nghiệp suy nghĩ và hành động.`,
            `Không ai có thể phủ nhận vai trò sếu đầu đàn của một số doanh nghiệp FDI, đặc biệt ở lĩnh vực công nghệ, trong thu hút đầu tư vào Việt Nam. Những thương hiệu cần kể đến gồm Nidec, Intel, Samsung hay LG. Sự xuất hiện và gia tăng dòng vốn từ các doanh nghiệp đầu ngành này, theo thời gian, kéo theo sự xuất hiện các doanh nghiệp phụ trợ, cung ứng linh kiện của nước ngoài lẫn trong nước. Đó là tiền đề cho việc xây dựng các cụm liên kết trong công nghệ cao.`,
            `Câu chuyện của Intel không dừng lại ở vai trò đưa Việt Nam có tên trên bản đồ công nghệ thế giới, mà còn là minh chứng cho sự thành công trong đào tạo, phát triển nguồn nhân lực có chất lượng. Họ không chỉ đào tạo cho mục tiêu sử dụng nội bộ, mà còn thúc đẩy giáo dục - đào tạo đạt chuẩn của khu vực và quốc tế. Tác động vào cỗ máy giáo dục - đào tạo về lâu dài sẽ góp phần thực hiện các mục tiêu phát triển được lãnh đạo đất nước xây dựng trong tàm nhìn 2045: Việt Nam trở thành nước công nghiệp, phát triển theo hướng bền vững, thân thiện môi trường.`
        ]
    },

    {
        name: 'cp-viet-nam',
        title: 'C.P Việt Nam',
        subtitle: `Khát vọng nhà bếp thế giới`,
        content: [
            `Nhân chuyến công du Thái Lan đầu những năm 1990, một lãnh đạo cấp cao nhà nước Việt Nam ghé thăm nhà máy C.P sản xuất sản phẩm xuất khẩu sang Nhật Bản, ngỏ ý mời C.P mở nhà máy tương tự tại Việt Nam. Việt Nam lúc bấy giờ chủ yếu vẫn nuôi heo quy mô nhỏ, gà thả trong vườn. Gần ba thập niên sau, cuối tháng 12.2020, C.P khai trương nhà máy hiện đại nhất thế giới của họ tại Bình Phước, xuất lô thịt gà made in Việt Nam đầu tiên sang Hong Kong, sau đó tới Nhật Bản, châu Âu. Ngày khai trương, ông Montri Suwanposri, tổng giám đốc công ty cổ phần Chăn nuôi C.P Việt Nam nói với các lãnh đạo cấp cao trong nước: “C.P muốn đưa Việt Nam gia nhập vào bản đồ xuất khẩu thịt gia cầm có thương hiệu trên thế giới”.`,
            `Nhà máy tại Bình Phước là 1 trong 16 nhà máy tại Việt Nam của công ty có sản lượng thức ăn chăn nuôi lớn nhất thế giới, theo thống kê của Watt Global Media. Đây cũng là nhà máy khép kín từ thức ăn chăn nuôi (Feed) - trang trại chăn nuôi (Farm) đến chế biến thực phẩm (Food). Vào Việt Nam từ năm 1988, đến nay công ty của tỉ phú Dhanin Chearavanont - người sở hữu khối tài sản 18,1 tỉ đô la Mỹ theo xếp hạng của Forbes, đã nắm giữ 20% thị phần thức ăn chăn nuôi và 15% sản lượng thịt từ các trang trại tại Việt Nam, theo ước tính riêng của C.P. Thị trường Việt Nam mang về 18% doanh thu cho C.P năm ngoái. Vị thế dẫn đầu thị trường của họ tạo ra những tác động đáng kể, làm thay đổi ngành chăn nuôi Việt Nam. Tham vọng kế tiếp của C.P: trở thành nhà bếp của thế giới từ các nguyên liệu tại Việt Nam.`,
            `Theo báo cáo thường niên của C.P năm 2020, Việt Nam là 1 trong 15 quốc gia tập đoàn Thái Lan đầu tư trang trại và nhà máy chế biến; 1 trong 11 quốc gia công ty có nhà máy thức ăn chăn nuôi. Công ty của tỉ phú Dhanin Chearatanat có nhiều pháp nhân tại Việt Nam: C.P Việt Nam có vốn điều lệ 9.188 tỉ đồng chuyên sản xuất và kinh doanh thức ăn chăn nuôi, trang trại và nhà máy chế biến thực phẩm; công ty CPV Ford về trang trại và chế biến thức ăn có vốn điều lệ 1.073 tỉ đóng. C.P đóng thời sở hữu công ty cổ phần AHM Lifestyles - Creative Hospitality trong lĩnh vực nhà hàng. Họ cũng mở chuỗi cửa hàng Five Stars bán thức ăn nhanh, nhà hàng thương hiệu Chickita chế biến gà thả vườn từ nông trại ở Bình Phước và nhà hàng phong cách Trung Hoa Wan Chai tại Việt Nam.`,
            `Năm 1993, Montri Suwanposri, kế toán trẻ sinh sống ở tỉnh có nhiều người Việt tại Thái, nhận đề nghị của đồng nghiệp tìm giúp họ giám đốc tài chính cho nhà máy của C.P tại Việt Nam. Người tuyển dụng lưỡng lự nhìn Montri một lát rồi nói: “Hay là em đi đi”. Montri bối rối vì anh không hiểu nhiều về đất nước còn bị cấm vận kinh tế. Thế nhưng, 28 năm sau, chàng kế toán giờ đang quản lý gần 30 ngàn nhân viên người Việt ngồi trong căng tin nhà máy bài trí lãng mạn như một quán cà phê, các cánh hoa baby trắng điểm xuyết khắp nơi, nói tiếng Việt rất rõ ràng: “Đây là nhà máy hiện đại nhất thế giới của C.P, hơn cả công ty mẹ ở Thái Lan”. Giống các lãnh đạo người Thái khác tại Việt Nam, Montri được khuyến khích học tiếng Việt để hiểu người bản địa.`,
        ]
    },
];

export default articles;

Component <ArticlesList /> đóng vai trò mapping từ component <articles />. Anh chị nên tìm hiểu về map của React. Nó sẽ trả về một cặp key - value tương ứng. Nói nôm na là giống như cơ chế chìa khóa - ổ khóa. Cho anh chìa khóa A anh trả về giá trị X. Cho anh một path trong URL, anh trả về bài viết tương ứng.

JavaScript:
import {Link} from 'react-router-dom';

const ArticlesList = ({articles}) => {
    return (
        <>
            {articles.map(article => (
                <Link key={article.name} className='article-list-item' to={`/articles/${article.name}`}>
                    <h3>{article.title}</h3>
                    <p>{article.content[0].substring(0,150)}...</p>
                </Link>
            ))}
        </>
    );
}

export default ArticlesList;

Trong đoạn code có sử dụng substring để hiển thị một đoạn ngắn bài viết. Kết quả ta sẽ có được một page như sau


Screen Shot 2022-09-23 at 9.04.12 PM.png
 
Có một tính năng hữu ích mà anh chị sẽ cần.

Giả sử trên trang đặt hàng online, tình trạng đơn hàng của anh chị là chưa giao. Bên dưới có một nút bấm, bấm vào đó thì đơn hàng của anh chị sẽ được xử lý và chuyển trạng thái, hiển thị là đã giao.

React hỗ trợ tính năng này, được gọi là useState function. Khi gọi function này, nó sẽ trả về một mảng array với index 0 là giá trị của trạng thái ban đầu, index 1 là một function return whatever anh chị muốn. Trong trường hợp này, function sẽ trả về dòng chữ đã giao.
 
Back
Top