Vue is used to implement small Q chat bot. React is the same as Vue.

GitHub source: github.com/baiyuliang/…

Angular, React, vue!

Angular > React > Vue angular> React > Vue angular was born early, but why do we use React or Vue for front-end development in China? The main reason for this is that angular versions are not compatible with older versions, which leads to the loss of a large number of users. In addition, angular frameworks are heavy and difficult to use. With respect to the domestic Internet environment, this is destined to be popular! React became the most popular front-end framework, and Vue quickly became the most popular with its ease of use.

As far as I know, the most popular front-end or cross-end development platforms in China are basically based on react and VUE frameworks. For example: 1. Weex based on VUE (now also supports React via RAX) 2. Rn based on REACT 3. Taro supports React and VUE 4

React and Vue are frameworks to learn, except for the most basic js+ HTML + CSS.

Going back to this project, I will make a rough comparison between react and Vue implementation based on this project, but I won’t go into depth!

1. Create projectsI am lazy and don’t like to use the command line to create a project with a bunch of configurations. Instead, I use WebStrom to create projects directly, just like the previous vue projects:Create complete and run!

2. Project structure

Here’S a complete project comparison: left vUE, right React

3. Page structure and components

Vue pages are in. Vue end file format, which contains templete, Script, style, template (HTML layout), JS operations, CSS styles are all implemented in one file, and style provides scope property, to ensure that CSS styles do not conflict. Vue creates a. Vue extension file and declares the component name name:XXX;

React: JSX react: JSX react: JSX React: JSX React Class component and function component, class component function, similar to Java class, can inherit, constructor, static method, ordinary method, etc., through the render() function render DOM tree, export default export component:

import React from 'react'

class Page2 extends React.Component {
    constructor(props) {
        super(props);
    }

    render() {
        return (
            <div>
                page2
            </div>)}}export default Page2
Copy the code

Function component function is relatively simple, return JSX format DOM tree can!

function Item() {
    return <div>Item</div>
}
Copy the code

React is like combining JS and HTML, but CSS is separate, so when using styles, you have to create the corresponding CSS file and import it through import! Note, however, that React does not provide scope like Vue does, so it passes directly

import'XXX. CSS'Copy the code

There are two solutions: prefixing class names to make them unique, and CSS modularization:

import Style from'XXX. CSS' < div className = {style.css. XXX} > < / div >Copy the code

4. Data binding VUE: Two-way data binding through V-Model; React: Single data binding: only state can synchronize data. Vue and React have their own ideas about whether two-way or one-way data binding is better than react.

React doesn’t make any difference. Vue Q uses AXIos to encapsulate network requests. React does not make any difference.

6. Cross-domain problem Vue uses proxy to resolve cross-domain problem, configure vue.config.js:

module.exports = {
    devServer: {
        proxy: {
            "/api": {
                target: 'https://api.ai.qq.com'.changeOrigin: true.pathRewrite: {
                    '^/api': '/'}}}}};Copy the code

React: setupproxy.js

const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function(app) {
    app.use(
        createProxyMiddleware('/api', {  // 'API' is the request that needs to be forwarded
            target: 'https://api.ai.qq.com'.// Here is the interface server address
            changeOrigin: true,}}))Copy the code

Of course, there are many other differences between the two, so I won’t list them all. Here is the main interface code for the chat. You can download the complete code from GitHub:

import React from "react";
import {getChatResponse} from ".. /api/ApiChat";
import './Chat.scss'
import RightItem from ".. /components/RightItem";
import LeftItem from ".. /components/LeftItem";

class Chat extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            text: ' '.msglist: [{
                id: 1.type: 1.content: 'Welcome! '.me: false}}}]// Call the interface
    getResponse = (text) = > {
        getChatResponse(text).then(res= > {
            this.state.msglist.push({
                id: this.state.msglist[this.state.msglist.length - 1].id + 1.type: 1.content: res.data.answer,
                me: false
            })
            this.setState({
                msglist: this.state.msglist,
            })
        })
    }

    // Synchronize state when input box data changes
    changeText = (e) = > {
        this.setState({
            text: e.target.value
        })
    }

    // Listen for the Enter key
    onKeyup = (e) = > {
        if (e.keyCode === 13) {
            this.send()
        }
    }

    // Send text
    send = () = > {
        if (this.state.text) {
            this.state.msglist.push({
                id: this.state.msglist[this.state.msglist.length - 1].id + 1.type: 1.content: this.state.text,
                me: true
            })
            this.setState({
                msglist: this.state.msglist,
                text: ' '
            })
            this.getResponse(this.state.text)
        }
    }

    // Automatically scroll to the bottom
    scrollToBottom = () = > {
        this.messagesEnd.scrollIntoView({behavior: "smooth"});
    }

    // scrollToBottom is executed when data is updated
    componentDidUpdate() {
        this.scrollToBottom();
    }

    render() {
        return (
            <div className="chat-container">
                <div className="chat-list">
                    <ul>
                        <ListItem list={this.state.msglist}/>
                    </ul>
                    <div style={{float: "left", clear: "both"}}
                         ref={(el)= >{ this.messagesEnd = el; }} ></div>
                </div>
                <div className="chat-bottom">
                    <div className="chat-line"/>
                    <div className="chat-input-send">
                        <input placeholder="Please enter the content..." value={this.state.text} onChange={this.changeText}
                               className="chat-input" onKeyUp={this.onKeyup}/>
                        <button className="chat-send" onClick={this.send}>send</button>
                    </div>
                </div>

            </div>)}}function ListItem(props) {
    return props.list.map(item= > {
        if (item.me) {
            return <li key={item.id}><RightItem msg={item}/></li>
        } else {
            return <li key={item.id}><LeftItem msg={item}/></li>}})}export default Chat

Copy the code

React still has this problem. The solution is basically the same: Place an empty div at the bottom of the list and locate the div at the end of each chat:

The first step:

   <div className="chat-list">
         <ul>
             <ListItem list={this.state.msglist}/>
         </ul>
         <div style={{float: "left", clear: "both"}}
              ref={(el)= >{ this.messagesEnd = el; }} ></div>
     </div>
Copy the code

The second step:

    // Automatically scroll to the bottom
    scrollToBottom = () = > {
        this.messagesEnd.scrollIntoView({behavior: "smooth"});
    }

    // scrollToBottom is executed when data is updated
    componentDidUpdate() {
        this.scrollToBottom();
    }
Copy the code

GitHub source: github.com/baiyuliang/…