Hướng dẫn xây dựng web app với reactjs mới nhất 2020 – Xây dựng web

Rate this post

Xây dựng web app với reactjs là một trong những keyword được search nhiều nhất trên Google về chủ đề xây dựng web app với reactjs. Trong bài viết này, xaydungweb.vn sẽ viết bài viết Hướng dẫn xây dựng web app với reactjs mới nhất 2020.

Hướng dẫn xây dựng web app với reactjs mới nhất 2020

diễn đạt

vận dụng này là một website app thuận tiện có tính năng chat realtime giữa những người dùng, phần frontend sẽ được xây dựng bằng ReactJs và đây cũng chính là trọng tâm kiến thức và kỹ năng mà mình muốn san sẻ với những bạn. Còn backend sẽ là một server node.js làm nghĩa vụ và trách nhiệm send và nhận tin nhắn giữa những user, hiển nhiên là sẽ realtime nghĩa là bạn không cần phải reload lại trang mà luôn luôn đủ nội lực nhận được tin nhắn từ người dùng không giống send đến cho mình, và thư viện socket.io sẽ giúp ta sử dụng việc đó. Nếu bạn chưa biết về node.js và socket.io thì cũng k yếu tố gì, khi cần dùng mình sẽ diễn đạt về nó, và vì node.js và socket.io đều được viết bằng javascript nên tất cả chúng ta sẽ giúp quen với nó rất mau .

chuẩn bị sẵn sàng kỹ năng và kiến thức

Để làm được vận dụng này thì bạn phải có hiểu biết cơ bản về ReactJs rồi, hiểu về một số ít định nghĩa như components, props, state, handling events, lifecycle … Và cũng cần hiểu biết một tí về ES6. Nhưng nếu những bạn chưa biết thì cũng không sao, trong lúc sử dụng mình sẽ lý giải từng đoạn code, nếu đọc code mà những bạn vẫn không hiểu thì cũng không sao, cứ sao chép code cho chạy được rồi hiểu sau ( mình cũng hay giống như thế ). Điều quan trọng là bạn mong ước làm ra ứng dụng này mà thôi. Nhưng mình vẫn khuyến khích những bạn nghiên cứu và điều tra về react trước vì khi đó bạn sẽ thuận tiện theo dõi bài viết này hơn. ebook về ReacJS có rất nhiều trên mạng, bạn hoàn toàn có thể đọc qua một số ít project thuận tiện gợi ý https://github.com/DoanhPHAM/todo, và đọc document https://reactjs.org/docs/hello-world.html

thiết lập giao diện cho vận dụng bằng React

tiên phong, trước khi xây dựng giao diện bằng React thì cần phải biết giao diện nó thế nào, lên google search ‘ bootstrap chat template ’ rồi long dong một số ít trang, mình cũng chọn được cái giao diện hài lòng, và nó đây https://bootsnipp.com/snippets/WaEvr

Khởi tạo vận dụng React

Khi đã có giao diện html thuần rồi thì ta phải chuyển nó qua React, và đây cũng chính là phần khó nhất trong post này. Để chuyển giao diện qua React điều trước tiên là các bạn phải khởi tạo project React, để có một project React tốt nhất, ta cần phải biết đến npm, babel, webpack. đối với người mới thì việc config sẽ khá phức tạp, nhưng k sao để không khó khăn, chúng ta sẽ không khởi tạo project bằng tay mà bằng Create React App, nó là một package giúp tự động hóa việc xây dựng ứng dụng React. Để cài đặt được package Create React App máy tình cần được cài đặt Node.Js, mình sẽ mặc định các bạn vừa mới cài Node js rồi, nếu chưa thì các bạn google để cài nha, cứ bản mới nhất mà cài thôi xây dựng command line lên và gõ

npm install -g create-react-app

Create React App sẽ được cài đặt cục bộ trên máy tính, kế tiếp khởi tạo áp dụng

create-react-app chat-client

với chat-client là tên của project sau khi cài xong, các bạn cd chat-client và chạy lệnh

npm run

nếu trình duyệt bật lên tab thế này là chúng ta vừa mới khởi tạo thành công project ReactSau khi 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.js

cuối cùng 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 -- env = jsdom ", " eject " : " react-scripts eject ", " deploy " : " react-scripts build và và 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à giao diện chat mà mình giới thệu với các bạn, những khung màu khác nhau là những components mà mình chia, việc chia components này chưa hẳn 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 mới chưa quen với việc làm việc với các components thì sẽ khá là mớ bòng bong, nên mình chỉ chia đơn giản vậy thôi  Ngoài cùng là component App, các bạn vào trong thư mục src, đây là thư mục làm việc chính chứa sourec code của các bạn, mở file App.js ra, xóa cái code cũ đi và copy đè đoạn code này lên, các bạn đọc comment bên trong code để hiểu hơn nhé

import React from 'react';
import $ from 'jquery';
import Messages from './message-list';
import Input from './input';
import _map from 'lodash/map';
import io from 'socket.io-client';

import './App.css';

export default class App extends React.Component constructor ( props ) super ( props ) ; / / Khởi tạo state, this.state = messages : [ id : 1, userId : 0, message : ' Hello ' ], user : null, this.socket = null ; / / Connetct với server nodejs, trải qua socket.io componentWillMount ( ) this.socket = io ( ' localhost : 6969 ' ) ; this.socket.on ( ' id ', res => this. setState ( user : res ) ) / / lắng nghe sự kiện có tên ' id ' this.socket.on ( ' newMessage ', ( response ) => this. newMessage ( response ) ) ; / / lắng nghe sự kiện ' newMessage ' và gọi hàm newMessage khi có sự kiện / / Khi có inbox mới, sẽ 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 hiệu ứng cuộn khi có inbox mới else this. setState ( messages ) ; if ( m.id = = = this.state.user ) objMessage. animate ( scrollTop : objMessage. prop ( ' scrollHeight ' ), 300 ) ; / / Gửi sự kiện socket newMessage với tài 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ề server m.value = " " ; render ( ) return (

chat box

this.state.user messages = this.state.messages typing = this.state.typing/ > this. sendnewMessage. bind ( this ) / >

)

tiếp theo là component khoanh màu đỏ, component Input, tạo file input.js

import React from 'react';

export default class App extends React.Component checkEnter ( e ) console.log ( e ) if ( e. keyCode = = = 13 ) this.props. sendMessage ( this.refs. messageInput ) ; render ( ) return (

this. checkEnter. bind ( this ) / >

() => this.props.sendMessage(this.refs.messageInput) ref="inputMessage" >

Send

)

Component màu tím là component MessageItem, tạo file message-item.js

import React from 'react';

import './item.scss';

export default class App extends React.Component render ( ) return (

• this.props.user ? ' Message right ' : ' message left ' >this.props.message

  10 : 56 am

• )Component màu vàng component MessageList, nó gồm nhiều component MessageItem, tạo file message-list

  import React from 'react';
  import Item from '../message';
  
  import './message-list.scss'
  
  
  export default class App extends React.Component render ( ) return (

  • this.props.messages.map ( item => item.id user = item. userId = = this.props.user ? True : false message = item.message/ > )

  )đã xong, giờ các bạn vào địa chỉ localhost:3000 sẽ được màn ảnh thế nàydĩ nhiên chỉ có giao diện thôi chứ chưa gửi được sms, để gửi được ta cần tạo server node js.

  Tạo server Node

  Việc tạo server Node khá không khó khăn, trước hết các bạn tạo 1 thưc mục tên gì cũng được, thư mục của mình là bên trong sẽ có file package.json với content giống như sau

  
    "name": "botchat",
    "version": "1.0.0",
    "description": "begin",
    "main": "index.js",
    "scripts": " test " : " echo \ " Error : no tra cứu specified \ " và và exit 1 ",
    "repository": " type " : " git ", " url " : " git + https://github.com/ththth0303/server-chat.git ",
    "author": "thangnt",
    "license": "ISC",
    "bugs": " url " : " https://github.com/ththth0303/server-chat/issues ",
    "homepage": "https://github.com/ththth0303/server-chat#readme",
    "dependencies": " ejs " : " ^ 2.5.7 ", " express " : " ^ 4.15.4 ", " request " : " ^ 2.81.0 ", " socket.io " : " ^ 2.0.3 "
  

  kế tiếp tạo file index.js với content

  var express = require('express');
  var app = express();
  
  var server = require('http').Server(app);
  var port = (process.env.OPENSHIFT_NODEJS_PORT || process.env.PORT || 6969);
  var io = require('socket.io')(server);
  server.listen(port, () => console.log('Server running in port ' + port));
  
  io.on('connection', function(socket)console.log ( socket.id + ' : connected ' ) ; socket.emit ( ' id ', socket.id ) ; socket.on ( ' disconnect ', function ( ) console.log ( socket.id + ' : disconnected ' ) ) socket.on ( ' newMessage ', data => io.sockets.emit ( ' newMessage ', data : data, id : socket.id ) ; console.log ( data ) ; ));
  
  app.get('/', (req, res) => res.send ( " trang chủ page. Server running okay. " ) ;)

  xây dựng command line lên và chạy lện npm install, khi cài xong thì bạn chạy tiếp lệnh

  Xem thêm: Hướng dẫn cách check thứ hạng từ khoá trên Google

  node index.js

  Nếu màn ảnh console hiện lên giống như này là các bạn đang thành đạt  Giờ các bạn mở lại địa chỉ http://localhost:3000, giờ các bạn có thể chat được rồi, xây dựng 2 tab lên và thử nha!

  Kết

  Giờ tất cả chúng ta hoàn toàn có thể chat với nhau qua local, nhưng như này thì chưa được gọi là vận dụng chat được, cần phải định danh người chat, phòng chat, lưu database, và ở đầu cuối là deploy, phần này chỉ làm quen với React, Node, Socket. io và dùng thử nho nhỏ thôi .. Phần sau mình sẽ lý giải kỹ hơn về Socket. io, chính sách hoạt động giải trí của vận dụng. Phần này tạm dừng ở đây thôi, hẹn gặp bạn ở phần sau ! ! ! Các bạn hoàn toàn có thể xem link git của vận dụng tại đây

  • Chat client https://github.com/ththth0303/chat-client/tree/part1
  • Chat server https://github.com/ththth0303/chat-server

nguồn : Xây dựng web

Xem thêm: 10 bước để kinh doanh online thành công cho người mới bắt đầu

Source: https://migoda.vn
Category: SEO Website