Membuat Sebuah Aplikasi React Baru

Gunakan toolchains yang terintegrasi untuk pengalaman pengguna dan pengembangan terbaik.

Halaman ini menjelaskan beberapa toolchains yang bisa membantu menyelesaikan tugas seperti:

• Penskalaan ke banyak file dan komponen.
• Penggunaan library pihak ketiga dari npm.
• Mendeteksi kesalahan umum lebih awal.
• Pengeditan CSS dan JS secara langsung dalam tahap pengembangan.
• Mengoptimalkan keluaran untuk tahap produksi.

Toolchains yang direkomendasikan pada halaman ini tidak membutuhkan konfigurasi untuk memulai.

Anda Mungkin Tidak Butuh Toolchains

Jika Anda tidak mengalami masalah yang dijelaskan di atas atau belum nyaman menggunakan tools dari JavaScript, pertimbangkan untuk menambahkan React sebagai tag <script> biasa pada halaman HTML. Anda dapat melakukan itu dengan JSX.

Cara tersebut juga merupakan cara termudah mengintegrasikan React ke dalam situs yang sudah ada. Anda bisa menambah Toolchains yang lebih besar kapanpun Anda inginkan jika Anda merasa itu dapat membantu!

Toolchains Yang Direkomendasikan

Tim React sangat merekomendasikan solusi ini:

• Jika Anda sedang belajar React atau membuat aplikasi single-page baru, cobalah Create React App.
• Jika Anda sedang membangun sebuah situs yang di-render menggunakan server Node.js, cobalah Next.js.
• Jika Anda sedang membangun sebuah situs statis yang berorientasi pada konten, cobalah Gatsby.
• Jika Anda sedang membangun sebuah library komponen atau menggabungkannya dengan basis kode yang sudah ada, cobalah toolchains yang lebih fleksibel.

Create React App

Create React App mengatur lingkungan pengembangan Anda sehingga, Anda dapat menggunakan fitur terbaru JavaScript, memberikan pengalaman pengembangan yang menyenangkan, dan mengoptimalkan aplikasi Anda untuk lingkungan produksi. Anda membutuhkan Node >= 8.10 dan npm >= 5.6 di komputer Anda. Untuk membuat suatu proyek baru, jalankan:

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

Catatan

npx pada baris pertama bukanlah salah ketik —itu adalah package runner tool yang tersedia bersamaan dengan npm 5.2+.

Create React App tidak mengatur bagian backend ataupun basis data; tapi hanya membuat sebuah frontend build pipeline. Sehingga, Anda dapat menggunakan aplikasi Anda dengan backend yang Anda inginkan. Create React App menggunakan Babel dan Webpack, tapi Anda tidak perlu tahu tentang semua itu.

Ketika Anda siap melanjutkan ke tahap produksi, menjalankan npm run build akan membuat build yang teroptimasi dari aplikasi Anda dalam folder build. Anda dapat belajar lebih dalam mengenai Create React App dari README dan Petunjuk Pengguna Create React App.

Next.js

Next.js adalah framework populer dan ringan untuk aplikasi statis dan aplikasi yang di-render di server. Next.js dibangun menggunakan React. Framework ini sudah mengatasi masalah styling dan routing, dan mengasumsikan bahwa Anda menggunakan Node.js sebagai lingkungan server Anda.

Pelajari Next.js dari dokumentasi resminya.

Gatsby

Gatsby adalah cara terbaik untuk membuat situs statis dengan menggunakan React. Gatsby membuat Anda dapat menggunakan komponen React, namun memberikan keluaran berupa HTML yang telah di-render dan CSS untuk menjamin kecepatan waktu pemuatan.

Pelajari Gatsby dari dokumentasi resminya dan galeri starter kit.

Toolchains Yang Lebih Fleksibel

Toolchains berikut menawarkan fleksibilitas dan berbagai pilihan. Kami merekomendasikan ini untuk pengguna yang lebih berpengalaman:

• Neutrino mengombinasikan keunggulan Webpack dengan kemudahan pengaturan awal, termasuk pengaturan awal Aplikasi React dan komponen React.
• nwb sangat baik dalam memublikasikan komponen React untuk npm. Toolchains ini juga dapat digunakan untuk membuat aplikasi React.
• Nx adalah sebuah toolkit untung pengembangan full-stack di dalam monorepo, dengan dukungan untuk React, Next.js, Express, dan lebih banyak lagi.
• Parcel adalah bundler aplikasi web yang cepat, tanpa konfigurasi, dan dapat bekerja dengan React.

Membuat Toolchains dari Awal

Sebuah Toolchains yang dibuat menggunakan JavaScript biasanya terdiri dari:

• Sebuah package manager, seperti Yarn atau npm. Package manager memberikan keuntungan berupa ekosistem yang luas dari paket-paket pihak ketiga, dan Anda dapat memasang atau memperbarui paket tersebut dengan mudah.
• Sebuah bundler, seperti Webpack atau Parcel. Bundler membantu Anda menuliskan kode modular dan menyatukannya menjadi paket-paket kecil untuk mengoptimalkan waktu pemuatan.
• Sebuah compiler seperti Babel. Compiler membantu Anda menulis kode JavaScript yang lebih modern agar dapat bekerja pada browser yang lebih lama.

Jika Anda lebih suka membuat Toolchains JavaScript Anda sendiri dari awal, silahkan cek petunjuk ini yang membuat ulang beberapa fungsi dari Create React App.

Jangan lupa memastikan toolchains buatan Anda sudah diatur untuk tahap produksi dengan benar.