Techmaster Việt Nam - Học là có việc

Dự án ứng dụng chat realtime chắc chắn là không đơn giản, vậy nên chúng ta hãy bắt đầu từng bước nhỏ trước nhé. Trong bài này Dũng sẽ cùng các bạn đi khởi tạo dự án cho phần ReactJS trước nhé.

Khởi tạo cấu trúc thư mục

Dự án của chúng ta có tên là freechat, vậy nên bạn hãy tạo một thư mục cha có tên là freechat, lưu ý rằng các thư mục của bạn không nên đặt tên có ký tự UTF hoặc có khoảng trắng ví dụ:

/Users/Thư Mục Cha/freechat: Không hợp lệ
/Users/Thu Muc Cha/freechat: Không hợp lệ.
/Users/thumuccha/freechat: Hợp lệ.
/Users/thu-Muc-cha/freechat: Hợp lệ.
Trong thư mục freechat chúng ta hãy tạo một thư mục con có tên reactjs. Như vậy chúng ta đã có cấu trúc thư mục như sau:

freechat
    reactjs

Khởi tạo dự án reactjs

Sau khi đã có cấu trúc thư mục, chúng ta sẽ khởi tạo dự án reactjs

Cấu hình dự án

Đầu tiên chúng ta sẽ tạo ra tập tin freechat/reactjs/package.json có nội dung như sau:

{
  "name": "freechat-web-client",
  "version": "0.1.1",
  "private": true,
  "dependencies": {
    "ezyfox-es6-client": "^1.2.1",
    "mvc-es6": "^1.1.1",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "reactstrap": "^9.2.2"
  },
  "scripts": {
    "start": "react-scripts --openssl-legacy-provider start",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject",
    "build": "react-scripts build && BUILDVERSION=$(date +%Y-%m-%d)-$(date +%T) && sed -i -- 's/%BUILDVERSION%/'$BUILDVERSION'/g' build/index.html && echo Build Version = $BUILDVERSION"
  },
  "devDependencies": {
    "react-scripts": "^5.0.1",
    "sass": "^1.77.6"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

Dự án của chúng ta sẽ sử dụng:

React phiên bản 18.3.1.
ezyfox-es6-client: Thư viện socket client để kết nối đến ezyfox-server.
mvc-es6: Một thư viện nhỏ hỗ trợ chúng ta lập trình hướng sự kiện.
Bây giờ bạn hãy mở terminal hoặc cmd tại thư mục reactjs và gõ yarn để tải các thư viện cần thiết.

Khởi tạo mã nguồn đầu tiên

Tiếp theo bạn hãy tạo ra thư mục reactjs/public và bổ sung các tập tin sau:

Tập tin index.html với nội dung:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="theme-color" content="#000000">
    <meta build-version="%BUILDVERSION%"/>
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
    <title>Freechat</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
  </head>
  <body>
    <noscript>
      You need to enable JavaScript to run this app.
    </noscript>
    <div id="root"></div>
  </body>
</html>

Ở đây chúng ta đã bao gồm sẵn font-awesome phiên bản 6.5.2, sau này trong các mã nguồn của reactjs chúng ta sẽ có thể được dùng các icon của font-awesome.
2. Tập tin favicon.ico bạn có thể tự tạo cho mình hoặc có thể tải xuống từ đây: https://youngmonkeys.org/images/favicon.ico
Bây giờ bạn có thể tạo thư mục reactjs/src với hai tập tin như sau:

App.js với mã nguồn:

import React, { Component } from "react";

class App extends Component {
  constructor() {
    super(...arguments);
  }

  render() {
    return (
        <React.Fragment>
        </React.Fragment>
    );
  }
}
export default App;

Đây sẽ là lớp đại diện cho ứng dụng freechat của chúng ta, sau này chúng ta sẽ khởi tạo các thành phần con cho nó.
2. inde.js với mã nguồn:

import React from 'react';
import App from './App';
import { createRoot } from 'react-dom/client';

const root = createRoot(document.getElementById('root'));

root.render(
    <React.StrictMode>
      <App />
    </React.StrictMode>,
  )

Mã nguồn cũng không có gì đặc biệt khi gọi hàm render vào thẻ

trong tập tin index.html và trong tương lai chúng ta cũng sẽ ít động chạm đến tập tin này.
Sau khi đã khởi tạo các tập tin, cấu trúc thư mục của dự án freechat/reactjs sẽ như sau:

Khởi chạy chương trình

Sau khi đã xong các bước cấu hình, khởi tạo mã nguồn đầu tiên, chúng ta có thể khởi chạy dự án reactjs thông qua câu lệnh: yarn start. Kết quả chúng ta nhận được sẽ là một trang web trắng ở địa chỉ http://localhost:3000/login

Tổng kết

Vậy là chúng ta đã cùng nhau khởi tạo thành công dự án freechat/reactjs, trong bài tiếp theo chúng ta sẽ cùng nhau khởi tạo trang login.

Cám ơn bạn đã quan tâm đến bài viết này. Để nhận được thêm các kiến thức bổ ích bạn có thể:

Đọc các bài viết của TechMaster trên facebook: https://www.facebook.com/techmastervn
Xem các video của TechMaster qua Youtube: https://www.youtube.com/@TechMasterVietnam nếu bạn thấy video/bài viết hay bạn có thể theo dõi kênh của TechMaster để nhận được thông báo về các video mới nhất nhé.
Chat với techmaster qua Discord: https://discord.gg/yQjRTFXb7a

Xây dựng ứng dụng chat realtime - Bài 02: Khởi tạo dự án ReactJS