Share via

Gambaran umum react

  • Artikel

Apa itu React JS?

React adalah pustaka JavaScript sumber terbuka untuk membangun antarmuka pengguna ujung depan. Tidak seperti pustaka JavaScript lainnya yang menyediakan kerangka kerja aplikasi lengkap, React hanya berfokus pada pembuatan tampilan aplikasi melalui unit yang dienkapsulasi yang disebut komponen yang mempertahankan status dan menghasilkan elemen UI. Anda dapat menempatkan komponen individual di halaman web atau hierarki sarang komponen untuk membuat UI yang kompleks.

Komponen React biasanya ditulis dalam JavaScript dan JSX (JavaScript XML) yang merupakan ekstensi JavaScript yang terlihat seperti HTML, tetapi memiliki beberapa fitur sintaks yang memudahkan untuk melakukan tugas umum seperti mendaftarkan penanganan aktivitas untuk elemen UI. Komponen React mengimplementasikan metode render , yang mengembalikan JSX yang mewakili UI komponen. Dalam aplikasi web, kode JSX yang dikembalikan oleh komponen diterjemahkan ke dalam HTML yang mematuhi browser yang dirender di browser.

Apakah React berfungsi di Windows?

Ya. Windows mendukung dua lingkungan berbeda untuk mengembangkan aplikasi React:

Apa yang dapat Anda lakukan dengan React?

Windows mendukung berbagai skenario untuk pengembang React, termasuk:

  • Aplikasi web dasar: Jika Anda baru mengenal React dan terutama tertarik untuk mempelajari tentang membangun aplikasi web dasar dengan React, kami sarankan Anda menginstal create-react-app langsung di Windows. Jika Anda berencana untuk membuat aplikasi web yang akan disebarkan untuk produksi, Anda mungkin ingin mempertimbangkan untuk menginstal create-react-app di Subsistem Windows untuk Linux (WSL) , untuk kecepatan performa yang lebih baik, kompatibilitas panggilan sistem, dan keselarasan antara lingkungan pengembangan lokal dan lingkungan penyebaran Anda (yang sering merupakan server Linux).

  • Aplikasi Halaman Tunggal (SPAs): Ini adalah situs web yang berinteraksi dengan pengguna dengan menulis ulang halaman web saat ini secara dinamis dengan data baru dari server, bukan default browser memuat seluruh halaman baru. Jika Anda ingin membangun situs web SPA berorientasi konten statis, sebaiknya instal Gatsby di WSL. Jika Anda ingin membangun situs web SPA yang dirender server dengan backend Node.js, sebaiknya instal Next.js di WSL. (Meskipun Next.js sekarang juga menawarkan penyajian file statis).

  • Aplikasi desktop asli: React Native untuk Windows + macOS memungkinkan Anda membangun aplikasi desktop asli dengan JavaScript yang berjalan di berbagai jenis PC desktop, laptop, tablet, Xbox, dan perangkat Mixed Reality. Ini mendukung SDK Windows dan macOS SDK.

  • Aplikasi seluler asli: React Native adalah cara lintas platform untuk membuat aplikasi Android dan iOS dengan JavaScript yang dirender ke kode UI platform asli. Ada dua cara utama untuk menginstal React Native -- Expo CLI dan React Native CLI. Ada perbandingan yang baik dari keduanya di StackOverflow. Expo memiliki aplikasi klien untuk perangkat seluler iOS dan Android untuk menjalankan dan menguji aplikasi Anda. Untuk petunjuk tentang mengembangkan aplikasi Android menggunakan Windows, React Native, dan Expo CLI, lihat React Native untuk pengembangan Android di Windows.

Opsi penginstalan

Ada beberapa cara berbeda untuk menginstal React bersama dengan toolchain terintegrasi yang paling sesuai untuk skenario kasus penggunaan Anda. Berikut adalah beberapa yang paling populer.

Alat react

Saat menulis komponen React sederhana di editor teks biasa adalah pengenalan yang baik untuk React, kode yang dihasilkan dengan cara ini massal, sulit untuk dipertahankan dan disebarkan, dan lambat. Ada beberapa tugas umum yang perlu dilakukan aplikasi produksi. Tugas-tugas ini ditangani oleh kerangka kerja JavaScript lain yang diambil oleh aplikasi sebagai dependensi. Tugas-tugas ini meliputi:

  • Kompilasi - JSX adalah bahasa yang umum digunakan untuk aplikasi React, tetapi browser tidak dapat memproses sintaks ini secara langsung. Sebaliknya, kode perlu dikompilasi ke dalam sintaks JavaScript standar dan disesuaikan untuk browser yang berbeda. Babel adalah contoh kompilator yang mendukung JSX.
  • Bundling - Karena performa adalah kunci untuk aplikasi web modern, penting bahwa JavaScript aplikasi hanya menyertakan kode yang diperlukan untuk aplikasi dan digabungkan ke dalam file sesedikit mungkin. Bunder, seperti webpack melakukan tugas ini untuk Anda.
  • Manajemen paket - Manajer paket memudahkan untuk menyertakan fungsionalitas paket pihak ketiga di aplikasi Anda, termasuk memperbaruinya dan mengelola dependensi. Manajer paket yang umum digunakan termasuk Yarn dan npm.

Bersama-sama, rangkaian kerangka kerja yang membantu Anda membuat, membangun, dan menyebarkan aplikasi Anda disebut toolchain. Lingkungan pengembangan yang mudah diatur untuk react yang menggunakan toolchain ini adalah Vite yang menghasilkan aplikasi satu halaman sederhana untuk Anda. Satu-satunya pengaturan yang diperlukan untuk menggunakan Vite adalah Node.js.

Direktori komponen React Native

Komponen yang dapat digunakan dalam aplikasi React Native mencakup hal berikut:

  • Komponen inti - Komponen yang dikembangkan dan didukung sebagai bagian dari kerangka kerja React Native.
  • Komponen komunitas - Komponen yang dikembangkan dan dirawat oleh masyarakat.
  • Komponen asli - Komponen yang Anda buat sendiri, menggunakan kode platform-asli, dan mendaftar agar dapat diakses dari React Native.

React Native Directory menyediakan daftar pustaka komponen yang dapat difilter berdasarkan platform target.

Opsi toolchain Fullstack React

React adalah pustaka, bukan kerangka kerja, jadi mungkin memerlukan alat tambahan untuk membuat aplikasi yang lebih kompleks. Selain menggunakan React, Anda mungkin ingin mempertimbangkan untuk menggunakan:

  • Manajer paket: Dua manajer paket populer untuk React adalah npm (yang disertakan dengan NodeJS) dan yarn. Keduanya mendukung pustaka luas paket yang terawat dengan baik yang dapat diinstal.
  • React Router: kumpulan komponen navigasi yang dapat membantu Anda dengan hal-hal seperti URL bookmarkable untuk aplikasi web Anda atau cara yang dapat dikomposisikan untuk menavigasi di React Native. React benar-benar hanya berkaitan dengan manajemen status dan penyajian status tersebut ke DOM, jadi membuat aplikasi React biasanya memerlukan penggunaan pustaka perutean seperti React Router.
  • Redux: Kontainer status yang dapat diprediksi yang membantu arsitektur aliran data. Kemungkinan bukan sesuatu yang Anda butuhkan sampai Anda masuk ke pengembangan React yang lebih canggih. Untuk mengutip Dan Abramov, salah satu pembuat Redux: "Jangan gunakan Redux sampai Anda memiliki masalah dengan Vanilla React."
  • Webpack: Alat build yang memungkinkan Anda mengkompilasi modul JavaScript, juga dikenal sebagai bunder modul. Saat webpack memproses aplikasi Anda, webpack secara internal membangun grafik dependensi yang memetakan setiap modul yang dibutuhkan proyek Anda dan menghasilkan satu atau beberapa bundel.
  • Uglify: Pengurai JavaScript, minifier, kompresor, dan toolkit pengurai.
  • Babel: Kompilator JavaScript terutama digunakan untuk mengonversi kode ECMAScript 2015+ menjadi versi JavaScript yang kompatibel mundur di browser atau lingkungan saat ini dan yang lebih lama. Ini juga dapat membantu untuk menggunakan babel-preset-env sehingga Anda tidak perlu mengubah sintaks micromanage atau polifill browser dan dapat menentukan browser internet apa yang akan didukung.
  • ESLint: Alat untuk mengidentifikasi dan melaporkan pola yang ditemukan dalam kode JavaScript yang membantu Anda membuat kode lebih konsisten dan menghindari bug.
  • Enzim: Utilitas pengujian JavaScript untuk React yang memudahkan pengujian output Komponen React Anda.
  • Jest: Kerangka kerja pengujian yang disertakan dalam paket create-react-app untuk membantu menulis pengujian JavaScript idiomatik.
  • Mocha: Kerangka kerja pengujian yang berjalan pada Node.js dan di browser untuk membantu pengujian, pelaporan, dan pemetaan pengecualian asinkron ke kasus pengujian yang benar.

Kursus dan tutorial React

Berikut adalah beberapa tempat yang direkomendasikan untuk mempelajari Aplikasi sampel React dan build:

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.