Tutorial Crud REACT JS

Posted by : Iqbal 17 Dec 2019

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

 2. Merubah app.js sesuai dengan gambar dan instalasi dom dan css

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

  9. membuat monoschema
 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



{ 2 comments... read them below or Comment }

Total Pageviews

- Copyright © 2013 Iqbal10™ - Date A Live - Powered by Blogger - Designed by Johanes Djogan -