ReactJS - P1. Giới thiệu về ReactJS

REACTJS

Lời mở đầu xin chào tất cả anh em trong nghề hay ngoài nghề, những anh em đã biết về ReactJS cho đến những anh em chưa biết nó là cái gì. Mình là Hải hiện tại đang làm dev tại Scuti Co.,Ltd. Sau 2 tháng tìm hiểu về ReactJS thì với số kiến thức ít ỏi mình chia sẻ sau đây hy vọng có thể giúp đỡ anh em được phần nào.

OK LET’S START 😎😎😎

I. REACT JS LÀ GÌ?

1. Lịch sử ra đời?

Chắc hẳn mọi người đang đọc bài blog này đều có sử dụng Facebook, cá nhân mình cũng vậy, đánh giá của bản thân khi sử dụng thì mình thấy Facebook nhanh, tính UX cao, vân vân và mây mây...Tuy nhiên chắc hẳn các bạn cũng từng đặt câu hỏi: Các Dev ở Facebook đã dùng công nghệ gì để xây dựng UI cho đứa con của họ? Câu trả lời chính là React. Trước thời điểm năm 2013 việc xây dựng UI cho Facebook hoàn toàn dựa trên framework AngularJS của Google, tuy nhiên sau thời điểm năm 2013 khi lượng người dùng trở nên quá lớn và dữ liệu Facebook lưu trữ ngày càng nhiều, kéo theo đó việc xử lý dữ liệu ở ngoài UI trở nên quá khó khăn vì AngularJS chậm và khá nặng nề. Facebook không thể tìm kiếm được 1 framework nào khác đủ khả năng thay thế cho AngularJS, vậy nên các lập trình viên của Facebook đã tự tạo ra 1 công nghệ mới với tên gọi React và nó bao gồm 2 phần: ReactJS (dùng cho web app) và React Native (dùng cho mobile app). Đến năm 2015 thì Facebook quyết định open source mã nguồn của React cho cộng đồng và đến nay cộng đồng dev trên toàn thế giới đã góp 1 phần công sức không nhỏ giúp cho React ngày 1 hoàn thiện hơn.

Ở bài viết này mình sẽ nói về ReactJS trước, phần React Native mình sẽ có 1 bài blog sau.

2. ReactJS là gì?

ReactJS là 1 library javascript (hiện tại nó chưa đủ khả năng để trở thành 1 framework nhưng mình nghĩ ngày đó không còn xa), ReactJS sử dụng để xây dựng UI cho web theo đúng xu hướng Single Page Applications. Ok đến đây chắc các bạn cũng thắc mắc là có rất nhiều framework hỗ trợ cho việc này, tuy nhiên ở các framework khác ví dụ như AngularJS thì cho phép người dùng nhúng code javascript vào code html còn ReactJS thì hoàn toàn ngược lại, nó cho phép bạn nhúng code html vào code javascript nhờ vào JSX. Thực sự là chỉ riêng điều này cũng không khiến ReactJS trở nên vượt trội hơn hẳn các framework khác mà điều đặc biệt ở ReactJS theo cá nhân mình đánh giá thì là những thứ sau đây:

2.1. Virtual DOM (DOM ảo)

Chắc các bạn không còn xa lạ gì với khái niệm DOM (Document Object Model) nhắc lại kiến thức 1 chút thì về cơ bản khi chúng ta open source code của 1 trang web lên cái chúng ta thấy là text, tuy nhiên đối với browser thì sẽ thấy trang web theo kiểu kiến trúc DOM tree. Các bạn có thể xem ảnh sau:

Như các bạn thấy thì node parent đầu tiên sẽ là thẻ document, tiếp là thẻ html, rồi đến các node child head và body trong đó lại có nhiều node child khác, vậy khi các bạn có 1 sự kiện yêu cầu tác động đến một thành phần trong trang web, thì bạn phải tác động vào node document, tức là trang web của bạn sẽ chạy lại từ đầu để hiển thị dữ liệu của phần bạn yêu cầu thay đổi, mặc dù các thành phần khác không có thay đổi gì, điều này dẫn đến việc nếu trang web của bạn ‘phình to’ ra sẽ khiến hiệu năng của web giảm đi rất nhiều, việc web chạy chậm là dễ hiểu. Vậy ReactJS đã xử lý bài toán này như thế nào? Các bạn có thể xem ảnh ở dưới:

ReactJS sẽ sử dụng một DOM ảo và nó là một Object Javascript chứa đầy đủ thông tin của trang web giống như DOM thật, khi các bạn có sự tác động đến 1 thành phần của trang web thì ReactJS sẽ so sánh DOM ảo với DOM thật để biết được node nào sẽ thay đổi và tạo ra 1 ‘bản vá’ nhằm thay đổi dữ liệu ở node đó trên DOM thật. Nói đến đây các bạn đã hiểu, với ReactJS khi có sự thay đổi ở 1 thành phần, thì trang web sẽ không load lại từ đầu mà chỉ thay đổi ở thành phần mà bạn yêu cầu, dẫn đến trang web của chúng ta sẽ hoạt động nhanh hơn và phía server cũng đỡ mất công phải query lại các dữ liệu của những thành phần khác.

2.2 Component based

ReactJS được xây dựng xung quanh 1 khái niệm là component, vậy component là gì?

Bạn hãy tưởng tượng, 1 giao diện web bán hàng bạn đang xây dựng sẽ do nhiều thành phần tạo nên:

- Phần menu loại sản phẩm

- Phần menu sản phẩm

- Phần thông tin liên hệ

- Phần tìm kiếm

….

Những thành phần đó trong ReactJS được gọi chung là các component, nó cũng giống như các file template html vậy, chỉ khác biệt ở chỗ các component là file chứa các mã JSX dùng để cấu thành nên giao diện cho trang web của bạn. Việc chia nhỏ giao diện web của bạn ra thành từng component sẽ giúp bạn dễ dàng quản lý dữ liệu cho trang web của bạn và tái sử dụng lại các component. Mình sẽ lấy ví dụ về việc xây dựng các component và sử dụng như thế nào?

Trong ảnh mình đã xây dựng 1 component đơn giản là App.js và như các bạn thấy thì ở trong file App.js mình có khai báo 1 class với tên gọi App và render ra 2 thẻ <h1>. Khi các bạn tiến hành khởi chạy app thì trên trình duyệt sẽ hiển thị như sau:

2.3 JSX

JSX là viết tắt của Javascript XML, bạn có thể hiểu đơn giản nó là 1 dạng ngôn ngữ cho phép viết các mã html trong javascript. Việc sử dụng JSX khi xây dựng app với ReactJS có bắt buộc không, thì mình có thể trả lời là không, các bạn hoàn toàn có thể viết mã javascript như bình thường, tuy nhiên mình khuyên các bạn nên dùng JSX vì sao?

1. Cách viết của JSX khá giống với cách viết mã HTML (ở đây mình không nói đến giống tuyệt đối nhé), việc khai báo các attributes cũng rất đơn giản, khiến chúng ta khi nhìn vào có thể dễ dàng hiểu được đoạn mã JSX thể hiện cho cái gì

2. Bản chất của JSX vẫn là javascript vậy nên nó không thay đổi ý nghĩa của 1 mã javascript, nghe hơi khó hiểu nhưng cái cách mà browser hiển thị một đoạn mã JSX cũng tương tự như cách bạn xây dựng đoạn mã đó với javascript

3. Vì cách viết JSX khá giống với cách viết mã HTML nên với các developer chân ướt chân ráo như mình hoàn toàn có thể sử dụng nó một cách nhanh chóng. Tin mình đi JSX thật sự rất tuyệt 😏

2.4 One way data binding (luồng dữ liệu 1 chiều)

Tiêu đề đã nói lên tất cả nội dung, dữ liệu trong ReactJS hoàn toàn đi theo 1 chiều và được truyền từ components cha xuống components con thông qua props (về khái niệm props thì mình sẽ giải thích sau).

Điều này dẫn tới việc sau này trang web của các bạn sẽ hoạt động 1 cách khoa học và dễ dàng maintain hay update tính năng. Với đặc điểm này thì ReactJS dễ dàng cho việc xây dựng các trang web với lượng người dùng cũng như dữ liệu lớn, tuy nhiên với những trang web nhỏ thì theo cá nhân của mình các bạn sử dụng ReactJS hay không, không quan trọng.

2.5. Nested view

1 điều mà cá nhân mình khá là thích ở trong ReactJS là việc chúng ta có thể khai báo các function return ra các component sau đó sử dụng lại các function đó trong hàm render, điều này có ý nghĩa như thế nào?

Như đề cập ở trên component là các thành phần làm nên trang web, và chúng ta có 1 component cha để quản lý dữ liệu của các component con, thì với việc khai báo các function như vậy, chúng ta có thể dễ dàng quyết định component nào sẽ được render để hiển thị ra UI

Mình tạo 1 component Infor để lưu trữ thông tin cá nhân

Ở component App mình đã import component Infor và sử dụng function showInformation để return ra component Infor, đồng thời ở hàm render mình đã gọi đến function đó.

Và đây là kết quả

3. Input/Output khi sử dụng ReactJS

Có lẽ đọc các phần trên các bạn cũng có thể dễ dàng nhận ra Input và Output của ReactJS là gì rồi phải không, việc sinh ra với mục đích xây dựng UI cho ứng dụng thế nên thứ mà ReactJS mạnh nhất chính là việc quản lý các dữ liệu hiển thị ra view. Vậy thực chất Input và Output khi sử dụng ReactJS là gì?

- Input: chính vì bản chất của ReactJS là component base, nên chắc chắn input của nó sẽ là các component được khai báo trong các file jsx và các file js chứa các đoạn mã javascript để xử lý các sự kiện trên UI hoặc logic để hiển thị ra các thành phần trên UI.

- Output: nhắc lại một chút về cách hoạt động của browser (chrome, firefox,.. mà các bạn vẫn dùng hàng ngày), khi các bạn nhập vào thanh địa chỉ trên browser một địa chỉ của một trang web nào đó, browser sẽ thực hiện một loạt các bước xử lý, kết nối với trang web đó và cuối cùng là nhận được một trang html + css + js. Sau đó browser của các bạn sẽ hiển thị lên nội dung như các bạn thấy. Vậy thôi, ReactJS là một thư viện xây dựng UI nên output của nó cũng chính là html + css + js những thứ duy nhất để browser hiểu được và hiển thị thành một trang web sinh động.

4. Cài đặt và sử dụng ReactJS

Để bắt đầu xây dựng một ứng dụng với ReactJS trước tiên bạn cần cài đặt cho mình NodeJS để có thể sử dụng npm, mọi người có vẻ thấy không liên quan lắm vì tại sao lại cần sử dụng npm để làm gì, vì chúng ta hoàn toàn có thể cài đặt ReactJS mà không cần sử dụng npm

NPM là viết tắt của Node Package Manager (công cụ giúp cài đặt và quản lý các thư viện javascript).

Khi chúng ta xây dựng ứng dụng với ReactJS thì cần phải qua 1 bước là build các file jsx ra các file html, css để trình duyệt có thể hiểu được.

Ngoài ra chúng ta còn cần sử dụng thêm các thư viện khác, vì để xây dựng hoàn thiện 1 ứng dụng thì chúng ta không chỉ sử dụng mỗi ReactJS. Vì vậy nếu sử dụng NPM sẽ rất tiện lợi cho các bạn trong quá trình làm việc.

Nào bây giờ thì hãy bắt đầu cài đặt 1 ứng dụng đầu tiên với ReactJS, các bạn làm từng bước sau nhé:

Step 1: Cài đặt NodeJS

Các bạn truy cập vào địa chỉ https://nodejs.org/en/download/ và tùy vào hệ điều hành bạn đang sử dụng hãy tải bản cài đặt tương ứng, đến thời điểm mình đang ‘tập gõ’ đây thì phiên bản mới nhất của NodeJS là 8.11.1 😋.

Step 2: Tiếp theo chúng ta hãy cài đặt ReactJS theo package mà npm đã hỗ trợ, các bạn mở command gõ dòng lệnh npm install -g create-react-app, ấn enter và nhâm nhi tách cà phê trong khi chờ đợi npm cài đặt nhé 😎.

Step 3: Đã cài đặt thành công, bây giờ chúng ta hãy tạo 1 thư mục cho ứng dụng đầu tiên nào, tiếp tục gõ dòng lệnh create-react-app ‘tên thư mục’. Các bạn lưu ý là tên thư mục chữ cái đầu phải viết thường và không có dấu. Ở đây mình sẽ tạo thư mục đầu tiên với tên gọi testapp.

Sau khi đã cài đặt thành công thì trên màn hình command sẽ hiển thị lên hướng dẫn để tiến hành chạy 1 ứng dụng ReactJS, mình sẽ giải thích từng câu lệnh có tác dụng gì

- npm start: Tiến hành khởi tạo server phát triển để chạy ReactJS trên môi trường web của NodeJS.

- npm run build: Tiến hành xây dựng sản phẩm sau khi hoàn tất giai đoạn phát triển, bao gồm sẽ copy các file tĩnh đi kèm khi các bạn bỏ vào đúng thư mục chỉ định (các file này có thể là các file css chẳng hạn)

- npm test: Tiến hành kiểm thử ứng dụng (Dành cho các bạn biết qua về thư viện Tester).

- npm run eject: Khi các bạn chạy lệnh này, tool này sẽ không còn tự động hóa mọi vấn đề khi phát triển nữa mà nó sẽ bung ra toàn bộ các config để những bạn nào am hiểu về Webpack hay Babel... có thể config lại theo ý đồ của mình (theo nhà sản xuất thì tránh xa tầm với của các thanh niên tò mò, các ‘chế’ mới học hoặc các bạn trẻ mới ‘nhú’ về ReactJS 😤). Tốt nhất là đang học thì khuyên không nên động vào mà hãy hỏi những người có kinh nghiệm nếu bạn muốn config lại ReactJS.

Step 4: Vậy là đã tạo thành công thư mục cho ứng dụng đầu tiên rồi, bây giờ các bạn cd vào thư mục

Sau đó, chạy câu lệnh sau npm start và chờ 1 chút để hệ thống tiến hành khởi tạo server, kết quả cuối cùng đây nè 😁.

À, một chút tí quên, mặc định thì NodeJS sẽ khởi tạo server trên cổng port là 3000 nha, thế nên bạn nào đang chạy cái gì đó trên port này thì có thể config lại bằng cách sau:

- Mở file package.json lên sau đó thay đổi lại cổng port như ảnh bên dưới là được nha 😀

- Bây giờ thì chạy lại câu lệnh npm start đi là được rồi đó 😍

II. Kết thúc

Vậy là phần đầu tiên trong blog giới thiệu về ReactJS của mình đã hoàn thành, hy vọng qua bài viết này các bạn có thể nắm được 1 chút về lịch sử ra đời cũng như các đặc điểm của ReactJS và cách để cài đặt 1 ứng dụng đầu tiên. Nếu các bạn thấy bài viết này hay hãy like + share và follow facebook của mình. Vì sớm thôi mình sẽ tiếp tục viết phần 2 để đề cập đến Props, State và Life Cycle trong ReactJS 😉😉😉

If you liked this article

Let's subscribe the updates of Scuti!

Share on Google Plus

About Unknown

This is a short description in the author block about the author. You edit it by entering text in the "Biographical Info" field in the user admin panel.