Archive for December 2019
Tutorial Crud REACT JS
By : Iqbal
1.Membuka cmd dan install react
npm install -g create-react-app (install react)
npx create-react-app reactcrud
cd reactcrud
npm start
tanda sudah terinstall
3. merubah app.js sesuai dengan code yang di ss dan membuat folder component yang isinya create.component.js , edit.component.js ,index.component.js
create.component.js
import React, { Component } from 'react';
export default class Create extends Component {
render() {
return (
<div>
<p>Welcome to Create Component!!</p>
</div>
)
}
}
edit.component.js
import React, { Component } from 'react';
export default class Edit extends Component {
render() {
return (
<div>
<p>Welcome to Edit Component!!</p>
</div>
)
}
}
index.component.js
import React, { Component } from 'react';
export default class Index extends Component {
render() {
return (
<div>
<p>Welcome to Index Component!!</p>
</div>
)
}
}
Dan tampilan seperti ini
5.merubah source code app.js seperti di gambar
6. Membuat folder api dan install package json(npm init -y) dan node.js (npm install express body-parser cors mongoose --save) dan nodemon(npm install -g nodemon )
8. install mongoDB dan membuat monoschema serta membuat servis.js dan sesuaikan seperti gambar dibawah
10. membuat route CRUD pada mongo
11. install axios library (npm install axios --save) dan merubah create.component.js seperti
12. Tampilan setelah selesai
13. Mengubah index.component.js
14. membuat tablerow.js di components untuk edit
membuat tabel delete