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 membahas semua hal ini dari perspektif aplikasi React yang hanya menyebutkan library, API, dan fitur khusus untuk ekosistem React.
Apa yang akan Anda pelajari?
Tutorial dalam 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 file 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: