XÂY DỰNG WEB APP VỚI REACTJS

  -  

Xây dựng web app với reactjs là một trong những keyword được tìm kiếm nhiều nhất trên Google về chủ đề xây dựng web ứng dụng với reactjs. Trong nội dung bài viết này, hostingvietnam.vn vẫn viết bài viết Hướng dẫn tạo ra web app với reactjs tiên tiến nhất 2020.

*
Sau lúc chạy xong, bạn đang có ứng dụng chat-client, cấu trúc thư mục của ứng dụng giống như sau:

├── README.md├── node_modules├── package.json├── .gitignore├── public│ └── favicon.ico│ └── index.html│ └── manifest.json└── src └── App.css └── App.js └── App.test.js └── index.css └── index.js └── logo.svg └── registerServiceWorker.jscuối thuộc bạn mở file package.json lên và thay đổi nội dung thành như này

"name": "client","version": "0.1.0","private": true,"homepage": "https://ththth0303.github.io/chat-client","author": "Thang","dependencies": "gh-pages": "^1.0.0", "jquery": "^3.2.1", "lodash": "^4.17.4", "react": "^16.0.0", "react-dom": "^16.0.0", "react-scripts": "1.0.14", "socket.io-client": "^2.0.4","scripts": "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts tra cứu giúp --env=jsdom", "eject": "react-scripts eject", "deploy": "react-scripts build && gh-pages -d build"để ý trường homepage bạn cần thay đổi chat-client bằng tên reopsitory github của bạn để giúp sức cho việc deploy sau này. tiếp theo, setup các gói quan trọng, chạy

npm install

Chia components

Đây là bối cảnh chat nhưng mình giới thệu với những bạn, phần đa khung màu khác nhau là những components nhưng mà mình chia, bài toán chia components này không phải là tăng cao vì nó vẫn đủ nội lực chia nhỏ thêm nữa để easy cai quản, nhưng đối với người bắt đầu chưa quen với việc làm việc với các components thì sẽ tương đối là mớ bòng bong, nên tôi chỉ chia đơn giản vậy thôi 
*
 Ngoài thuộc là component App, chúng ta vào trong thư mục src, đấy là thư mục làm việc chính chứa sourec code của những bạn, mở file App.js ra, xóa loại code cũ đi và copy đè đoạn code này lên, các bạn đọc comment bên vào code để hiểu hơn nhé

import React from "react";import $ from "jquery";import Messages from "./message-list";import đầu vào from "./input";import _map from "lodash/map";import io from "socket.io-client";import "./App.css";export default class ứng dụng extends React.Component constructor(props) super(props); //Khởi tạo thành state, this.state = messages: < id: 1, userId: 0, message: "Hello" >, user: null, this.socket = null; //Connetct với hệ thống nodejs, thông qua socket.io componentWillMount() this.socket = io("localhost:6969"); this.socket.on("id", res => this.setState(user: res)) // lắng tai event mang tên "id" this.socket.on("newMessage", (response) => this.newMessage(response)); //lắng nghe sự khiếu nại "newMessage" và hotline hàm newMessage khi có event //Khi có inbox mới, đã push tin nhắn vào state mesgages, và nó sẽ được render ra màn hình hiển thị newMessage(m) const messages = this.state.messages; let ids = _map(messages, "id"); let max = Math.max(...ids); messages.push( id: max+1, userId: m.id, message: m.data ); let objMessage = $(".messages"); if (objMessage<0>.scrollHeight - objMessage<0>.scrollTop === objMessage<0>.clientHeight ) this.setState(messages); objMessage.animate( scrollTop: objMessage.prop("scrollHeight") , 300); //tạo cảm giác cuộn khi tất cả inbox new else this.setState(messages); if (m.id === this.state.user) objMessage.animate( scrollTop: objMessage.prop("scrollHeight") , 300); //Gửi event socket newMessage với dữ liệu là nội dung tin nhắn sendnewMessage(m) if (m.value) this.socket.emit("newMessage", m.value); //gửi sự kiện về vps m.value = ""; render () return (