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.
Go full-stack
with a framework
React is a library. It lets you put components together, but it doesn’t prescribe how to do routing and data fetching. To build an entire app with React, we recommend a full-stack React framework like Next.js or 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 is also an architecture. Frameworks that implement it let you fetch data in asynchronous components that run on the server or even during the build. Read data from a file or a database, and pass it down to your interactive components.
Use the best from every platform
People love web and native apps for different reasons. React lets you build both web apps and native apps using the same skills. It leans upon each platform’s unique strengths to let your interfaces feel just right on every platform.
Stay true to the web
People expect web app pages to load fast. On the server, React lets you start streaming HTML while you’re still fetching data, progressively filling in the remaining content before any JavaScript code loads. On the client, React can use standard web APIs to keep your UI responsive even in the middle of rendering.
Go truly native
People expect native apps to look and feel like their platform. React Native and Expo let you build apps in React for Android, iOS, and more. They look and feel native because their UIs are truly native. It’s not a web view—your React components render real Android and iOS views provided by the platform.
With React, you can be a web and a native developer. Your team can ship to many platforms without sacrificing the user experience. Your organization can bridge the platform silos, and form teams that own entire features end-to-end.
Upgrade when the future is ready
React approaches changes with care. Every React commit is tested on business-critical surfaces with over a billion users. Over 100,000 React components at Meta help validate every migration strategy.
The React team is always researching how to improve React. Some research takes years to pay off. React has a high bar for taking a research idea into production. Only proven approaches become a part of React.
Join a community
of millions
You’re not alone. Two million developers from all over the world visit the React docs every month. React is something that people and teams can agree on.
This is why React is more than a library, an architecture, or even an ecosystem. React is a community. It’s a place where you can ask for help, find opportunities, and meet new friends. You will meet both developers and designers, beginners and experts, researchers and artists, teachers and students. Our backgrounds may be very different, but React lets us all create user interfaces together.