Bài này sẽ nói về cách xây dựng một ứng dụng sử dụng ReactJs với phần server sử dụng API build bằng Nodejs. Và nói tiếp cách tạo biểu mẫu. thêm, sửa, xóa dữ liệu bằng API Nodejs, sử dụng ReactJs

Phần build server API Nodejs các bạn xem chi tiết tại bài sau Hướng dẫn xây dựng API đơn giản với Nodejs và Mysql Phần trước của bài này các bạn xem tại đây Hướng dẫn xây dựng API đơn giản với Nodejs và Mysql, kết hợp frontend sử dụng reactjs

Vì vậy, chúng tôi đã gọi một api cơ bản với việc sử dụng Reactjs

Cấu hình lại code ReactJs

Trong bài trước về cơ bản cách tổ chức code rất nguyên thủy, mình sẽ cấu trúc lại code FrontEnd Github code hiện tại các thành phần như sau

Component display list

Tạo component DisplayItem

Danh sách Todo list display ban đầu tại file

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import './index.css';
import bootstrap from 'bootstrap';
import './bootstrap.min.css';
import DisplayItem from './components/DisplayItem';
import registerServiceWorker from './registerServiceWorker';

ReactDOM.render(
    
      
        
          
        
    ,
    document.getElementById('root'));
registerServiceWorker();

6, mình sẽ đổi tên thành component DisplayItem

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import './index.css';
import bootstrap from 'bootstrap';
import './bootstrap.min.css';
import DisplayItem from './components/DisplayItem';
import registerServiceWorker from './registerServiceWorker';

ReactDOM.render(
    
      
        
          
        
    ,
    document.getElementById('root'));
registerServiceWorker();

7

Content of file

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import './index.css';
import bootstrap from 'bootstrap';
import './bootstrap.min.css';
import DisplayItem from './components/DisplayItem';
import registerServiceWorker from './registerServiceWorker';

ReactDOM.render(
    
      
        
          
        
    ,
    document.getElementById('root'));
registerServiceWorker();

7 is

import React, { Component } from 'react';
import axios from 'axios';
import TableRow from './TableRow';
import { Link } from 'react-router-dom';

class DisplayItem extends Component {
  constructor(){
    super();
    this.state ={items: []};
   }
  componentDidMount() {
    axios.get('http://localhost:3001/api/todos')
     .then(response => {
      console.log(response.data);
       this.setState({ items: response.data });
     })
     .catch(function (error) {
       console.log(error);
     })
    }
    tabRow() {
      if (this.state.items instanceof Array) {
        return this.state.items.map(function(object, i) {
          return ;
        })
      }
    }
    render() {
      return (
          

              
Todo List
              

                
                    {this.tabRow()}
                  

                  

                    

                        
Add item
                    
                    

                        
ID
                        
Title
                        
Actions
                    
                  
                  

                
              
          
      );
  }
}

export default DisplayItem;

Tạo thành phần TableRow

Trong file

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import './index.css';
import bootstrap from 'bootstrap';
import './bootstrap.min.css';
import DisplayItem from './components/DisplayItem';
import registerServiceWorker from './registerServiceWorker';

ReactDOM.render(
    
      
        
          
        
    ,
    document.getElementById('root'));
registerServiceWorker();

7 chúng ta thấy có một thành phần

import React, {Component} from 'react';

class CreateItem extends Component {
    render() {
      return (
      

        
Create An Item
        

          

            

              

                Title:
                
              
            
            


            

              Add Item
            
          
        
      )
    }
}
export default CreateItem;

0 được nhập vào. Mục đích của thành phần

import React, {Component} from 'react';

class CreateItem extends Component {
    render() {
      return (
      

        
Create An Item
        

          

            

              

                Title:
                
              
            
            


            

              Add Item
            
          
        
      )
    }
}
export default CreateItem;

0 là để hiển thị, từng dòng trong danh sách Todo