Hướng dẫn react-spreadsheet example - ví dụ về bảng tính phản ứng

Lady and gentlemen!

Chào mừng quý vị đến với bài viết tiếp theo của em sau chuỗi ngày nghỉ tết ấm no, hạnh phúc và chủ đề của lần gặp gỡ này sẽ là một bài viết giới thiệu hướng dẫn vui vui với tựa đề "Biến Google Sheet thành một REST API và kết hợp với React".

Như quý vị đã biết và đã thấy, posting data to API’s chưa bao giờ là dễ dàng. Cũng như quý vị đã bao giờ dùng React để post form data vào Google Sheets chưa ? . Nếu chưa, thì bài viết hướng dẫn nhỏ này là dành cho quý vị đấy ạ. ( Như văn mẫu )

)

Chúng ta bắt đầu tìm hiểu cách mà mọi thứ hoạt động thôi nào!

Creating a React App

Để bắt đầu, chúng ta cùng tạo một project React bằng npx create-react-app react-googlesheets nào!

Xóa một số thứ không cần thiết trong App.js

import './App.css';
function App() {
  return (
    

      

        
      
    
  );
}
export default App;

Install Semantic UI

Chúng ta nên dùng Semantic UI để dựng giạo diện cho nó đẹp và nhanh nhé

Để install chúng ta sẽ gõ npm install semantic-ui-react semantic-ui-css

Sau đó import css file vào file index.js

import 'semantic-ui-css/semantic.min.css'

Và cuối cùng sẽ là npm start to run app!

Create some input boxes

Nào chúng ta cùng tạo form với một số trường như name, age,

import React, { Component } from 'react'
import { Button, Form, Container, Header } from 'semantic-ui-react'
import './App.css';
export default class App extends Component {
  render() {
    return (
      
        
React Google Sheets!
        

          
            Name
            
          
          
            Age
            
          
          
            Salary
            
          
          
            Hobby
            
          
          
          Submit
        
      
    )
  }
}

0,

import React, { Component } from 'react'
import { Button, Form, Container, Header } from 'semantic-ui-react'
import './App.css';
export default class App extends Component {
  render() {
    return (
      
        
React Google Sheets!
        

          
            Name
            
          
          
            Age
            
          
          
            Salary
            
          
          
            Hobby
            
          
          
          Submit
        
      
    )
  }
}

1.

Sử dụng một số components Buttons, Form, Container, và Header của

import React, { Component } from 'react'
import { Button, Form, Container, Header } from 'semantic-ui-react'
import './App.css';
export default class App extends Component {
  render() {
    return (
      
        
React Google Sheets!
        

          
            Name
            
          
          
            Age
            
          
          
            Salary
            
          
          
            Hobby
            
          
          
          Submit
        
      
    )
  }
}

2 ạ.

import React, { Component } from 'react'
import { Button, Form, Container, Header } from 'semantic-ui-react'
import './App.css';
export default class App extends Component {
  render() {
    return (
      
        
React Google Sheets!
        

          
            Name
            
          
          
            Age
            
          
          
            Salary
            
          
          
            Hobby
            
          
          
          Submit
        
      
    )
  }
}

Và đây là cái form của chúng ta!

Như vậy chúng ta đã xong UI, cùng làm một số function nào!

Đầu tiên chúng ta tạo state cho các form fields trong constructor.

import React, { Component } from 'react'
import { Button, Form, Container, Header } from 'semantic-ui-react'
import './App.css';
export default class App extends Component {
  constructor(props) {
    super(props)
  
    this.state = {
       name: '',
       age: '',
       salary: '',
       hobby: ''
    }
  }
changeHandler = (e) => {
    this.setState({[e.target.name] : e.target.value})
  }
submitHandler = e => {
    e.preventDefault();
    console.log(this.state);
  }
  
  render() {
    const { name, age, salary, hobby } = this.state;    (*)
    return (
      
        
React Google Sheets!
        

          
            Name
            
          
          
            Age
            
          
          
            Salary
            
          
          
            Hobby
            
          
          
          Submit
        
      
    )
  }
}

Tiếp theo là

import React, { Component } from 'react'
import { Button, Form, Container, Header } from 'semantic-ui-react'
import './App.css';
export default class App extends Component {
  render() {
    return (
      
        
React Google Sheets!
        

          
            Name
            
          
          
            Age
            
          
          
            Salary
            
          
          
            Hobby
            
          
          
          Submit
        
      
    )
  }
}

3 để set state mỗi khi on change.

Và cuối cùng là

import React, { Component } from 'react'
import { Button, Form, Container, Header } from 'semantic-ui-react'
import './App.css';
export default class App extends Component {
  render() {
    return (
      
        
React Google Sheets!
        

          
            Name
            
          
          
            Age
            
          
          
            Salary
            
          
          
            Hobby
            
          
          
          Submit
        
      
    )
  }
}

4 để handle submit event mỗi khi nhấn submit.

console.log để test thử thôi nào!

Posting data to Google Sheets

Đến giai đoạn biến Google Sheets thành một REST API rồi.

Trước tiên chúng ta cần tạo một Google Sheet và copy link với permission có thể edit. Đặt tên tùy ý quý vị ạ!

Sau đó chúng ta vào trang https://sheet.best/ vào tạo một tài khoản miễn phí.

Tạo mới một connection và paste link Google Sheet vào thôi.

Nhấn connect sẽ được chuyển tới trang connection detail.

Bây giờ CONNECTION URL sẽ là một endpoint để bạn có thể sending POST Requests.

Thêm một chút nữa thôi, install Axios để call API với câu lệnh

import React, { Component } from 'react'
import { Button, Form, Container, Header } from 'semantic-ui-react'
import './App.css';
export default class App extends Component {
  render() {
    return (
      
        
React Google Sheets!
        

          
            Name
            
          
          
            Age
            
          
          
            Salary
            
          
          
            Hobby
            
          
          
          Submit
        
      
    )
  }
}

5

Result

Sửa lại

import React, { Component } from 'react'
import { Button, Form, Container, Header } from 'semantic-ui-react'
import './App.css';
export default class App extends Component {
  render() {
    return (
      
        
React Google Sheets!
        

          
            Name
            
          
          
            Age
            
          
          
            Salary
            
          
          
            Hobby
            
          
          
          Submit
        
      
    )
  }
}

4 một tí.

submitHandler = e => {
    e.preventDefault();
    console.log(this.state);
axios.post('https://sheet.best/api/sheets/a6e67deb-2f00-43c3-89d3-b331341d53ed', this.state)
    .then(response => {
      console.log(response);
    })
  }

Thêm tên một số cột trong Google Sheet như tên các trường.

Điền form và submit thử thôi. Let's go!

Và đây là kết quả trên Google Sheets.

Conclusion

Như vậy là chúng ta đã có thể dùng React post form data vào Google Sheet rồi!

Xin cảm ơn quý vị đã cùng theo dõi đến cuối bài viết, xin hẹn quý vị vào lần hội ngộ tới!

Nhân đây em cũng xin chúc quý vị năm mới sức khỏe và thành công nào ạ!

Thanks for reading! Cat tax:

Tham khảo: https://js.plainenglish.io/how-to-turn-google-sheets-into-a-rest-api-and-use-it-with-react-application-1823a585320