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[];
7Content 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 isimport 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['//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
Add item
ID
Title
Actions
{this.tabRow[]}
];
}
}
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