Hướng dẫn ReactJS buổi 1

ReactJS là một thư viện JavaScript được sử dụng để xây dựng giao diện người dùng (UI) cho các ứng dụng web và di động. Nó được phát triển bởi Facebook và hiện đang được sử dụng rộng rãi trong nhiều dự án lớn.

Trong buổi này, chúng ta sẽ tìm hiểu về các khái niệm cơ bản của ReactJS và làm quen với cách sử dụng nó để tạo các thành phần giao diện đơn giản.

Cài đặt ReactJS

Để bắt đầu sử dụng ReactJS, trước tiên chúng ta cần cài đặt Node.js và npm (Node Package Manager) trên máy tính của mình. Tiếp theo, chúng ta có thể cài đặt ReactJS thông qua npm bằng cách chạy câu lệnh sau trong dòng lệnh:

npm install react

Sau khi cài đặt hoàn tất, chúng ta có thể tạo một thư mục mới và bắt đầu làm việc với ReactJS.

Tạo một ứng dụng React đơn giản

Để tạo một ứng dụng React đơn giản, chúng ta có thể sử dụng create-react-app, một công cụ được cung cấp bởi Facebook để tạo các ứng dụng React một cách nhanh chóng.

Đầu tiên, chúng ta cần cài đặt create-react-app bằng cách chạy câu lệnh sau trong dòng lệnh:

npm install -g create-react-app

Sau khi cài đặt hoàn tất, chúng ta có thể tạo một ứng dụng React mới bằng cách chạy câu lệnh sau trong dòng lệnh:

create-react-app my-app

Trong đó, my-app là tên của ứng dụng chúng ta muốn tạo.

Cấu trúc của một ứng dụng React

Một ứng dụng React bao gồm các thành phần chính như sau:

• index.html: Đây là trang HTML chính của ứng dụng. Chúng ta sẽ không cần chỉnh sửa nội dung của trang này.
• index.js: Đây là tập tin JavaScript đầu tiên được thực thi khi ứng dụng được chạy. Nó thực hiện nhiệm vụ gọi hàm ReactDOM.render() để hiển thị giao diện của ứng dụng lên trang HTML.
• App.js: Đây là tập tin JavaScript chứa mã lệnh để tạo giao diện của ứng dụng. Chúng ta có thể sử dụng HTML và JavaScript trong tập tin này để tạo các thành phần giao diện.
• App.css: Đây là tập tin CSS để tùy chỉnh giao diện của ứng dụng.
• package.json: Đây là tập tin chứa thông tin về ứng dụng và các thư viện cần thiết để chạy nó.

Tạo các thành phần giao diện với React

Một cách đơn giản để tạo giao diện trong React là tạo các thành phần giao diện (components). Để tạo một thành phần giao diện mới, chúng ta có thể thực hiện các bước sau:

1. Tạo một class bằng cách sử dụng từ khóa class trong JavaScript. Thành phần giao diện sẽ là một lớp con của lớp Component được cung cấp sẵn bởi React.
2. Trong phương thức render() của lớp, chúng ta có thể trả về các thành phần HTML để tạo giao diện cho thành phần của chúng ta.
3. Gọi thành phần giao diện trong index.js bằng cách sử dụng thẻ <tên_thành_phần_giao_diện /> trong hàm ReactDOM.render().

Ví dụ, chúng ta có thể tạo một thành phần giao diện đơn giản hiển thị một đoạn văn bản bằng cách thực hiện các bước sau:

1. Tạo một tập tin mới có tên là MyComponent.js và đưa nội dung sau vào bên trong:

import React, { Component } from 'react';

class MyComponent extends Component {
  render() {
    return (
      <p>This is my component!</p>
    );
  }
}

export default MyComponent;
<div class="copied" data-code="import React, { Component } from 'react';

class MyComponent extends Component {
  render() {
    return (
      
This is my component!
    );
  }
}

export default MyComponent;
">