Ingin membuat situs React Anda secepat dan semudah mungkin? Anda datang ke 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 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 membangun aplikasi yang cepat dan andal, tetapi tidak banyak konten yang menunjukkan cara membangun 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
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, pengetahuan dasar tentang React diperlukan.
Membuat Aplikasi React
Create React App (CRA) adalah cara termudah untuk mulai membangun aplikasi React. Solusi 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 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 mencakup penyiapan Jest dasar untuk pengujian. Untuk menyederhanakan pengguna, file ini disembunyikan dan tidak dapat diakses hingga Anda mengeluarkannya dari CRA. Sebaiknya hindari eject jika memungkinkan, karena ini berarti mengambil semua file konfigurasi ini sebagai kode sumber Anda sendiri, yang mungkin akan sulit dikelola.
Struktur direktori aplikasi CRA baru hanya berisi file yang benar-benar perlu Anda modifikasi agar dapat berfungsi pada aplikasi Anda. Dokumentasi CRA menjelaskan hal ini secara mendetail.
Apa selanjutnya?
Setelah mengetahui cara mulai mem-build Aplikasi Create React, pelajari cara meningkatkan performa dan aksesibilitas aplikasi Anda dengan semua panduan dalam jalur pembelajaran ini: