• Trang chủ
  • Xây dựng website
  • Bảo mật Website
  • Kiến thức SEO
  • Source Web
  • Tài liệu làm web
  • Trang chủ
  • Xây dựng website
  • Bảo mật Website
  • Kiến thức SEO
  • Source Web
  • Tài liệu làm web

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

ATPMedia Bởi ATPMedia
19/11/2019
Trang chủ Kiến thức xây dựng website
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.

Xây Dựng Web App Với Reactjs

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

mô tả

vận dụng này là một website app dễ dàng có chức năng chat realtime giữa các 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 mà mình muốn chia sẻ với các bạn. Còn backend sẽ là một server node.js làm nghĩa vụ send và nhận tin nhắn giữa các 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 vấn đề gì, khi cần dùng mình sẽ mô tả về nó, và vì node.js và socket.io đều được viết bằng javascript nên chúng ta sẽ giúp quen với nó rất mau.

sẵn sàng 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ố đị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 các 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à các 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 muốn làm nên ứng dụng này mà thôi. Nhưng mình vẫn khuyến khích các bạn nghiên cứu về react trước vì khi đó bạn sẽ dễ dàng 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 có thể đọc qua một số project dễ dàng 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

đầu tiên, 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 lang thang một số 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 áp 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 && 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, thông qua socket.io
   componentWillMount() 
       this.socket = io('localhost:6969');
       this.socket.on('id', res => this.setState(user: res)) // lắng nghe event 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ó event
   
   //Khi có inbox mới, sẽ push tin nhắn vào state mesgages, và nó sẽ được render ra màn hình
   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 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 event 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\" && 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("Home 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

    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ờ chúng ta 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à cuối cùng 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ẽ giải thích kỹ hơn về Socket.io, cơ chế hoạt động của áp 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 có thể xem link git của áp 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: viblo.asia

Tags: blog reactjsdeploy react web appkết hợp nodejs và reactjslàm web với reactjsnodejs reactjsreact web appreactjs socket io examplexây dựng web app với reactjsxây dựng website với reactjs
ATPMedia

ATPMedia

Bài Viết Tiếp Theo
Cách Tải ảnh Về Máy Tính

tổng hợp các cach tai anh ve may tinh mới nhất 2020

Bài Viết Mới.

Hạn chế tác hại do sử dụng ghế massage không đúng cách

Hạn chế tác hại do sử dụng ghế massage không đúng cách?

23/11/2021
Giảm Dung Lượng ảnh Trong Word

Hướng dẫn các cách giảm dung lượng ảnh trong word mới nhất 2020

29/12/2019
Mật độ Từ Khóa Trong Seo

Hướng dẫn về mật độ từ khóa trong seo mới nhất 2020

02/12/2019
Cách Kiểm Tra Tốc độ ổ Cứng

Hương dẫn các cách kiểm tra tốc độ ổ cứng mới nhất 2020

19/12/2019
Cách đưa Website Lên Google

Tổng hợp các cách đưa website lên google mới nhất 2020

28/11/2019
Cách Làm Video đại Diện

Hướng dẫn các cách làm video đại diện mới nhất 2020

02/12/2019
Tạo Cây Thư Mục Trong Linux

Hướng dẫn tạo cây thư mục trong linux mới nhất 2020

21/11/2019
Cách Chỉ đường Trên Google Map

Hướng dẫn các cách chỉ đường trên google map mới nhất 2020

02/12/2019

XÂY DỰNG WEBSITE

Coder.com.vn là Blog chia sẻ kiến thức học lập trình miễn phí. Chuyên tổng hợp các bài viết về tài liệu học lập trình, với mong muốn tất cả mọi người ở khắp nơi trên thế giới được học lập trình miễn phí.

Chuyên mục

  • Trang Chủ
  • Source Web
  • Kiến Thức Seo
  • Bảo Mật Website
  • Tài Liệu Làm Web
  • Xây Dựng Website

Phần mềm - Công cụ

  • Brands
  • Alosoft
  • Seeding
  • Top Việc
  • Tổng Hợp
  • Quản Trị Nhân Sự

Liên kết

  • Topvui
  • Xe Mô Tô
  • Quản Lý Kho
  • Blog Việc Làm
  • Giải Pháp Việc Làm
  • Phần Mềm Miễn Phí

© 2019 | Thiết Kế bởi ATP MEDIA

  • Trang chủ
  • Xây dựng website
  • Bảo mật Website
  • Kiến thức SEO
  • Source Web
  • Tài liệu làm web

Xây dựng website đơn giản, tối ưu chi phí, chuẩn SEO và đồng thời cũng cung cấp các kiến thức hữu ích để bất kỳ ai cũng có thể thiết kế website đơn giản.