Tutorial CRUD di ReactJS (Create Read Update Delete) - Hallo sahabat Dev-Create, Pada Artikel yang anda baca kali ini dengan judul Tutorial CRUD di ReactJS (Create Read Update Delete), kami telah mempersiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya. mudah-mudahan isi postingan Artikel reaactjs, yang kami tulis ini dapat anda pahami. baiklah, selamat membaca.

Judul : Tutorial CRUD di ReactJS (Create Read Update Delete)
link : Tutorial CRUD di ReactJS (Create Read Update Delete)

Baca juga


Tutorial CRUD di ReactJS (Create Read Update Delete)

 

Prasyarat

Harus sudah terpasang NodeJS di komputer dengan versi yang terbaru (kalau bisa) karena minimal versi NodeJS yang dibutuhkan adalah >= 6.0. Cek versinya dengan perintah:

node -v

Kemudian, harus kita punyai juga tool NPM dan NPX. Cek dengan perintah:

npm -v

npx -v

Dan pastikan memiliki satu API yang sudah bisa di konsumsi. Silakan buat terlebih dahulu jika belum.

Membuat Project Baru

Create project baru dengan perintah:

Baca artikel lain:

npx create-react-app namaproject

misal namaproject kita adalah reactjs-crud. Dan akan pula terbentuk satu folder baru dengan nama reactjs-crud. Silakan dibuka dengan IDE favorit, misalnya VS-Code.

Install dependensi project

silakan install dengan:

npm install react-router-dom axios bulma
  • react-router-dom digunakan untuk membuat routing di aplikasi kita
  • axios untuk library olah data
  • bulma untuk styling CSS tampilan aplikasi kita

Lanjutkan dengan menjalankan aplikasi kita dengan perintah:

npm start

hasilnya:

Compiled successfully!

You can now view reactjs-crud in the browser.

  Local:            http://localhost:3000
  On Your Network:  http://192.168.10.211:3000

Note that the development build is not optimized.
To create a production build, use npm run build.

webpack compiled successfully

kemudian disarankan untuk menghapus library atau file yang tidak perlu, contohnya file:

  • src/App.css
  • src/App.test.js
  • src/index.css
  • src/logo.png
  • src/reportWebvitals.js
  • src/setupTests.js

sehingga hanya ada file:

  • src/App.js
  • src/index.js

 

buka file index.js dan buang semua dependensi file dan fungsi ke file-file diatas, sehingga menjadi seperti ini.

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

kemudian di file App.js buang juga dependensi dan ganti lebih sederhana dengan seperti ini:

function App() {
  return (
    <div>
      <h1>Halo gan!</h1>
    </div>
  );
}

export default App;

Gunakan CSS Bulma

Pada index.js kita import dulu dependensi CSS bulma:

import "bulma/css/bulma.css";

dan pada div atau elemen html lainnya, tambakan className=”container”

dan reload tampilan web dari project kita. pastikan tampilan sudah berubah lebih bagus karena ada CSS yang di tambahkan.

Buat React Component

Kita akan memanfaatkan fitur ReactJS soal komponen untuk membuat project kita lebih rapi. Buat folder baru di bawah folder /src dengan nama components sehingga menjadi /src/components. Disanalah komponen reactJS akan kita tulis.



Demikianlah Artikel Tutorial CRUD di ReactJS (Create Read Update Delete)

Sekianlah artikel Tutorial CRUD di ReactJS (Create Read Update Delete) kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya.

Anda sekarang membaca artikel Tutorial CRUD di ReactJS (Create Read Update Delete) dengan alamat link https://dev-create.blogspot.com/2022/08/tutorial-crud-di-reactjs-create-read.html