fbpx

Tìm hiểu Component trong ReactJS

Trong ReactJS, mỗi đoạn code sẽ được phân chia thành những Component không lệ thuộc lẫn nhau và có thể tái sử dụng khi cần thiết. Vì vậy trong bài viết này chúng ta sẽ tìm hiểu cách viết và sử dụng Component như thế nào trong ReactJS.

Yêu cầu trong bài viết

Bài viết này được viết trên nền tảng JavaScript ES6 + Babel Compiler có sẵn trong create-react-app . Vì thế, các bạn hãy tập làm quen với các cú pháp mới và “lạ” trong bài viết này.

Cú pháp

Để khởi tạo Component chúng ta sẽ có nhiều cách như sau:
  • Dùng let, const trong JavaScript ES6 hoặc var ở các phiên bản JavaScript thấp hơn.
  • Dùng Function.
  • Dùng Class trong JavaScript ES6.

Ví dụ

import React, { Component } from 'react';

// Ví dụ 1
let Tab_let = () => {
  return (
    <div>Khởi tạo bằng let</div>
  );
};

// Ví dụ 2
const Tab_const = () => {
  return (
    <div>Khởi tạo bằng const</div>
  );
};

// Ví dụ 3 - const hoặc let đều được
const Tab_shorthand = () => (
  <div>Cách tắt khi dùng Arrow Function</div>
);

// Ví dụ 4
function Tab_function() {
  return (
    <div>Khởi tạo bằng Function</div>
  );
}

// Ví dụ 5
class Tab_class extends Component {
  render() {
    return (
      <div>Khởi tạo bằng Class</div>
    );
  }
}
Qua ví dụ trên thì khi dùng let hoặc const, chúng ta cần dùng Arrow Function hoặc Anonymous Function để gán vào cho biến hoặc hằng. Trong khi Function có cách dùng tương tự cách định nghĩa biến và hằng thì Class lại phải kế thừa từ Class Component trong ReactJS để có thể chạy được.
Ở ví dụ 3, các bạn nên lưu ý là cú pháp dùng 2 dấu (…)  này có ý nghĩa là vừa vừa return như ví dụ 2 và vừa tạo ra JSX ở bên trong nó. Chúng ta sẽ tìm hiểu sâu hơn về JSX ở những bài sau nên bài này các bạn “chịu khó” vẫn chưa hiểu nó nhé.
Tiếp tục sau khi khởi tạo, tên của biến, hằng, function và class sẽ trở thành 1 Component với HTML Tag là <tenBien /> . Nên nhớ là HTML Tag phải là thẻ tự đóng, còn khi nào thì nên dùng thẻ bao thì tôi sẽ nói rõ khi chúng ta tìm hiểu tới khái niệm về Props (Properties).

Cách sử dụng

Chúng ta chỉ đơn giản sử dụng tên thẻ như trước đó tôi đã đề cập vào bất kỳ vị trí nào nằm bên trong phạm vi sử dụng React. Chắc có lẽ sẽ có nhiều bạn đến khúc này sẽ bị lấn cấn đó là làm sao biết phạm vi của React là ở đâu? Và nó đã được khởi tạo như thế nào?
Quay lại bài viết trước, các bạn có nhớ rằng khi các bạn tạo dựng ReactJS bằng cách dùng create-react-app , chúng ta đã thấy qua file index.js  trong thư mục src  chứ. Vâng, chính là nó! Tôi sẽ giải thích cho các bạn qua cấu trúc file public/index.html  và src/index.js  bằng hình ảnh sau:
1.index-html-index-js-structure.png
Hình ảnh trên chứa các phương thức mặc định dùng để khởi động ReactJS cũng như trỏ tới <div id=”root”></div>  để nhận biết đâu là vùng hoạt động của ReactJS. Tiếp tục, chúng ta quay trở lại file App.js  và thêm những Component mà chúng ta đã viết ở trên vào:
2.add-to-app
Và kết quả nhận được:
result

Lời kết

Như vậy, chúng ta đã tạo ra những Component trong ReactJS bằng nhiều cú pháp khác nhau và kết hợp với cú pháp JSX để tạo ra React Element. Vậy JSX là gì? Component chỉ có vậy thôi sao? Hãy đón xem tiếp ở phần sau các bạn nhé.

Tìm hiểu ReactJS và hướng dẫn cài đặt

ReactJS là một thư viện JavaScript dùng trong việc xây dựng giao diện người dùng và được phát triển bởi đội ngũ Facebook. Tới nay, ReactJS đã thu hút hàng triệu lập trình viên trên thế giới. ReactJS thường được dùng bởi Frontend Developer trong thiết kế Web Application một cách nhanh chóng hơn. Vậy để tìm hiểu ReactJS, chúng ta phải tìm hiểu từ đâu? Và cần gì để chạy được ReactJS? Qua bài viết này, các bạn đọc giả sẽ hiểu được cách cài đặt và sử dụng ReactJS một cách đơn giản nhất.

Yêu cầu

  • Cài đặt NodeJS phiên bản mới >= 6 (LTS hoặc bản hiện tại – https://nodejs.org/en/download/)
  • Cài đặt Visual Studio Code/Sublime Text hoặc WebStorm (tùy chọn)

Cài đặt

Đầu tiên, các bạn phải chắc chắn rằng mình đã cài đặt đúng phiên bản NodeJS và có NPM bằng cách gõ vào cửa sổ Command Prompt/Windows Powershell hay Terminal trên Mac và Linux:
Như ở trên, các bạn cũng đã thấy phiên bản hiện tại của NodeJS là 8.6.0 và như thế là đã đạt tiêu chuẩn của ReactJS, còn NPM khi bạn cài các phiên bản 8.x trở lên thì NPM cũng đã ở phiên bản 5.x. Vì thế các bạn hãy kiểm tra kỹ, tránh tình trạng cài nhầm NPM phiên bản thấp hơn khi xài các thư viện khác khi thư viên đó đòi hỏi 1 phiên bản NodeJS hoặc NPM thấp hơn để có thể chạy ổn định.
Tiếp tục, chúng ta sẽ tiến hành cài đặt ReactJS thông qua Package đã được viết sẵn cho chúng ta bằng cách gõ vào lệnh npm install -g create-react-app  và nó sẽ cài đặt như hình bên dưới:
Sau khi cài đặt hoàn tất, các bạn có thể gõ tiếp lệnh theo cú pháp sau:
create-react-app thienanblog

Trong đó thienanblog  là tên Folder mà các bạn ấn định nên không cần phải làm theo bài viết. Tuy nhiên với những bạn không rành thì trước mắt cứ làm theo đi đã, để dễ dàng theo dõi bài viết hơn.

Quá trình cài đặt hoàn tất, các bạn cũng sẽ thấy ứng dụng trả về cho chúng ta cách thức để khởi chạy ReactJS như sau:
Tôi sẽ giải thích cho các bạn các cú pháp họ đã đính kèm cho chúng ta:
  • 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 bạn có thể xem chi tiết ở 1 bài viết khác trong Blog này).
  • 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 (Không khuyến khích các bạn không rành). Nên nhớ, một khi đã chạy mà quên backup thì “toi” luôn nhé.

Như vậy ở bên trên các bạn cũng đã tìm hiểu qua 1 số lệnh cơ bản của ReactJS rồi, giờ thì chạy thôi nào:

cd thienanblog
npm start

 

Một cửa sổ sẽ hiện lên và các bạn thấy ReactJS đã chạy rồi đấy:

 

 

Xong như vậy là chúng ta đã hoàn tất cách cài đặt ReactJS. Chuyển sang tinh chỉnh một số File nào. Bạn hãy vào trong thư mục src  và tìm file App.js  như hình:

 

 

Sau đó tinh chỉnh lại như sau và save lại:

 

/// ...
class App extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Chào mừng tới React tại Thienanblog</h1>
        </header>
        <p className="App-intro">
          <ThienanBlog />
        </p>
      </div>
    );
  }
}
/// ...

Lập tức màn hình Browser sẽ tự động Reload lại mà không cần bạn phải F5. Đó chính là do NodeJS vẫn đang chạy, nên vì thế nó sẽ nhận biết được khi nào các bạn thay đổi nội dung trong file.

Viết Component đơn giản

Tiếp tục, chúng ta sẽ viết ngay 1 Component đơn giản nhất trong ReactJS bằng cách gõ vào đoạn Code sau:

function ThienanBlog() {
  return (
    <div>Thienanblog xin chào các bạn độc giả</div>
  );
}

Đoạn code trên chắc chắn sẽ có rất nhiều bạn thấy dòng code “quái lạ”… làm thế nào mà có HTML gì đó ở trong đây vậy? Đó chính là JSX đấy các bạn ạ và nó là gì thì từ từ rồi chúng ta sẽ biết, đừng vội nản các bạn nhé. Và nội dung file App.js  sẽ như sau:

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
function ThienanBlog() {
  return (
    <div>Thienanblog xin chào các bạn độc giả</div>
  );
}
class App extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Chào mừng tới React tại Thienanblog</h1>
        </header>
        <p className="App-intro">
          <ThienanBlog />
        </p>
      </div>
    );
  }
}
export default App;

 

Sau đó, các bạn save lại và xem lại kết quả của chúng ta:

 

Lời kết

Như vậy, chúng ta đã tìm hiểu ReactJS và cách cài đặt như thế nào, cũng như đã tự viết ra 1 Component đầu tiên cho mình. Hãy theo từng bước và thử lại nhiều lần ở các vấn đề mà bạn khó hiểu, vì sắp tới chúng ta còn phải tìm hiểu tiếp về Component và JSX các bạn nhé.