Memulai: optimalkan aplikasi React Anda

Ingin membuat situs React Anda secepat dan semudah mungkin? Anda datang ke tempat yang tepat!

Djirdeh Houssein

React adalah library open source yang mempermudah pembuatan UI. Jalur pembelajaran ini akan mencakup berbagai API dan alat dalam ekosistem yang harus Anda pertimbangkan untuk digunakan guna meningkatkan performa dan kegunaan aplikasi Anda.

Panduan ini akan menunjukkan cara menyiapkan dan menjalankan aplikasi React. Setiap panduan lain di bagian ini akan membahas topik untuk mengoptimalkan kecepatan atau aksesibilitas aplikasi React.

Mengapa hal ini bermanfaat?

Ada banyak konten yang menjelaskan cara membangun aplikasi yang cepat dan andal, tetapi tidak banyak yang menunjukkan cara membangun aplikasi React yang cepat dan andal. Panduan ini membahas semua ini dari perspektif aplikasi React yang hanya menyebutkan library, API, dan fitur khusus untuk ekosistem React.

Apa yang akan Anda pelajari?

Tutorial di jalur pembelajaran ini tidak berfokus pada:

  • Cara menggunakan React
  • Cara kerja React di balik layar

Meskipun kedua konsep ini akan dibahas jika diperlukan, semua panduan dan codelab di bagian ini akan berfokus pada cara membuat situs React yang cepat dan dapat diakses. Oleh karena itu, diperlukan pengetahuan dasar tentang React.

Membuat Aplikasi React

Create React App (CRA) adalah cara termudah untuk mulai membangun aplikasi React. Library ini menyediakan penyiapan default dengan sejumlah fitur inti yang disertakan, termasuk sistem build yang berisi pemaket modul (webpack) dan transpiler (Babel).

Pada shell command line, Anda hanya perlu menjalankan perintah berikut untuk membuat aplikasi baru:

npx create-react-app app-name

Setelah perintah selesai dijalankan, Anda dapat membuka dan menjalankan aplikasi dengan perintah berikut:

cd new-app
npm start

Penyematan berikut menunjukkan struktur direktori dan halaman web sebenarnya dari aplikasi CRA yang baru di-bootstrap.

Ada beberapa file konfigurasi dan skrip build yang digunakan CRA untuk menyiapkan proses build webpack dan Babel yang mencakup penyiapan Jest dasar untuk pengujian. Untuk memudahkan pengguna, file ini disembunyikan dan tidak dapat diakses hingga Anda mengeluarkannya dari CRA. Sebaiknya jangan lakukan ejecting jika memungkinkan, karena ini berarti menjadikan semua file konfigurasi ini sebagai kode sumber Anda sendiri, yang dapat menjadi sulit untuk dikelola.

Struktur direktori aplikasi CRA baru hanya berisi file yang benar-benar perlu Anda modifikasi agar berfungsi pada aplikasi Anda. Dokumentasi CRA menjelaskan hal ini secara mendetail.

Apa langkah selanjutnya?

Setelah Anda mengetahui cara mulai mem-build Aplikasi Create React, pelajari cara meningkatkan performa dan aksesibilitas aplikasi dengan semua panduan di jalur pembelajaran ini: