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.
├── 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
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 (
