Tôi không có tài năng gì cả. Tôi chỉ đam mê hiểu biết
 Tìm Hiểu ReactJS Cho Người Mới Bắt Đầu

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


Ngày 1 Tháng 9 Năm 2021

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 Là Gì?

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.

React Javascript

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:

React Javascript Trend

Cài Đặt Nodejs Trên Máy Tính

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 

Check Nodejs Version

Cài Đặt Dự Án React App

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.

After Install React Javascript

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.

Viết Hello World Bằng Reactjs

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.

Delete in file app.js

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!

Add Code Hello World in app.js

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

Kết quả Hello World in app.js

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;

Sử Dụng Dynamic Value

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.

Thiết lập biến trong reactjs

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

Gọi giá trị vào component

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:

Set Attribute by dynamic value

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

Cách Tạo Component Trong ReactJS

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:

Tạo thư mục component

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:

Code in navbar js

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:

import in navbar js

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

Cách Thêm CSS Cho Component Trong React

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:

file index css

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 :

file index css

Để 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:

Kết quả thêm CSS cho component

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é!

Add style in JSX

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!

Result Add style in JSX

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ẻ!

Tìm Kiếm Bài Viết

Ads Digital Ocean

Nhận Ngay $100 sử dụng dịch vụ khi đăng ký tài khoản trên DigitalOcean.

Ads azdigi

Sử dụng dịch vụ hosting của Azdigi chỉ với 50.000 đồng.

Ads HostGator

Nhận Ngay Tên Miền Và Chứng Chỉ SSL Miễn Phí Khi Sử Dụng Hosting Của HostGator.

Ads Name Cheap

Đăng Ký Tên Miền Chỉ Với $0.99/năm cùng với Name Cheap.