Memulai: optimalkan aplikasi React Anda

Ingin membuat situs React Anda secepat dan semudah mungkin diakses? Anda berada di tempat yang tepat.

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

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 mem-build aplikasi yang cepat dan andal, tetapi tidak banyak yang menunjukkan cara mem-build aplikasi React yang cepat dan andal. Panduan ini mencakup 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 mem-build situs React yang cepat dan dapat diakses. Oleh karena itu, pengetahuan dasar tentang React diperlukan.

Create React App

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

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

npx create-react-app app-name

Setelah perintah selesai dieksekusi, 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 menyertakan penyiapan Jest dasar untuk pengujian. Untuk mempermudah pengguna, file ini disembunyikan dan tidak dapat diakses hingga Anda mengeluarkannya dari CRA. Sebaiknya hindari mengeluarkan kartu jika memungkinkan, karena hal ini berarti Anda harus menangani semua file konfigurasi ini sebagai kode sumber Anda sendiri, yang dapat menjadi sulit dikelola.

Struktur direktori aplikasi CRA baru hanya berisi file yang sebenarnya perlu Anda ubah untuk mengerjakan aplikasi. Dokumentasi CRA menjelaskan hal ini secara mendetail.

Apa langkah selanjutnya?

Setelah Anda mengetahui cara memulai pembuatan Create React App, pelajari cara meningkatkan performa dan aksesibilitas aplikasi dengan semua panduan dalam jalur pembelajaran ini: