báo cáo thực tập lập trình frontend reactjs

Ngànhến Dũng ủa của xã hội cũng như bùng nổ Internet, lập trình ến Dũng ện Công nghệ thông tin T3H ải trí, công việc ại điện tử.. Với mục đích và nhu ọc hỏi và tìm tòi những thứ mới mẽ c

TR ƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN NG Đ I H C CÔNG NGH THÔNG TIN ẠI HỌC CÔNG NGHỆ THÔNG TIN ỌC CÔNG NGHỆ THÔNG TIN Ệ THÔNG TIN

KHOA CÔNG NGH PH N M M Ệ THÔNG TIN ẦN MỀM ỀM

BÁO CÁO TH C T P ỰC TẬP ẬP

Công ty th c t p ực tập ập : Vi n Công ngh thông tin T3H ện Công nghệ thông tin T3H ện Công nghệ thông tin T3H

Ng ười phụ trách i ph trách ụ trách : Đ Ti n Dũng ỗ Tiến Dũng ến Dũng

Th c t p sinh ực tập ập : H Hoàng Ph ồ Hoàng Phương ương ng

TP H Chí Minh, tháng 11 năm 2023 ồ Chí Minh, tháng 11 năm 2023

L I M Đ U ỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN Ở ĐẦU ẦN MỀM

V i s phát tri n nhanh chóng c a c a xã h i cũng nh bùng n Internet, l p trìnhủa của xã hội cũng như bùng nổ Internet, lập trình ủa của xã hội cũng như bùng nổ Internet, lập trình ội cũng như bùng nổ Internet, lập trình ư ổ Internet, lập trình ập trìnhWeb đang là m t trong nh ng ngành phát tri n nhanh nh t trên th gi i, đ c bi t là cácội cũng như bùng nổ Internet, lập trình ững ngành phát triển nhanh nhất trên thế giới, đặc biệt là các ất trên thế giới, đặc biệt là các ến Dũng ặc biệt là các ện Công nghệ thông tin T3H Website thươngng m i đi n t ại điện tử ện Công nghệ thông tin T3H ử Trao đ i, buôn bán, c p nh t thông tin, gi i trí, công vi cổ Internet, lập trình ập trình ập trình ải trí, công việc ện Công nghệ thông tin T3H kinh doanh đang d a r t nhi u vào các trang website tr c tuy n V i m c đích và nhuất trên thế giới, đặc biệt là các ều vào các trang website trực tuyến Với mục đích và nhu ến Dũng ục đích và nhu

c u nh v y, có th nói l p trình Web đang là m t xu hư ập trình ập trình ội cũng như bùng nổ Internet, lập trình ư ng ngh nghi p hi n nay, t đóều vào các trang website trực tuyến Với mục đích và nhu ện Công nghệ thông tin T3H ện Công nghệ thông tin T3H ừ đó

d n đ n nhu c u tuy n d ng cao.ẫn đến nhu cầu tuyển dụng cao ến Dũng ục đích và nhu

Cùng v i xu th phát tri n c a th gi i, Vi t Nam cũng không ph i ngo i l Ngànhến Dũng ủa của xã hội cũng như bùng nổ Internet, lập trình ến Dũng ện Công nghệ thông tin T3H ải trí, công việc ại điện tử ện Công nghệ thông tin T3H công nghi p gia công Website non tr Vi t Nam đã và đang phát tri n m nh mẽ, đ hòaện Công nghệ thông tin T3H ẻ ở Việt Nam đã và đang phát triển mạnh mẽ, để hòa ở Việt Nam đã và đang phát triển mạnh mẽ, để hòa ện Công nghệ thông tin T3H ại điện tử

nh p v i nh ng công ty hàng đ u v công ngh trên th gi i Thêm vào đó, ngành l pập trình ững ngành phát triển nhanh nhất trên thế giới, đặc biệt là các ều vào các trang website trực tuyến Với mục đích và nhu ện Công nghệ thông tin T3H ến Dũng ập trìnhtrình Website cũng đòi h i nhi u nhi m v và công ngh áp d ng luôn luôn đ i m i theoỏi nhiều nhiệm vụ và công nghệ áp dụng luôn luôn đổi mới theo ều vào các trang website trực tuyến Với mục đích và nhu ện Công nghệ thông tin T3H ục đích và nhu ện Công nghệ thông tin T3H ục đích và nhu ổ Internet, lập trình

t ng ngày V i ni m đam mê h c h i và tìm tòi nh ng th m i mẽ c a mình em đã quy từ đó ều vào các trang website trực tuyến Với mục đích và nhu ọc hỏi và tìm tòi những thứ mới mẽ của mình em đã quyết ỏi nhiều nhiệm vụ và công nghệ áp dụng luôn luôn đổi mới theo ững ngành phát triển nhanh nhất trên thế giới, đặc biệt là các ứ mới mẽ của mình em đã quyết ủa của xã hội cũng như bùng nổ Internet, lập trình ến Dũng

đ nh ch n l p trình Website làm đ nh học hỏi và tìm tòi những thứ mới mẽ của mình em đã quyết ập trình ư ng cho vi c h c t p và công vi c c a mình.ện Công nghệ thông tin T3H ọc hỏi và tìm tòi những thứ mới mẽ của mình em đã quyết ập trình ện Công nghệ thông tin T3H ủa của xã hội cũng như bùng nổ Internet, lập trình

Sau b n năm h c t p trên trọc hỏi và tìm tòi những thứ mới mẽ của mình em đã quyết ập trình ường, bởi vì mong muốn có thêm kinh nghiệm thực tế,ng, b i vì mong mu n có thêm kinh nghi m th c t ,ở Việt Nam đã và đang phát triển mạnh mẽ, để hòa ện Công nghệ thông tin T3H ến Dũngcũng nh mu n đư ư!c tham gia làm vi c trong m t môi trện Công nghệ thông tin T3H ội cũng như bùng nổ Internet, lập trình ường, bởi vì mong muốn có thêm kinh nghiệm thực tế,ng chuyên nghi p, em có dện Công nghệ thông tin T3H

đ nh là sẽ th c t p m t công ty d n đ u v công ngh Vì v y, em quy t đ nh ch n Vi nập trình ở Việt Nam đã và đang phát triển mạnh mẽ, để hòa ội cũng như bùng nổ Internet, lập trình ẫn đến nhu cầu tuyển dụng cao ều vào các trang website trực tuyến Với mục đích và nhu ện Công nghệ thông tin T3H ập trình ến Dũng ọc hỏi và tìm tòi những thứ mới mẽ của mình em đã quyết ện Công nghệ thông tin T3H Công ngh thông tin T3H - m t môi trện Công nghệ thông tin T3H ội cũng như bùng nổ Internet, lập trình ường, bởi vì mong muốn có thêm kinh nghiệm thực tế,ng hi n đ i và có tính th c ti n cao - là n i sẽện Công nghệ thông tin T3H ại điện tử ễn cao - là nơi sẽ ơnggiúp em th c hi n đện Công nghệ thông tin T3H ư!c d đ nh này

L I C M N ỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN ẢM ƠN ƠN

Trân tr ng g i l i c m n Vi n Công ngh thông tin T3H đã t o đi u ki n cho emọc hỏi và tìm tòi những thứ mới mẽ của mình em đã quyết ử ờng, bởi vì mong muốn có thêm kinh nghiệm thực tế, ải trí, công việc ơng ện Công nghệ thông tin T3H ện Công nghệ thông tin T3H ại điện tử ều vào các trang website trực tuyến Với mục đích và nhu ện Công nghệ thông tin T3H

có c h i đơng ội cũng như bùng nổ Internet, lập trình ư!c th c t p và h c h i thêm ki n th c.ập trình ọc hỏi và tìm tòi những thứ mới mẽ của mình em đã quyết ỏi nhiều nhiệm vụ và công nghệ áp dụng luôn luôn đổi mới theo ến Dũng ứ mới mẽ của mình em đã quyết

Ch trong m t th i gian ng n, nh ng nh s ch d n nhi t tình c a nhóm trainer và# ội cũng như bùng nổ Internet, lập trình ờng, bởi vì mong muốn có thêm kinh nghiệm thực tế, ắn, nhưng nhờ sự chỉ dẫn nhiệt tình của nhóm trainer và ư ờng, bởi vì mong muốn có thêm kinh nghiệm thực tế, # ẫn đến nhu cầu tuyển dụng cao ện Công nghệ thông tin T3H ủa của xã hội cũng như bùng nổ Internet, lập trìnhmentor, nhóm th c t p chúng em đã ti p thu đập trình ến Dũng ư!c nh ng ki n th c quan tr ng đ có thững ngành phát triển nhanh nhất trên thế giới, đặc biệt là các ến Dũng ứ mới mẽ của mình em đã quyết ọc hỏi và tìm tòi những thứ mới mẽ của mình em đã quyếtlàm đư!c giao di n c a m t Website cũng nh cách làm vi c c a m t d án v Website.ện Công nghệ thông tin T3H ủa của xã hội cũng như bùng nổ Internet, lập trình ội cũng như bùng nổ Internet, lập trình ư ện Công nghệ thông tin T3H ủa của xã hội cũng như bùng nổ Internet, lập trình ội cũng như bùng nổ Internet, lập trình ều vào các trang website trực tuyến Với mục đích và nhuChân thành c m n các anh/ch trong nhóm trainer/ải trí, công việc ơng mentor đã b ra th i gian, công s cỏi nhiều nhiệm vụ và công nghệ áp dụng luôn luôn đổi mới theo ờng, bởi vì mong muốn có thêm kinh nghiệm thực tế, ứ mới mẽ của mình em đã quyết

đ hư ng d n chúng em hoàn thành đ t th c t p này.ẫn đến nhu cầu tuyển dụng cao ! ập trình

Đ c bi t c m n anh ặc biệt là các ện Công nghệ thông tin T3H ải trí, công việc ơng Đ Ti n Dũng ỗ Tiến Dũng ến Dũng , đã giúp em làm quen v i HTML5&CSS3 và thư

vi n Bootstrap5, Formik và Ant Design, TailwindCSS đ ng th i hện Công nghệ thông tin T3H ồ Hoàng Phương ờng, bởi vì mong muốn có thêm kinh nghiệm thực tế, ư ng d n em ngôn ngẫn đến nhu cầu tuyển dụng cao ững ngành phát triển nhanh nhất trên thế giới, đặc biệt là cácJavascript và làm vi c trên framework ReactJS đ xây d ng Front-end c a m t website;ện Công nghệ thông tin T3H ủa của xã hội cũng như bùng nổ Internet, lập trình ội cũng như bùng nổ Internet, lập trìnhgiúp đ cho em t n tình c nh ng khó khăn trong công vi c, đ n nh ng khó khăn vi c% ập trình ải trí, công việc ững ngành phát triển nhanh nhất trên thế giới, đặc biệt là các ện Công nghệ thông tin T3H ến Dũng ững ngành phát triển nhanh nhất trên thế giới, đặc biệt là các ện Công nghệ thông tin T3H làm quen v i môi trường, bởi vì mong muốn có thêm kinh nghiệm thực tế,ng m i, bên c nh đó anh cũng ch d n chúng em v cách làm báoại điện tử # ẫn đến nhu cầu tuyển dụng cao ều vào các trang website trực tuyến Với mục đích và nhucáo, lên k ho ch, nh ng kỹ năng không th thi u ến Dũng ại điện tử ững ngành phát triển nhanh nhất trên thế giới, đặc biệt là các ến Dũng

Cũng xin c m n th y cô trong khoa Công ngh ph n m m đã nhi t tình h tr , t oải trí, công việc ơng ện Công nghệ thông tin T3H ều vào các trang website trực tuyến Với mục đích và nhu ện Công nghệ thông tin T3H ỗ Tiến Dũng ! ại điện tử

đi u ki n em làm bài báo cáo này.ều vào các trang website trực tuyến Với mục đích và nhu ện Công nghệ thông tin T3H

H Hoàng Phồ Hoàng Phương ươngngTp.HCM, ngày 28 tháng 11 năm 2023

NH N XÉT C A KHOA ẬP ỦA KHOA

M C L C ỤC LỤC ỤC LỤC

1.2 Môi trường làm việc chuyên nghiệp 10

2.3.1 Tìm hiểu về môi trường làm việc, các công cụ và cài đặt môi trường làm việc 15

3.4.2 Hạn chế 35

Chương 1: Giới thiệu về Viện Công nghệ thông tin T3H

1.1 Giới thiệu về Viện Công nghệ thông tin T3H

Tiền thân là chương trình phối hợp đào tạo nguồn nhân lực CNTT chất lượng cao, đápứng nhu cầu nhân lực IT của Doanh nghiệp Giữa Hitech Viet Nam và Trung Tâm Tin Học –Trường Đại học Khoa học tự nhiên TP HCM từ năm 2014 -2020

Kể từ 21/01/2021 T3H chính thức được Bộ Khoa học và Công nghệ cấp phép hoạt độngtrong lĩnh vực nghiên cứu khoa học, thực hiện các chương trình, đề tài, dự án trong lĩnh vựcCNTT – tập huấn, sát hạch, đào tạo bồi dưỡng nguồn nhân lực CNTT Chất lượng cao Gópphần vào sự phát triển bền vững của Việt Nam Đã được Liên hiệp các Hội Khoa học và Kỹthuật Việt Nam – Bộ Khoa học và Công nghệ cấp phép thành lập Viện Công nghệ thông tinT3H

1.2 Môi trường làm việc chuyên nghiệp

Trong quá trình hợp tác Chương trình phối hợp đào tạo đã đạt được rất nhiều thành tựutrong công tác đào tạo, trang bị kiến thức thực tiễn có tính ứng dụng thực tế, Cập nhật côngnghệ tiên tiến đáp ứng nhu cầu chất lượng nguồn nhân lực ngày càng cao tại các doanh nghiệp,

Kết quả đó được minh chứng qua các thành tựu thống kê đạt được như; hơn 120.000 nhân lựcCNTT chất lượng đang công tác tại các vị trí quan trọng trong các tập đoàn công nghệ lớn nhưFPT, Viettel, IBM, CMC…từ đó T3H được thừa hưởng nền tảng đào tạo và nhiều thành tựu giảithưởng danh giá cùng đơn vị hợp tác trong hoạt động đào tạo và đổi mới đào tạo về lĩnh vựcCNTT như Cup bạc đào tạo CNTT phi chính quy, đơn vị đào tạo hàng đầu Top IT 2002, Huânchương lao động hạng 3 Giải thưởng thương hiệu Châu Á Thái Bình Dương.

Đ có đư!c nh ng thành công trên, T3H ch trững ngành phát triển nhanh nhất trên thế giới, đặc biệt là các ủa của xã hội cũng như bùng nổ Internet, lập trình ươngng tuy n d ng nh ng l p trìnhục đích và nhu ững ngành phát triển nhanh nhất trên thế giới, đặc biệt là các ập trìnhviên tài năng, có kh năng giao ti p b ng ti ng Anh và có kỹ năng t t.ải trí, công việc ến Dũng ằng tiếng Anh và có kỹ năng tốt ến Dũng

ng viên sau khi gia nh p T3H sẽ đ c h ng d n c th v công ty, các quy đ nh,' ập trình ư! ư ẫn đến nhu cầu tuyển dụng cao ục đích và nhu ều vào các trang website trực tuyến Với mục đích và nhu

v trí công vi c Theo đó, ngay trong quá trình th vi c, nhân viên sẽ đện Công nghệ thông tin T3H ử ện Công nghệ thông tin T3H ư!c tham gia cáckhóa training v kỹ năng làm vi c, giao ti p đ b sung đ y đ các yêu c u c n thi t khiều vào các trang website trực tuyến Với mục đích và nhu ện Công nghệ thông tin T3H ến Dũng ổ Internet, lập trình ủa của xã hội cũng như bùng nổ Internet, lập trình ến Dũnglàm vi c t i T3H.ện Công nghệ thông tin T3H ại điện tử

1.3 Hoạt động ngoại khóa

T3H luôn c g ng t o ra đ i s ng văn hóa phong phú, sôi đ ng, đ công ty không ắn, nhưng nhờ sự chỉ dẫn nhiệt tình của nhóm trainer và ại điện tử ờng, bởi vì mong muốn có thêm kinh nghiệm thực tế, ội cũng như bùng nổ Internet, lập trình

ch là n i đ làm vi c, mà còn là n i có các ho t đ ng ngoài công vi c đ y thú v , h p d n;# ơng ện Công nghệ thông tin T3H ơng ại điện tử ội cũng như bùng nổ Internet, lập trình ện Công nghệ thông tin T3H ất trên thế giới, đặc biệt là các ẫn đến nhu cầu tuyển dụng cao

thường, bởi vì mong muốn có thêm kinh nghiệm thực tế,ng xuyên t ch c các ho t đ ng v th thao, văn ngh ổ Internet, lập trình ứ mới mẽ của mình em đã quyết ại điện tử ội cũng như bùng nổ Internet, lập trình ều vào các trang website trực tuyến Với mục đích và nhu ện Công nghệ thông tin T3H

Bên c nh đó, T3H còn n i b t trong gi i CNTT v các ho t đ ng th thao, văn hóa ại điện tử ổ Internet, lập trình ập trình ều vào các trang website trực tuyến Với mục đích và nhu ại điện tử ội cũng như bùng nổ Internet, lập trình

Ngày H i Cha M nhân viên nh m bày t lòng tri ân đ n các b c ph huynh, ngày h i ội cũng như bùng nổ Internet, lập trình ( ằng tiếng Anh và có kỹ năng tốt ỏi nhiều nhiệm vụ và công nghệ áp dụng luôn luôn đổi mới theo ến Dũng ập trình ục đích và nhu ội cũng như bùng nổ Internet, lập trìnhThi u Nhi nh m g n k t gia đình nhân viên là nh ng ho t đ ng đã tr thành truy n ến Dũng ằng tiếng Anh và có kỹ năng tốt ắn, nhưng nhờ sự chỉ dẫn nhiệt tình của nhóm trainer và ến Dũng ững ngành phát triển nhanh nhất trên thế giới, đặc biệt là các ại điện tử ội cũng như bùng nổ Internet, lập trình ở Việt Nam đã và đang phát triển mạnh mẽ, để hòa ều vào các trang website trực tuyến Với mục đích và nhu

th ng hàng năm Ngoài ra, các câu l c b nh Bóng đá nam - n , Music, Dancing, Taichi - ại điện tử ội cũng như bùng nổ Internet, lập trình ư ững ngành phát triển nhanh nhất trên thế giới, đặc biệt là cácYoga ho t đ ng thại điện tử ội cũng như bùng nổ Internet, lập trình ường, bởi vì mong muốn có thêm kinh nghiệm thực tế,ng xuyên, giúp các thành viên khám phá đam mê và gi i t a căng ải trí, công việc ỏi nhiều nhiệm vụ và công nghệ áp dụng luôn luôn đổi mới theo

th ng sau gi làm vi c ẳng sau giờ làm việc ờng, bởi vì mong muốn có thêm kinh nghiệm thực tế, ện Công nghệ thông tin T3H

T t c nh ng ho t đ ng này đ u hất trên thế giới, đặc biệt là các ải trí, công việc ững ngành phát triển nhanh nhất trên thế giới, đặc biệt là các ại điện tử ội cũng như bùng nổ Internet, lập trình ều vào các trang website trực tuyến Với mục đích và nhu ư ng đ n s ki n l n nh t là L k ni m công ến Dũng ện Công nghệ thông tin T3H ất trên thế giới, đặc biệt là các ễn cao - là nơi sẽ ỷ niệm công ện Công nghệ thông tin T3H

ty hàng năm, v i s tham gia c a t t c nhân viên và khách hàng Đây cũng là th i đi m ủa của xã hội cũng như bùng nổ Internet, lập trình ất trên thế giới, đặc biệt là các ải trí, công việc ờng, bởi vì mong muốn có thêm kinh nghiệm thực tế,

đ đánh giá, ghi nh n và khen thập trình ưở Việt Nam đã và đang phát triển mạnh mẽ, để hòang cho s đóng góp c a toàn th nhân viên trong m t ủa của xã hội cũng như bùng nổ Internet, lập trình ội cũng như bùng nổ Internet, lập trìnhnăm

Hợp tác với các tổ chức, cá nhân ở trong và ngoài nước để thực hiện chức năng, nhiệm vụcủa Viện

1.5 Đối tác

Chương 2: Nội dung thực tập

Đợt thực tập với chủ đề “Lập trình Front-end ReactJS” nhằm mục đích giúp sinh viênthực tập được đào tạo toàn diện về lập trình Front-end cho một website bằng ngôn ngữJavascript cùng framework của nó là ReactJS, đồng thời rèn luyện những kỹ năng mềm như làmviệc nhóm, thuyết trình, giao tiếp Tại công ty, sinh viên có cơ hội được học tập, khám phá vàlàm việc trong một môi trường phát triển ứng dụng chuyên nghiệp

2.1 Tổng quan công nghệ

ReactJS Framework là một thư viện Javascript mã nguồn mở do Facebook tạo

ra để xây dựng các ứng dụng website chất lượng cao nhanh và hiệu quả nhất với mã

nguồn

Ưu điểm: Giúp ứng dụng web chạy nhanh và mượt mà hơn do sử dụng Virtual

DOM để tối ưu hóa việc render ReactJS sử dụng mô hình thành phần để xây dựng

giao diện người dùng, giúp việc phát triển và bảo trì ứng dụng trở nên dễ dàng hơn

Đồng thời, ReactJS có khả năng tương thích cao với nhiều nền tảng nên ngoài phát

triển ứng dụng web còn dùng để xây dựng ứng dụng di động và máy tính để bàn

Ưu điểm lớn nhất nó chính là có một cộng đồng người dùng và nhà phát triển lớn,

cung cấp nhiêu tài liệu, hướng dẫn và thư viện bổ sung

Nhược điểm: Phải học một số khái niệm và cú pháp mới như props, components,

state,…và state management Đồng thời, có thể làm ứng dụng trở nên phức tạp hơn

khi nó trở nên lớn và nhiều chức năng, animation

2.2 Tìm hiểu công ty và các kỹ năng cơ bản trong công ty

Thời gian: 5 ngày (1 tuần)

Nội dung: Giới thiệu về công ty, cách tổ chức của công ty

Được nghe người phụ trách giới thiệu về công ty, quá trình thành lập và phát triên(như đã nhắc đến ở trên), quy trình làm việc từ cao xuống thấp, cách thức tổ chức củacông ty

Ngoài ra, thực tập sinh còn được giới thiệu về cách thức làm việc trong công tynhư thời gian đi làm, các quy định cần phải tuân thủ, cách sử dụng email trong côngviệc…

Kết quả: Hiểu thêm về viện Công nghệ T3H, quá trình thành lập và phát triển Có thêm

các kỹ năng về việc sử dụng email trong công việc, làm việc có kế hoạch, có kỷ luật, cótrách nhiệm hơn

2.3 Nghiên cứu kỹ thuật

2.3.1 Tìm hiểu về môi trường làm việc, các công cụ và cài đặt môi trường làm việc

Thời gian: 4 ngày

Nội dung: Tìm hiểu về các công cụ sẽ được sử dụng trong quá trình làm việc.

Trong thời gian này, supervisor đã hướng dẫn thực tập sinh tìm hiểu về các công cụ sẽ giúpích cho trong công việc sau này Một số phần mềm trong số đó như:

Teams - Ứng dụng trao đổi thông tin, sử dụng trong làm việc nhóm

Github - Trình duyệt lưu trữ source mã nguồn, dùng để lưu trữ code các bài thực hành

VS Code - một trình soạn thảo mã nguồn mã nguồn mở miễn phí được phát triển bởiMicrosoft dành cho Windows, Linux và macOS VS Code hỗ trợ nhiều ngôn ngữ lập

trình, bao gồm JavaScript, Python, C++, Java, C#, TypeScript, HTML, CSS, và nhiềungôn ngữ khác.

Thực hiện : Thực hành sử dụng các phần mềm đã nêu trên, làm bài kiểm tra kiến thức.

Kết quả: Lập trình sử dụng các công cụ miễn phí, giúp dễ dàng kết hợp các công cụ với nhau.

2.3.2 Tìm hiểu và xây dựng bộ khung cơ bản cho website:

Thời gian: 10 ngày (2 tuần)

Nội dung: Được training về các kỹ thuật và những kiến thức quan trọng cho việc lập trình

front-end cơ bản, đây là bộ khung ban đầu cho giao diện một trang web

Cài đặt Visual Studio Code và khởi tạo dự án với HTML5, vận dụng tool Git được học

để tạo repo và push source lên github để quản lý dự án

Làm quen với một số thẻ HTML thông dụng, CSS để tùy chỉnh giao diện

Thực hành và làm một số component đơn giản như navbar và card tin tức đơn giản

Làm quen và import thư viện Bootstrap5 vào dự án

Xây dựng một form login, menu , navbar bằng các câu lệnh của bootstrap

Kết hợp HTML5, CSS3 và Bootstrap5 để thực hiện kỹ thuật Responsive:

Hướng dẫn khái niệm và làm quen với kỹ thuật Responsive website với media screenqueries và responsive design nhằm làm tăng khả năng tiếp cận và tăng trải nghiệm ngườidùng trên nhiều thiết bị khác nhau, đồng thời tăng SEO (giúp trang web được xếp hạngcao hơn trong kết quả tìm kiếm của Google)

Tổng hợp kiến thức đã học và host online

Thực hành tạo giao diện cơ bản của một website xem phim online

Thực hiện Responsive cho Website

Tiến hành đưa Website lên Host

Thực hiện:

Tham gia đầy đủ các buổi training của công ty

Làm các bài thực hành, kiểm tra về kiến thức đã học

K t qu ết quả ả:

Có được những kiến thức quan trọng cho việc lập trình Front-end sau này.

Ngoài ra còn được biết thêm một số quy tắc trong việc viết code sao cho đúng chuẩn BEM,

dễ đọc, dễ hiểu và dễ bảo trì

2.3.3 Tìm hiểu ngôn ngữ lập trình Javascript

Thời gian: 10 ngày (2 tuần)

Nội dung: Được training về ngôn ngữ Javascript.

Javascript cơ bản

Tổ chức thư mục, cài đặt môi trường cho JS

Nắm được kiểu dữ liệu, cách khai báo biến và các câu lệnh cơ bản: comment, if, for.Nắm được kiến thức về hàm chức năng: biến toàn cục, cục bộ, vùng dữ liệu, tham số(tham chiếu, tham trị)

Hiểu được toán tử: Rest Operator

Biết được cách debug bằng browser với Chrome DevTools và Firefox DevTools

Tìm hiểu Object

Hiểu được cách khai báo, chức năng, công dụng của Object

Nắm được kiến thức về con trỏ This

Nắm được cú pháp của biểu thức Object Destructuring, cách dùng Object.keys()

Hiểu được toán tử: Spread Operator

Tìm hiểu về Number, String và Array

Nắm được phương pháp xử lý với kiểu dữ liệu Number

Làm chủ các tính năng bổ trợ của String và Array

Nắm được cú pháp của biểu thức Destructuring Assignment

Lập trình OOP trong Javascript (Class)

Nắm được cách khai báo properties, methods, tính kế thừa của Class

Nắm được ý nghĩa của Static: properties and methods

Học cách sử dụng Mixins trong class

Tìm hiểu về CallBack, Promise và Async/Await

Tìm hiểu và nắm được cách sử dụng Callback

Làm chủ được promise trong xử lý tác vụ bất đồng bộ, làm quen với cú pháp async/awaittrong promise.

Hiểu về Event Loop trong JS

Tìm hiểu về Session, Cookie và LocalStorage

Tìm hiểu và nắm được khái niệm, cách sử dụng và ứng dụng của session, cookie va localstorage

Tham gia đầy đủ các buổi training của công ty

Làm các bài thực hành, kiểm tra về kiến thức đã học

K t qu ết quả ả:

Có được những kiến thức cơ bản cho việc lập trình Front-end sau này

Ngoài ra còn được biết thêm một số quy tắc trong việc viết code theo cấu trúc phần mềmcho đúng chuẩn, dễ đọc, dễ hiểu

2.3.4 Tìm hiểu về ReactJS

Thời gian: 11 ngày (2 tuần)

Nội dung: Được training về lib/framework ReactJS.

Khởi tạo một dự án ReactJS

Biết cách xây dựng môi trường và thiết lập một project ReactJS

Hiểu được bản chất react: React CDN

Xây dựng project từ đầu bằng toolchain CRA và nắm được cấu tạo của project:node_modules, package.json,

Tìm hiểu về dữ liệu và cách truyền dữ liệu

Hiểu và vận dụng State và Props trong ReactJS.

Cách truyền dữ liệu giữa các Components

Tìm hiểu vòng đời của Component

Làm chủ vòng đời của class component: constructor(), componentWillMount(), render(), componentDidMount(), componentWillReceiveProps(), shouldComponentUpdate(), componentDidUpdate(), componentWillUnMount()

Ứng dụng vào một component có chức năng Newsfeeds

Tích hợp với các thư viện bổ trợ xây dựng Server API giả lập

Xây dựng được một Server api giả lập với Json Server

Kết hợp gọi api bằng thư viện hỗ trợ

Biết cách dùng cách component từ thư viện ngoài

Tìm hiểu về Routing trong ReactJS

Biết cách xây dựng ứng dụng nhiều trang Page và chuyển đổi giữa các Page bằngrouting

Ứng dụng HOC trong bằng xây dựng component: PrivateRoute

Tìm hiểu về Hook trong ReactJS:

Nắm được cách hook cơ bản: useState(), useEffect()

Quy định cần biết khi dùng Hooks

Tự xây dựng một customHook()

Tìm hiểu về ContextAPI:

Tìm hiểu về React.createContext, Context.Provider, Class.contextType,

Context.Consumer

Nắm được cách dùng và ứng dụng của ContextAPI

State Management và kiến trúc Redux:

Nắm được khái niệm State Management và lý do ra đời

Nắm được các khái niệm cấu tạo nên Redux: Actions, Store, Reducers và Middlewares.Xây dựng kiến trúc project thực tế với Redux kết hợp Middlewares

Biết cách kiểm tra giữ liệu bằng Redux devtools

Thực hành mini-project:

Thực hành xây dựng một website quản lý chi tiêu và lọc chi tiêu theo năm ứng dụngHooks và Props.

Xây dựng một website đặt đồ ăn đơn ứng dụng lấy api, props, hooks và redux cho việcchức năng cart và thanh toán

Thực hiện:

Tham gia đầy đủ các buổi training của công ty

Làm các bài thực hành, kiểm tra về kiến thức đã học

K t qu ết quả ả:

Có được những kiến thức cơ bản và nâng cao cho việc xây dựng Website với ReactJS nhằmphục vụ cho đồ án thực tập

2.4 Thực hiện Final Project

Sau một tháng rưỡi được training và thực hành, thực tập sinh đã nắm được những kiếnthức cơ bản về Javascript và ReactJS Trong một tháng rưỡi còn lại, mentor đã hướngdẫn thực tập sinh áp dụng những kiến thức đã học để thực hiện một project về bất độngsản

Chương 3: Chi tiết về Final Project

3.1 Phân loại các yêu cầu phần mềm

3.1.1 Yêu cầu hệ thống

Website bất động sản hoạt động cơ bản như một website thông thường

Website có tên là “UTH-BDS” có giao diện lấy ý tưởng từ Website

“batdongsan.com”, là một công cụ đắc lực trong việc giúp cho người dùng có

thể theo dõi và mua bán bất động sản

Ứng dụng cung cấp cho người dùng các chức năng chính như chỉnh sửa thông

tin cá nhân, quản lý bất động sản của cá nhân, quản lý tài khoản của bản thân

và tham gia mua, bán và cho thuê bất động sản với người dùng khác qua email

3.1.2 Yêu cầu nghiệp vụ

Lưu trữ: Lập thông tin và quản lý một hoặc nhiều bài bán/cho thuê bất động

sản Lập thông tin của người dùng (thông tin cá nhân, )

Tra cứu: Tra cứu bất động sản theo từ khóa và bộ lọc.

Yêu cầu: Chất lượng, chạy ổn và mượt mà; giao diện thân thiện và phù hợp với một sàn bất

động sản

3.2 Danh sách các chức năng cần có của ứng dụng