Tìm Hiểu ReactJS Cho Người Mới Bắt Đầu

Ngày hôm nay chúng ta sẽ đi vào tìm hiểu Reactjs, cách tạo một dự án react app, cách truyền dữ liệu, component là gì và cách tạo component trong react, thiết lập CSS vào componet... Nào bây giờ hãy cùng mình đi vào bài viết nhé.

Reactjs được phát triển bởi Facebook vào năm 2011 là một thư viện giúp tạo giao diện người dùng cho trang web. Nó cho phép bạn dễ dàng thiết lập Single Page Applications một cách nhanh chóng.

Single Page Application là ứng dụng web chỉ yêu cầu server gửi một trang HTML đến trình duyệt lần đầu và sau đó Reactjs sẽ giúp bạn quản lý dữ liệu(data), các tác vụ của người dụng trên trang web như click event... hay chuyển đến các trang khác trong website mà không cần phải gửi dữ liệu lại cho server.

Nó cho phép bạn có thể tạo các UI phức tạp từ các đoạn mã nhỏ, độc lập (component) và tái sử dụng. Ngoài ra nó được Facebook duy trì, phát triển nên bạn hoàn toàn yên tâm về việc sử dụng thư viện này cho dự án của mình nhé. Hiện nay có rất nhiều công ty lớn đang sử dụng nó cho website của mình như là Facebook, Twitter, Netflix, WhatsApp... Và dưới đây là hình ảnh reactjs được cài đặt trong 5 năm trên npm:

Trước khi đi vào cài reactjs thì bạn phải cài Nodejs trên máy tính đã nha. Nếu bạn chưa cài Nodejs thì có thể truy cập đường dẫn bên dưới để tải về nha.

Nodejs Download

Nếu bạn chưa biết mình đã cài đặt hay chưa thì có thể kiểm tra thông qua terminal của máy tính bằng đoạn code sau:

node -v 

Trong phần này chúng ta sẽ đi vào tìm hiểu cách tạo dự án react app trên visual studio code nha. Đầu tiên bạn mở terminal trong vscode và chạy đoạn mã sau nha:

npx create-react-app learn-reactjs

Với learn-reactjs là tên dự án (bạn có thể đặt bất kỳ tên nào cũng được nha).

Và đây là kết quả khi chúng ta cài đặt xong nha.

Phần tiếp theo chúng ta sẽ truy cập thư mục learn-reactjs và chạy chương trình react thông qua đoạn mã sau đây nha:

cd learn-reactjs 
npm start

Và kết quả bạn xem video bên dưới nha.

Bây giờ chúng ta sẽ đi vào bước đầu tiên trong là viết nội dung hello world bằng react nhé. Đầu tiên mình sẽ đi file vào App.js ở trong thư mục src và xoá các phần tử không cần thiết.

Tiếp theo chúng ta sẽ viết hello World bằng đoạn code sau nha:

function App(){
   return (
     <div className="content">
       <h1>Hello World</h1>
     </div>
   )
 }
export default App

Và dưới đây là hình ảnh chèn code vào app.js nha!

Và duới đây là kết quả khi chúng ta viết Hello World bằng reactjs nha.

Một điểm mình cần lưu ý là chúng ta có thể dùng bao nhiêu component trong reactjs cũng được nhé và khi sử dụng component thì đều phải cần có dòng này để có thể sử dụng trên các file khác trọng dự án nha.

export default Tên Component;

Trong phần này mình sẽ đi vào áp dụng dynamic value (truyền dữ liệu vào component) trong dự án nha. Đầu tiên bạn sẽ truy cập App.js file và đặt một biến title để lưu trữ giá trị nha.

Sau đó chúng ta sẽ hiển thị giá trị biến vào trong component ở hình ảnh sau nha:

Như bạn thấy để gọi giá trị biến trong component thì chúng ta sẽ sử dụng cú pháp như sau:

{ tên biến } => { title}

Bây giờ chúng ta sẽ cùng nhau xem kết quả nhé!

Ngoài việc có thể áp dụng cho nội dung của các thẻ thì dynamic value còn được sử dụng cho các thuộc tính(attribue). Để giúp bạn hiểu rõ hơn thì chúng ta sẽ đi vào render giá trị của thuộc tính href trong thẻ a nha:

Và kết quả bạn xem video sau nha:

Bây giờ chúng ta sẽ đi vào tìm hiểu cách để tạo một component và import nó vào trong dự án nha.

Bước đầu tiên chúng ta sẽ tạo một file chứa component Navbar với tên là navbar.js ở thư mục component trong folder src như hình bên dưới:

Bước tiếp theo chúng ta sẽ đi vào thêm các thành phần cần thiết cho component Navbar bằng đoạn mã sau:

Sau khi bạn đã tạo xong component thì điều tiếp theo chúng ta cần làm là thêm nó vào trong dự án bằng cách import trong file App.js đoạn mã sau:

Và kết quả bạn xem video bên dưới nha.

Bạn có thể tự tạo một file CSS cho component hoặc sử dụng file index.css để thiết lập thuộc tính CSS. Khi chúng ta tạo dự án thì file index.css đã được import vào trong React app thông qua index.js như hình bên dưới:

Do giúp bạn dễ dàng theo dõi thì mình sẽ sử dụng index.css để thêm các thuộc tính CSS cần thiết cho component navbar :

Để giảm thời gian viết code CSS thì mình sẽ để đoạn mã bên dưới. Bạn chỉ cần sao chép và dán vào dự án là xong nhé!

@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
   * {
  margin: 0;
  font-family: "Roboto";
  color: #333;
 }
 .navbar {
  padding: 20px;
  display: flex;
  align-items: center;
  max-width: 600px;
  margin: 0 auto;
  border-bottom: 1px solid #f2f2f2;
 }
 .navbar h2 {
  color: lightseagreen;
 }
 .navbar .links {
  margin-left: auto;
 }
 .navbar a {
  margin-left: 16px;
  text-decoration: none;
  padding: 6px;
 }
 .navbar a:hover {
  color: lightseagreen;
 }
 .content {
  max-width: 600px;
  margin: 40px auto;
  padding: 20px;
 }

Và dưới đây là hình ảnh kết quả nha:

Ngoài ra chúng ta còn một cách khác để thêm CSS vào cho component là add trực tiếp các thuộc tính CSS vào JSX. Để hiểu rõ hơn bạn xem đoạn mã sau nhé!

Như bạn thấy thì khi thêm CSS thông qua thuộc tính style trong JSX thì chúng ta cần phải lưu ý một số điểm sau:

• Thông thường chúng ta sẽ ghi là background-color:red; thì ở trong JSX bạn sẽ xoá dấu - và thay chữ đầu tiên sau dấu gạch ngang thành in hoa là backgroundColor.
• Các giá trị thuộc tính CSS phải đươc để trong dấu { }. Như đoạn mã trên bạn sẽ thấy tại sao có hai dấu {}?
  Thì thực ra dấu thứ nhất là dùng để truyền dữ liệu vào component mà mình đã học ở phần dynamic value ở trên. Còn dấu thứ hai là biểu thị cho Object trong Javascript.

Và kết quả chúng ta sẽ xem hình ảnh ở bên dưới nha!

Tổng kết:

Qua đây mình mong bài viết sẽ cung cấp thêm cho bạn những kiến thức hữu ích về React để phát triển, thiết kế web và nếu có thắc mắc gì cứ gửi email mình sẽ phản hồi sớm nhất có thể. Rất mong bạn tiếp tục ủng hộ trang web để mình có thể viết nhiều bài hay hơn nữa nhé. Chúc bạn có một ngày vui vẻ!