Panduan Memulai React: Membangun Antarmuka Pengguna Pertama Anda dari Nol

React adalah pustaka JavaScript untuk membangun antarmuka pengguna. Dikembangkan dan dipelihara oleh Facebook, dan telah menjadi salah satu alat paling populer dalam pengembangan frontend. Panduan ini akan membawa Anda dari nol, selangkah demi selangkah untuk memahami konsep dasar React, dan membangun antarmuka pengguna sederhana.

Mengapa Memilih React?

React memiliki keuntungan sebagai berikut:

• Komponen: React memecah antarmuka pengguna menjadi komponen independen dan dapat digunakan kembali. Ini membuat kode lebih mudah dipelihara dan dipahami.
• Deklaratif: React menggunakan gaya pemrograman deklaratif, yang berarti Anda hanya perlu menjelaskan konten yang ingin Anda tampilkan, dan React akan secara otomatis menangani pembaruan dan rendering.
• Efisien: React menggunakan Virtual DOM dan algoritma diff yang cerdas, yang secara efisien memperbarui antarmuka pengguna dan mengurangi rendering yang tidak perlu.
• Dukungan Komunitas yang Besar: React memiliki komunitas yang besar dan ekosistem yang kaya, Anda dapat menemukan banyak tutorial, pustaka, dan alat untuk membantu Anda mengembangkan.
• Kemampuan Lintas Platform: React Native memungkinkan Anda menggunakan React untuk mengembangkan aplikasi seluler asli (iOS dan Android).

Persiapan

Sebelum memulai, Anda perlu memastikan bahwa komputer Anda telah menginstal alat-alat berikut:

• Node.js: Node.js adalah lingkungan runtime JavaScript yang digunakan untuk menjalankan alat pengembangan React. Anda dapat mengunduh dan menginstalnya dari https://nodejs.org/.
• npm atau yarn: npm (Node Package Manager) dan yarn adalah pengelola paket JavaScript yang digunakan untuk menginstal dan mengelola dependensi React. Biasanya npm diinstal bersamaan dengan Node.js. yarn dapat diinstal dari https://yarnpkg.com/.

Membuat Aplikasi React Pertama Anda

Kita akan menggunakan create-react-app untuk membuat proyek React dengan cepat.

1. Membuat menggunakan npm:

   npx create-react-app my-first-react-app
   cd my-first-react-app
   npm start
   

2. Membuat menggunakan yarn:

   yarn create react-app my-first-react-app
   cd my-first-react-app
   yarn start
   

Setelah menjalankan perintah di atas, create-react-app akan secara otomatis membuat direktori bernama my-first-react-app, dan menginisialisasi proyek React di direktori tersebut. Perintah npm start atau yarn start akan memulai server pengembangan, dan Anda dapat mengunjungi http://localhost:3000 di browser Anda untuk melihat aplikasi React Anda.

Struktur Direktori

Struktur direktori proyek yang dibuat oleh create-react-app adalah sebagai berikut:

my-first-react-app/
├── node_modules/         # Perpustakaan yang menjadi dependensi proyek
├── public/               # Aset statis (misalnya, file HTML)
│   ├── index.html        # File HTML titik masuk aplikasi
│   └── ...
├── src/                  # Kode sumber React
│   ├── App.css           # Gaya CSS komponen App
│   ├── App.js            # Komponen App
│   ├── App.test.js       # File pengujian komponen App
│   ├── index.css         # Gaya CSS global
│   ├── index.js          # File JavaScript titik masuk aplikasi
│   ├── logo.svg          # Logo React
│   └── ...
├── .gitignore            # File yang diabaikan oleh Git
├── package.json          # Metadata dan dependensi proyek
├── README.md             # Dokumentasi proyek
└── yarn.lock             # File penguncian versi dependensi (jika menggunakan yarn)

Memahami Komponen React

Aplikasi React dibangun dari komponen. Komponen adalah blok kode independen dan dapat digunakan kembali yang digunakan untuk merender bagian tertentu dari antarmuka pengguna.

Dalam file src/App.js, Anda dapat melihat komponen App bawaan:

import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    
      
        
        
          Edit `src/App.js` and save to reload.
        

        [
          Learn React
        ](https://reactjs.org)
      
    
  );
}

export default App;

Penjelasan kode:

• import React from 'react'; Mengimpor pustaka React.
• function App() { ... } Mendefinisikan komponen fungsi bernama App.
• return ( ... ) Mengembalikan ekspresi JSX yang menjelaskan konten yang harus dirender oleh komponen.
• export default App; Mengekspor komponen App agar dapat digunakan dalam file lain.

JSX (JavaScript XML)

JSX adalah ekstensi sintaks JavaScript yang memungkinkan Anda menulis kode mirip HTML dalam kode JavaScript. Dalam contoh di atas, ... adalah ekspresi JSX. Kode JSX akan diubah oleh Babel menjadi kode JavaScript standar agar dapat dipahami oleh browser.

Memodifikasi Komponen App

Mari kita modifikasi komponen App untuk membuat penghitung sederhana.

import React, { useState } from 'react';
import './App.css';

function App() {
  const [count, setCount] = useState(0);
``` const increment = () => {\n    setCount(count + 1);\n  };\n\n  const decrement = () => {\n    setCount(count - 1);\n  };\n\n  return (\n    \n      \n\n# Penghitung\n\n      Jumlah saat ini: {count}\n\n      +\n      -\n    \n  );\n}\n\nexport default App;\n```\n\n**Penjelasan Perubahan:**\n\n*   `import React, { useState } from 'react';` Mengimpor Hook `useState`. `useState` adalah React Hook yang digunakan untuk menambahkan state dalam komponen fungsi.\n*   `const [count, setCount] = useState(0);` Menggunakan Hook `useState` untuk membuat variabel state bernama `count`, dan menginisialisasinya menjadi `0`. `setCount` adalah fungsi yang digunakan untuk memperbarui state `count`.\n*   `const increment = () => { setCount(count + 1); };` Mendefinisikan fungsi bernama `increment`, yang digunakan untuk menambahkan 1 ke state `count`.\n*   `const decrement = () => { setCount(count - 1); };` Mendefinisikan fungsi bernama `decrement`, yang digunakan untuk mengurangi 1 dari state `count`.\n*   `Jumlah saat ini: {count}

` Menampilkan nilai state `count` di halaman.  `{count}` adalah ekspresi JSX, yang digunakan untuk menyisipkan variabel JavaScript dalam kode JSX.\n*   `+` dan `-` Membuat dua tombol, masing-masing terikat ke fungsi `increment` dan `decrement`.  `onClick` adalah event handler, yang digunakan untuk menjalankan fungsi yang ditentukan saat tombol diklik.\n\nSetelah menyimpan file `src/App.js`, browser akan otomatis me-refresh, dan Anda akan melihat penghitung sederhana. Mengklik tombol \  const increment = () => {
    setCount(count + 1);
  };

  const decrement = () => {
    setCount(count - 1);
  };

  return (
     {/* Menggunakan objek styles untuk merujuk ke kelas CSS */}
      

# Penghitung

      Jumlah saat ini: {count}

      +
      -
    
  );
}

export default App;

Menggunakan file CSS biasa:

Anda juga dapat menggunakan file CSS biasa untuk menentukan gaya global. Di file src/index.css, Anda dapat menentukan gaya global.

Misalnya, tambahkan gaya CSS berikut:

body {
  font-family: sans-serif;
}

Gaya ini akan diterapkan ke elemen body seluruh aplikasi.

Langkah Selanjutnya

Selamat, Anda telah menyelesaikan aplikasi React pertama Anda! Selanjutnya, Anda dapat mempelajari lebih lanjut tentang React, seperti:

• Komunikasi Komponen: Pelajari cara membuat komponen yang berbeda berkomunikasi satu sama lain.
• Penanganan Formulir: Pelajari cara membuat dan memproses formulir.
• Routing: Pelajari cara menggunakan React Router untuk membuat aplikasi multi-halaman.
• Redux atau Context API: Pelajari cara mengelola status aplikasi.
• Hooks: Pelajari lebih dalam tentang React Hooks, seperti useEffect, useContext, dll.

Ingat, React adalah teknologi yang membutuhkan latihan dan pembelajaran berkelanjutan. Selamat belajar!