Memulai: optimalkan aplikasi React Anda

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

React adalah library open source yang membuat UI semuanya. Jalur pembelajaran ini akan membahas berbagai API dan alat dalam yang harus Anda pertimbangkan untuk digunakan untuk meningkatkan kinerja dan kegunaan aplikasi Anda.

Panduan ini akan menunjukkan cara menyiapkan dan menjalankan aplikasi React. Semua 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 solusi dengan cepat dan andal aplikasi, tetapi tidak banyak yang menunjukkan cara membangun aplikasi yang cepat dan andal React menggunakan berbagai aplikasi obrolan. Panduan ini membahas semua ini dari perspektif React aplikasi yang hanya menyediakan library, API, dan fitur khusus yang disebut ekosistem React.

Apa yang akan Anda pelajari?

Tutorial di jalur pembelajaran ini tidak berfokus pada:

  • Cara menggunakan React
  • Cara kerja React

Meskipun kedua konsep ini akan dibahas jika diperlukan, semua panduan dan codelab di bagian ini akan berfokus pada cara membangun solusi dengan cepat dan untuk situs React yang dapat diakses. Karena alasan ini, pengetahuan dasar tentang React wajib.

Membuat Aplikasi React

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

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

npx create-react-app app-name

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

cd new-app
npm start

Sematan berikut menunjukkan struktur direktori dan laman web aktual dari aplikasi CRA bootstrap.

Ada beberapa file konfigurasi dan skrip {i>build<i} yang digunakan CRA untuk menyiapkan proses pembuatan webpack dan Babel yang mencakup basis Jest untuk pengujian. Untuk mempermudah , file ini disembunyikan dan tidak dapat diakses sampai Anda mengeluarkannya dari CRA. Ini sebaiknya hindari {i>ejecting<i} bila memungkinkan, karena ini berarti mengambil file konfigurasi ini sebagai kode sumber Anda sendiri, yang bisa menjadi sulit untuk dikelola.

Struktur direktori aplikasi CRA baru hanya berisi file yang yang perlu Anda modifikasi agar aplikasi Anda berfungsi. Tujuan Dokumentasi CRA menjelaskan hal ini secara rinci.

Apa langkah selanjutnya?

Setelah Anda mengetahui cara mulai membangun Aplikasi Create React, pelajari caranya untuk meningkatkan performa dan aksesibilitas aplikasi Anda dengan semua panduan dalam jalur pembelajaran ini: