Tutorial: Bereaksi pada Windows untuk pemula

Artikel
03/19/2024

Jika Anda baru menggunakan React, panduan ini akan membantu Anda memulai beberapa dasar.

Beberapa istilah dan konsep dasar
Coba gunakan React di Visual Studio Code
Coba gunakan React dengan API

Prasyarat

Menginstal React di Windows
Instal React di Subsistem Windows untuk Linux
Instal Visual Studio Code. Sebaiknya instal Visual Studio Code di Windows, terlepas dari apakah Anda berencana untuk menggunakan React di Windows atau WSL.

Beberapa istilah dan konsep dasar

React adalah pustaka JavaScript untuk membangun antarmuka pengguna.

Ini adalah sumber terbuka, yang berarti Anda dapat berkontribusi padanya dengan mengajukan masalah atau menarik permintaan. (Sama seperti dokumen ini!)
Ini deklaratif, artinya Anda menulis kode yang Anda inginkan dan React mengambil kode yang dideklarasikan dan melakukan semua langkah JavaScript/DOM untuk mendapatkan hasil yang diinginkan.
Ini berbasis komponen, yang berarti bahwa aplikasi dibuat menggunakan modul kode independen yang telah difabrikasi dan dapat digunakan kembali yang mengelola statusnya sendiri dan dapat direkatkan bersama-sama menggunakan kerangka kerja React, sehingga memungkinkan untuk meneruskan data melalui aplikasi Anda sambil menjaga status keluar dari DOM.
Moto React adalah "Pelajari sekali, tulis di mana saja." Niatnya adalah untuk penggunaan kembali kode dan tidak membuat asumsi tentang bagaimana Anda akan menggunakan React UI dengan teknologi lain, tetapi untuk membuat komponen dapat digunakan kembali tanpa perlu menulis ulang kode yang ada.
JSX adalah ekstensi sintaksis untuk JavaScript yang ditulis untuk digunakan dengan React yang terlihat seperti HTML, tetapi sebenarnya adalah file JavaScript yang perlu dikompilasi, atau diterjemahkan ke dalam JavaScript reguler.
DOM Virtual: DOM adalah singkatan Dari Model Objek Dokumen dan mewakili UI aplikasi Anda. Setiap kali status UI aplikasi Anda berubah, DOM akan diperbarui untuk mewakili perubahan. Ketika DOM sering diperbarui, performa menjadi lambat. Virtual DOM hanya merupakan representasi visual dari DOM, jadi ketika status aplikasi berubah, DOM virtual diperbarui daripada DOM nyata, mengurangi biaya performa. Ini adalah representasi objek DOM, seperti salinan ringan.
Tampilan: adalah apa yang dilihat pengguna dirender di browser. Di React, tampilan terkait dengan konsep elemen penyajian yang Anda inginkan untuk dilihat pengguna di layar mereka.
Status: mengacu pada data yang disimpan oleh tampilan yang berbeda. Status biasanya akan mengandalkan siapa pengguna dan apa yang dilakukan pengguna. Misalnya, masuk ke situs web dapat menunjukkan profil pengguna Anda (tampilan) dengan nama (status) Anda. Data status akan berubah berdasarkan pengguna, tetapi tampilan akan tetap sama. Status digunakan untuk mencapai sebagian besar interaktivitas pengguna dengan aplikasi.
Alat Peraga Komponen: adalah cara bagi komponen induk untuk meneruskan beberapa informasi sebagai nilai atau data (termasuk objek, array, dan fungsi) ke komponen turunannya. Alat peraga bersifat baca-saja dan tidak dapat diperbarui oleh komponen turunan.

Coba gunakan React di Visual Studio Code

Ada banyak cara untuk membuat aplikasi dengan React (lihat Gambaran Umum React misalnya). Tutorial ini akan membahas cara menggunakan vite untuk meneruskan penyiapan cepat untuk aplikasi React yang berfungsi sehingga Anda dapat melihatnya berjalan dan fokus pada bereksperimen dengan kode, belum menyangkut diri Anda dengan alat build.

Gunakan vite pada Windows atau WSL (lihat prasyarat di atas) untuk membuat proyek baru: npm create vite@latest hello-world -- --template react
Ubah direktori sehingga Anda berada di dalam folder untuk aplikasi baru Anda: cd hello-world, instal dependensi: npm install lalu mulai server pengembangan lokal Anda: npm run dev

Aplikasi React Halo Dunia baru Anda akan mengkompilasi dan membuka browser web default Anda untuk menunjukkan bahwa aplikasi tersebut berjalan di http://localhost:5173.
Berhenti menjalankan aplikasi React Anda (Ctrl+c) dan buka file kode di Visual Studio Code dengan memasukkan: code .

Temukan file src/App.jsx dan temukan bagian header yang berbunyi:

<p>Edit <code>src/App.jsx</code> and save to test HMR</p>

Ubah menjadi baca:

<p>Hello World! This is my first React app.</p>

Buka jendela terminal Anda dan mulai server pengembangan lokal Anda: npm run dev atau Anda dapat menggunakan terminal Visual Studio Code terintegrasi (Ctrl + ') dan mulai server pengembangan Anda dari sana.

Sepanjang pengembangan aplikasi React Anda, Anda dapat menjaga server pengembangan lokal Anda tetap berjalan dan semua perubahan akan segera dirender di http://localhost:5173 browser Anda.

Struktur file aplikasi

Struktur file intial terlihat seperti

hello-world
├── node_modules 
├── README.md 
├── index.html
├── package-lock.json
├── package.json
├── public
│   └── vite.svg
├── src
│   ├── App.css
│   ├── App.jsx
│   ├── assets
│   │   └── react.svg
│   ├── index.css
│   └── main.jsx
└── vite.config.js

Sebagai permulaan, ini adalah file dan folder penting yang perlu Anda ketahui.

index.html adalah file di mana Vite menyuntikkan kode Anda dari src folder untuk browser Anda untuk menjalankannya. File ini tidak boleh diedit kecuali untuk mengubah judul aplikasi React Anda.

Folder src adalah tempat kode sumber aplikasi React Anda berada. Ini adalah tempat Anda membuat komponen kustom, file CSS, dan file kode lainnya yang Anda butuhkan untuk membangun aplikasi Anda. File-file ini diproses oleh alat build Vite untuk mengurai dan membangunnya untuk membuat proyek React akhir Anda.

Folder public berisi semua file statis Anda yang akan dilayani langsung ke browser Anda. File-file ini tidak diproses oleh Vite.

Coba gunakan React dengan API

Menggunakan Halo Dunia yang sama! aplikasi yang Anda buat dengan React dan diperbarui dengan Visual Studio Code, mari kita coba tambahkan panggilan API untuk menampilkan beberapa data.

Mari kita mulai dari awal. Kami akan menghapus hampir semua kode boilerplate yang disediakan oleh Vite dan hanya menyimpan kode kami dari langkah sebelumnya.

File App.jsx Anda sekarang akan terlihat seperti ini:
```
import "./App.css";

function App() {
  return (
    <>
      <p>Hello world! This is my first React app.</p>
    </>
  );
}

export default App;
```
Selanjutnya, mari kita atur status lokal tempat kita dapat menyimpan data dari API. Status adalah tempat kita dapat menyimpan data yang akan digunakan dalam tampilan.

Untuk menambahkan status lokal, kita perlu terlebih dahulu mengimpor useState React Hook yang memungkinkan Anda menambahkan variabel status ke komponen Anda.

Kita juga perlu menginisialisasi status lokal. useState mengembalikan array dua nilai; status saat ini dan set fungsi. Kita akan memanggil status kita saat ini sebagai posts diinisialisasi sebagai array kosong yang dapat kita isi dengan data posting nanti dari API kita menggunakan fungsi .setPosts

File App.jsx Anda sekarang akan terlihat seperti ini:
```
import { useState } from "react";
import "./App.css";

function App() {
  const [posts, setPosts] = useState([]);

  return (
    <>
      <p>Hello world! This is my first React app.</p>
    </>
  );
}

export default App;
```

Untuk memanggil API dengan data yang akan digunakan di aplikasi React, kami akan menggunakan metode .fetch JavaScript. API yang akan kami sebut adalah JSONPlaceholder, API gratis untuk pengujian dan prototipe yang melayani data tempat penampung palsu dalam format JSON.

Kami menggunakan useEffect React Hook untuk memperbarui posts status dengan menggunakan fungsi yang ditetapkan.

import { useState, useEffect } from "react";
import "./App.css";

function App() {
  const [posts, setPosts] = useState([]);

  useEffect(() => {
    const url = "https://jsonplaceholder.typicode.com/albums/1/photos";
    fetch(url)
      .then((response) => response.json())
      .then((data) => setPosts(data));
  }, []);

  return (
    <>
      <p>Hello world! This is my first React app.</p>
    </>
  );
}

export default App;

Mari kita lihat jenis data apa yang telah disimpan API dalam status kita posts . Di bawah ini adalah beberapa konten file JSON API palsu. Kita dapat melihat format data yang tercantum dalam, menggunakan kategori: "albumId", "id", "title", "url", dan "thumbnailUrl".

[
  {
    "albumId": 1,
    "id": 1,
    "title": "accusamus beatae ad facilis cum similique qui sunt",
    "url": "https://via.placeholder.com/600/92c952",
    "thumbnailUrl": "https://via.placeholder.com/150/92c952"
  },
  {
    "albumId": 1,
    "id": 2,
    "title": "reprehenderit est deserunt velit ipsam",
    "url": "https://via.placeholder.com/600/771796",
    "thumbnailUrl": "https://via.placeholder.com/150/771796"
  }
]

Untuk menampilkan data API, kita sekarang perlu menambahkan sedikit kode JSX di dalam pernyataan yang dirender return() . Kami akan menggunakan map() metode untuk menampilkan data kami dari posts objek tempat kami menyimpannya sebagai kunci. Setiap postingan akan menampilkan header dengan "ID #" lalu nilai kunci post.id + nilai kunci post.title dari data JSON kami. Diikuti dengan isi yang menampilkan gambar berdasarkan nilai kunci thumbnailUrl.
```
// rest of the code 
  return (
    <article>
      <h1>Posts from our API call</h1>
      {posts.map((post) => (
        <article key={post.id}>
          <h2>ID #{post.id} {post.title}</h2>
          <img src={post.thumbnailUrl} />
        </article>
      ))}
    </article>
  );
}

export default App;
```

Sumber Daya Tambahan:

Dokumen Resmi React menawarkan semua informasi terbaru dan terbaru tentang React
Add-on Microsoft Edge untuk Alat Pengembang React: Menambahkan dua tab ke alat pengembangan Microsoft Edge Anda untuk membantu pengembangan React Anda: Komponen dan Profiler.
Jalur pembelajaran React berisi modul kursus online untuk membantu Anda memulai dasar-dasarnya.

Share via

Tutorial: Bereaksi pada Windows untuk pemula

Prasyarat

Beberapa istilah dan konsep dasar

Coba gunakan React di Visual Studio Code

Struktur file aplikasi

Coba gunakan React dengan API

Sumber Daya Tambahan:

Saran dan Komentar

Sumber Daya Tambahan: