Membuat antarmuka pengguna dari komponen
React memungkinkan Anda membangun antarmuka penguna dari bagian-bagian yang disebut komponen. Buat komponen React Anda sendiri seperti , , dan . Kemudian gabungkan komponen-komponen tersebut ke dalam seluruh layar, halaman, dan aplikasi.
Baik Anda bekerja sendiri atau dengan ribuan pengembang lain, menggunakan React akan terasa sama. React dirancang untuk memungkinkan Anda menggabungkan komponen secara mulus yang dirancang oleh pengembang independen, tim, dan organisasi.
Menulis komponen dengan kode dan markup
Komponen React adalah fungsi JavaScript. Ingin menampilkan beberapa konten secara kondisional? Gunakan pernyataan . Menampilkan sebuah daftar? Gunakan fungsi ke sebuah senarai (array). Belajar React adalah belajar pemrograman.
Sintaksis markup ini disebut dengan JSX. Ini adalah ekstensi sintaksis JavaScript yang dipopulerkan oleh React. Menempatkan markup JSX dekat dengan logika rendering yang terkait membuat komponen React mudah untuk dibuat, dipelihara, dan dihapus.
Menambahkan interaktivitas di mana pun Anda membutuhkannya
Komponen React menerima data dan mengembalikan apa yang seharusnya muncul di layar. Anda dapat memberikan data baru sebagai respons dari sebuah interaksi, seperti ketika pengguna mengetikkan sebuah input. React kemudian akan memperbarui layar agar sesuai dengan data baru.
Anda tidak perlu membangun seluruh halaman Anda di React. Tambahkan React ke halaman HTML yang sudah ada, dan render komponen React interaktif di mana saja di halaman tersebut.
Pengembangan full-stack dengan kerangka kerja (framework)
React adalah sebuah pustaka. React memungkinkan Anda untuk menyatukan komponen-komponen, tetapi tidak menentukan bagaimana cara melakukan routing dan pengambilan data. Untuk membangun aplikasi secara keseluruhan dengan React, kami merekomendasikan kerangka kerja full-stack React seperti Next.js atau Remix.
confs/[slug].js
import { db } from './database.js';
import { Suspense } from 'react';
async function ConferencePage({ slug }) {
const conf = await db.Confs.find({ slug });
return (
<ConferenceLayout conf={conf}>
<Suspense fallback={<TalksLoading />}>
<Talks confId={conf.id} />
</Suspense>
</ConferenceLayout>
);
}
async function Talks({ confId }) {
const talks = await db.Talks.findAll({ confId });
const videos = talks.map(talk => talk.video);
return <SearchableVideoList videos={videos} />;
}
19 Video
React juga merupakan sebuah arsitektur. Kerangka kerja yang mengimplementasikannya memungkinkan Anda mengambil data dalam komponen asinkron (asynchronous) yang berjalan di server atau bahkan saat pembuatan. Baca data dari berkas atau database, dan oper data tersebut ke komponen interaktif Anda.
Gunakan yang terbaik untuk setiap platform
Pengguna aplikasi Anda menyukai aplikasi web dan aplikasi native karena berbagai alasan. React memungkinkan Anda membangun aplikasi web dan aplikasi native menggunakan keterampilan yang sama. React memanfaatkan kekuatan unik dari setiap platform untuk membuat antarmuka Anda terasa mulus di setiap platform.
Tetap dekat dengan web
Orang-orang mengharapkan halaman aplikasi web dimuat dengan cepat. Di server, React memungkinkan Anda untuk mulai melakukan streaming HTML ketika Anda masih mengambil data, mengisi sisa konten secara progresif sebelum koda JavaScript dimuat. Pada client, React dapat menggunakan API web standar untuk menjaga UI Anda tetap responsif bahkan di tengah-tengah proses pe-render-an.
Rangkul pengembangan native
Orang-orang mengharapkan aplikasi native terlihat dan terasa seperti platform mereka. React Native dan Expo memungkinkan Anda membuat aplikasi dengan React untuk Android, iOS, dan lainnya. Aplikasi-aplikasi tersebut terlihat dan terasa native karena UI mereka benar-benar native. Ini bukan web view—komponen React Anda me-render view Android dan iOS asli yang disediakan oleh platform masing-masing.
Dengan React, Anda dapat menjadi seorang pengembang web dan pengembang native. Tim Anda dapat meluncurkan aplikasi ke banyak platform tanpa mengorbankan pengalaman pengguna (user experience, UX). Organisasi Anda dapat menjembatani silo platform, dan membentuk tim yang memiliki seluruh fitur secara end-to-end.
Upgrade ketika fitur baru telah siap
React melakukan pendekatan perubahan dengan hati-hati. Setiap commit yang dilakukan React diuji pada lapisan aplikasi sangat penting dengan lebih dari satu miliar pengguna. Lebih dari 100.000 komponen React di Meta membantu memvalidasi setiap strategi migrasi.
Tim React selalu meneliti bagaimana cara meningkatkan React. Beberapa penelitian membutuhkan waktu bertahun-tahun untuk membuahkan hasil. React memiliki standar yang tinggi untuk membawa ide penelitian ke dalam lingkungan produksi. Hanya pendekatan yang telah terbukti yang akan menjadi bagian dari React.
Bergabung dalam komunitas beranggotakan jutaan orang
Anda tidak sendirian. Dua juta pengembang dari seluruh dunia mengunjungi dokumentasi React setiap bulannya. React adalah pustaka yang dapat disetujui oleh semua orang dan tim.
Inilah mengapa React lebih dari sekedar pustaka, arsitektur, atau bahkan sebuah ekosistem. React adalah sebuah komunitas. Ini adalah tempat di mana Anda dapat meminta bantuan, menemukan peluang kerja, dan bertemu teman baru. Anda akan bertemu dengan para pengembang dan desainer, pemula dan ahli, peneliti dan seniman, pengajar dan murid. Latar belakang kita mungkin sangat berbeda, tetapi React memungkinkan kita semua membuat antarmuka pengguna bersama-sama.