BÁO CÁO THỰC TẬP LẬP TRÌNH FRONT-END REACTJS

1

TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN
KHOA CÔNG NGHỆ PHẦN MỀM

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

LẬP TRÌNH FRONT-END REACTJS

Cơng ty thực tập

: Công ty TNHH Giải pháp Phần mềm TISOHA

Người phụ trách

: Đỗ Cơng Bá

Thực tập sinh

: Võ Hồng Đức Khoa

Võ Hồng Đức Khoa


2

TP. Hồ Chí Minh, tháng 06 năm 2022

Võ Hồng Đức Khoa

3

LỜI MỞ ĐẦU
Trong cuộc cách mạng công nghiệp 4.0, công nghệ thơng tin nói chung và ngành Cơng nghệ
phần mềm nói riêng ln là nhân tố đóng vai trị quan trọng trong q trình phát triển của xã hội.
Cơng nghệ Web, hay công nghệ sản xuất các trang web đã phục vụ hầu hết các nhu cầu của
con người từ bán hàng, cung cấp kiến thức đến thông tin liên lạc, ... Hiện nay đã có đến hơn 1.5
tỷ trang web, nhưng nhu cầu tạo ra những trang web mới vẫn chưa có dấu hiệu giảm.
Do đó, một trang web muốn được nhiều người sử dụng phải đáp ứng được yếu tố hình thức
và nội dung. Làm thế nào để sản phẩm tạo ra đạt chất lượng cao ở hai yếu tố trên ln làm bất kì
một đội ngũ phát triển website nào cũng cần phải suy nghĩ đau đầu. Để thử thách bản thân trong
ngành công nghiệp web, em đã lựa chọn Front-end web developer là định hướng cho việc học
cũng như nghề nghiệp trong tương lai.
React là một thư viện UI phát triển tại Facebook, một thư viện Javascript đang nổi lên trong
những năm gần đây để hỗ trợ việc xây dựng những thành phần (components) UI có tính tương
tác cao, có trạng thái và có thể sử dụng lại được. React được sử dụng tại Facebook cũng như trên
Instagram được viết hồn tồn trên React.
Có thể nói ReactJS là một công cụ tuyệt vời giúp doanh nghiệp vượt qua đối thủ khi cạnh
tranh về mảng thiết kế các ứng dụng web.
• Ứng dụng được tạo ra bởi ReactJS với cấu trúc UI tốt hơn giúp nâng cao và tối ưu hóa UX.
Các doanh nghiệp có thể dễ dàng tăng tương tác của người dùng, tỉ lệ click và tỉ lệ chuyển
đổi (conversion) trên trang web của mình.
• Hiệu suất kinh doanh khi có dùng ứng dụng của ReactJS cũng tốt hơn so với khi dùng các
framework khác. Nó sẽ hạn chế cập nhật của DOM, từ đó tăng tốc độ truy cập ứng dụng
và cải tiến UX tốt hơn.
• ReactJS cũng được thiết kế để giúp cải thiện số trang render tổng từ phía server. Đồng thời
sẽ giúp tối ưu các nút để render phía client-side. Khả năng tùy chỉnh cơng cụ tốt, thậm chí
làm giảm ngân sách bảo trì hệ thống, giúp ReactJS hiệu quả cao hơn.
Bên cạnh thời gian học tập trên trường, do mong muốn có thêm kinh nghiệm thực tế, cũng
như muốn được tham gia làm việc trong một môi trường chuyên nghiệp, em có dự định là sẽ thực

tập trong kì này. Vì vậy, em quyết định chọn cơng ty TISOHA là nơi sẽ giúp em thực hiện được
dự định này.

Võ Hoàng Đức Khoa


4

LỜI CẢM ƠN

Trân trọng gửi lời cảm ơn Công ty TNHH Giải pháp Phần mềm TISOHA đã tạo điều kiện
cho em có cơ hội được thực tập tại cơng ty.
Chỉ trong một thời gian ngắn, nhưng nhờ sự chỉ dẫn nhiệt tình, em đã tiếp thu được những
kiến thức và kinh nghiệm quan trọng trong lập trình front-end Reactjs.
Đặc biệt cảm ơn anh Đỗ Công Bá đã hướng dẫn, giúp đỡ em tận tình hồn thành các cơng
việc được giao.
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ều
kiện em làm bài báo cáo này.
Võ Hoàng Đức Khoa
TpHCM, 17/06/2022

Võ Hoàng Đức Khoa


5

NHẬN XÉT CỦA KHOA

..........................................................................................................................................................
..........................................................................................................................................................

..........................................................................................................................................................
..........................................................................................................................................................
..........................................................................................................................................................
..........................................................................................................................................................
..........................................................................................................................................................
..........................................................................................................................................................
..........................................................................................................................................................
..........................................................................................................................................................
..........................................................................................................................................................
..........................................................................................................................................................
..........................................................................................................................................................
..........................................................................................................................................................
..........................................................................................................................................................
..........................................................................................................................................................
..........................................................................................................................................................
..........................................................................................................................................................

Võ Hoàng Đức Khoa


6

MỤC LỤC

MỤC LỤC ........................................................................................................................... 6
Chương 1: Giới thiệu công ty thực tập ........................................................................... 7
1. Giới thiệu về công ty Ranus. .................................................................................... 7
2. Sản phẩm của công ty ............................................................................................... 7
Chương 2: Nội dung thực tập .......................................................................................... 8
1.

2.
3.
4.

Tìm hiểu cơng ty và các kỹ năng cơ bản trong công ty ............................................ 8
Nghiên cứu kỹ thuật .................................................................................................. 8
Thực hiện project ...................................................................................................... 9
Lịch làm việc ............................................................................................................ 9

Chương 3: Các công việc đã làm ................................................................................... 10
1. Header bar và slider trang home page.....................................................................10
2. Header layout mobile trang home page...................................................................11
3. Content trang home page cửa hàng..........................................................................11
4. Các công việc khác..................................................................................................12
TÀI LIỆU THAM KHẢO ............................................................................................... 28
TỔNG KẾT ...................................................................................................................... 28

Võ Hoàng Đức Khoa


7

Chương 1: Giới thiêu công ty thực tập

1. Giới thiệu công ty TNHH Giải pháp Phần mềm TISOHA
Công ty TNHH Giải pháp phần mềm TISOHA là một start-up được thành lập vào
10/2020 đến nay đã hoạt động được gần 2 năm. Trong thời gian hoạt động, công ty đã
nhận cung cấp dịch vụ cho nhiều khách hàng tại Mỹ, Malta, Úc và Singapore...nơi tập
trung phát triển ứng dụng trên nền web và lập trình ứng dụng cho điện thoại thơng
minh.

TISOHA đem lại cho khách hàng những dịch vụ lập trình, gia cơng phần mềm
uy tín chất lượng với độ an toàn cao, khả năng mở rộng và tiết kiệm chi phí cho
khách hàng.

2. Sản phẩm của cơng ty
Sản phẩm của công ty chủ yếu là các dự án outsource về giáo dục, giải trí, thương
mại.
Cơng ty ln mang đến cho khách hàng dịch vụ phát triển, gia công phần mềm hồn
hảo từ hỗ trợ, tư vấn, bảo trì đến phát triển các ứng dụng, phần mềm một cách toàn
diện. Các sản phẩm và giải pháp do công ty triển khai được đảm bảo mức độ an
tồn cao, có khả năng mở rộng, mang lại sự hài lòng về chất lượng và thỏa mãn về
tiết kiệm chi phí.

Võ Hồng Đức Khoa


8

Chương 2: Nội dung thực tập
Thực hiện các task được giao

1. Tìm hiểu cơng ty và các kỹ năng cơ bản trong công ty
Thời gian : 1 ngày
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ủa cơng
ty .
Ngồ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 ty như
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ông việc…
Kết quả : Hiểu thêm về cơng ty, q 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. Nghiên cứu kỹ thuật
2.1.

2.2.

Các công cụ làm việc
Thời gian : 1 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, cài đặt các công cụ phục vụ cho công việc như: Visual studio
code, Git, Slack, Redmine, …
Thực hiện : Thực hành sử dụng các phần mềm đã nêu trên.
Kết quả : Làm quen được với các cơng cụ
Tìm hiểu HTML, CSS, SCSS, JavaScript
Vì muốn được hiểu sâu về front-end nên em được công ty củng cố kiến thức và đào tạo lại từ
đầu.

Thời gian: 7 ngày
Nội dung: Được training về các kỹ thuật html, css, scss cơ bản và nâng cao, những kiến
thức quan trọng cho việc tạo các layout responsive cho trang web.
- Html: cấu trúc và các thành phần trong trang web và ứng dụng, phân chia các đoạn
văn, heading, links,…
- Css: Tạo phong cách và kiểu cho trang web nhu tạo bố cục các layout, color, khoảng
cách, reponsive,…
- Scss: Là tiền xử lý css, giúp viết css theo cách một ngơn ngữ lập trình, có cấu trúc
rõ ràng , rành mạch, dễ phát triển và bảo trì code hơn.
- Tìm hiểu về JS/Jquery:
- Tìm hiểu JS DOM
Võ Hoàng Đức Khoa

9

2.3.

- Tìm hiểu về object, function, class, Async
- Tìm hiểu JQuery.
- Tìm hiểu JS web API.
- Kiến thức cơ bản về UI/UX: Tìm hiểu khái niệm ui/ux.
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ả:
- Nắm được kiến thức html/css/scss cơ bản
- Nắm được BEM name.
- Có thể dàn được layout trang web, style theo design và responsive.
Nghiên cứu tài liệu và những kỹ thuật về ReactJS
Thời gian: 7 ngày
Nội dung: Được giao và tìm hiểu về những tài liệu và kỹ thuật liên quan đến
dự án. Các tài liệu bao gồm:
- JSX là một dạng ngôn ngữ cho phép viết các mã HTML trong Javascript. Đặc điểm:
Faster: Nhanh hơn. JSX thực hiện tối ưu hóa trong khi biên dịch sang mã Javacsript.
Các mã này cho thời gian thực hiện nhanh hơn nhiều so với một mã tương đương
viết trực tiếp bằng Javascript. Safer: an toàn hơn. Ngược với Javascript, JSX là kiểu
statically-typed, nghĩa là nó được biên dịch trước khi chạy, giống như Java, C++.
Vì thế các lỗi sẽ được phát hiện ngay trong q trình biên dịch. Ngồi ra, nó cũng
cung cấp tính năng gỡ lỗi khi biên dịch rất tốt. Easier: Dễ dàng hơn. JSX kế thừa
dựa trên Javascript, vì vậy rất dễ dàng để cho các lập trình viên Javascripts có thể
sử dụng.

- React được xây dựng xung quanh các component, chứ không dùng templatenhư các
framework khác. Trong React, chúng ta xây dựng trang web sử dụng những thành
phần (component) nhỏ. Chúng ta có thể tái sử dụng một component ở nhiều nơi,
với các trạng thái hoặc các thuộc tính khác nhau, trong một component lại có thể
chứa thành phần khác. Mỗi component trong React có một trạng thái riêng, có thể
thay đổi, và React sẽ thực hiện cập nhật component dựa trên những thay đổi của
trạng thái. Mọi thứ React đều là component. Chúng giúp bảo trì mã code khi làm
việc với các dự án lớn. Một react component đơn giản chỉ cần một method render.
Có rất nhiều methods khả dụng khác, nhưng render là method chủ đạo.
- Props: giúp các component tương tác với nhau, component nhận input gọi là props,
và trả thuộc tính mơ tả những gì component con sẽ render. Prop là bất biến.
- State: thể hiện trạng thái của ứng dụng, khi state thay đồi thì component đồng thời

Võ Hồng Đức Khoa


10

2.4.

2.5.

2.6.

render lại để cập nhật UI.
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ả:
- Nâng cao kỹ năng lập trình Front-end

- Tạo được những giao diện demo đơn giản về kỹ thuật đã nghiên cứu.
- Có được những kiến thức quan trọng cho việc lập trình sau này.
- Ngồ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, dễ đọc, dễ hiểu.
Nghiên cứu bản design, code structure của TISOHA
Thời gian: 3 ngày
Nội dung: Nghiên cứu design và chức năng các page của TISOHA, tìm hiểu cách
các kĩ thuật được áp dụng trong dự án, cách áp dụng các quy chuẩn code, clean
code vào project, cách tổ chức project…
Kết quả: Hiểu trực quan các xử lý trong project, cách tổ chức project, các quy
chuẩn code,
Thực hành trên Visual Studio Code
Thời gian: 7 ngày
Nội dung: Áp dụng các kiến thức đã tìm hiểu, thực hành mơ phỏng lại website .
- Đọc hiểu thiết kế web
- Nắm luồng xử lý
- Thiết kế các giao diện, màn hình của trang chủ. Tạo các hiệu ứng cho
website.
- Thiết kế các xử lý logic cơ bản, chuyển màn hình trong website.
Kết quả:
- Mơ phỏng lại được website theo code của bản thân
- Nâng cao khả năng lập trình front-end, javascript và các kỹ năng liên quan,
bổ trợ cho quá trình sau này.
Thực hành xây dựng website theo yêu cầu
Thời gian: 1 tháng
Nội dung: Thực hành xây dựng giao diện một website theo yêu cầu của người
hướng dẫn
Kết quả: Xây dựng được một giao diện website đáp ứng các yêu cầu đặt ra.

3. Thực hiện project

Võ Hoàng Đức Khoa


11

4. Lịch làm việc

Tuần

1

2

3
4

Cơng việc
- Tìm hiểu về cơng ty,
cách tổ chức của công
ty.
- Làm quen với các
công cụ làm việc trong
cơng ty.
- Học cách trao đổi,
làm việc nhóm.
- Nghiên cứu tài liệu và
các kỹ thuật của dự án
TISOHA
- Nghiên cứu về

ReactJS cơ bản và
chuyên sâu
- Thực hành dự án
TISOHA bằng ReactJS
- Tìm hiểu bản thiết kế

Người hướng dẫn

Mức
độ
hồn
thành

Nhận xét của người
hướng dẫn

Anh Đỗ Công Bá

Anh Đỗ Công Bá

Anh Đỗ Cơng Bá
Anh Đỗ Cơng Bá

của dự án, thực hành
những gì đã học

Võ Hoàng Đức Khoa


12

Chương 3: Các công việc đã làm

1. Init source code

Nội dung : Init source code và implement based component
Thực hiện :
-

Sử dụng Ant Design component để dựng giao diện.
Võ Hoàng Đức Khoa


13

-

Sử dụng axios để call api.

-

Dùng redux để quản lí global state

-

Sử dụng react-router-dom để navigate

-

Sử dụng chart.js để render ảnh đồ thị

-

Dùng firebase để hiển thị notification

-

Sử dụng react-hook-form và yup để validate form và handle submit form

Kết quả :
- Hoàn thành task đúng với yêu cầu.

2. Tạo components

Nội dung : Tạo components theo thiết kế của designer.

Võ Hoàng Đức Khoa


14

Thực hiện :
-

Tạo custom form controls cho form.

-

Tạo Table với pagination

-

Tạo modal

-

Tạo sidebar UI

-

Custom input để upload file csv bộ câu hỏi

Kết quả :
-

Hoàn thành task đúng với yêu cầu.

3. Xây dựng giao diện
(Do quy định sản phẩm đang được thương mại của công ty chi tiết về dự án khơng
được cung cấp ra bên ngồi)
4. Một số cơng việc khác
- Xây dựng UI cho landing page của công ty

Võ Hoàng Đức Khoa


15

Võ Hoàng Đức Khoa

16

Võ Hoàng Đức Khoa


17

Võ Hoàng Đức Khoa


18

Võ Hoàng Đức Khoa


19

Võ Hoàng Đức Khoa


20

TÀI LIỆU THAM KHẢO

- HTML, CSS
/>- Nodejs
/>- ReactJS
/>- Sass
/> />

TỔNG KẾT

Sau gần 3 tháng thực tập tại TISOHA, em đã học được nhiều kinh nghiệm bổ ích về lập trình giao
diện web với ReactJS cũng như ReduxJS, về thiết kế UI/UX hồn thành các nhiệm vụ được giao. Nhờ
đó, em đã hiểu được quy trình phát triển của một dự án, đồng thời hiểu được trải nghiệm làm dự án thực
tế, tăng kĩ năng giao tiếp, xử lí tình huống.
Chân thành cám ơn quý Công ty cổ phần Công nghệ TISOHA đã giúp đỡ tận tình cho em trong
thời gian thực tập tại công ty. Đặc biệt là anh Đỗ Công Bá cùng các anh chị trong công ty đã giúp đỡ và
hướng dẫn trong quá trình làm việc để em có thể hồn thành nhiệm vụ được giao

Võ Hồng Đức Khoa