Ingin membuat situs React Anda secepat dan semudah mungkin diakses? Anda berada di tempat yang tepat.
React adalah library open source yang memudahkan pembuatan UI. Alur pembelajaran ini akan membahas berbagai API dan alat dalam ekosistem yang sebaiknya 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.
Apa manfaatnya?
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 hal tersebut 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 saat diperlukan, semua panduan dan codelab di bagian ini akan berfokus pada cara membangun situs React yang cepat dan mudah diakses. Oleh karena itu, pengetahuan dasar tentang React diperlukan.
Membuat Aplikasi React
Create React App (CRA) adalah cara termudah untuk mulai membangun aplikasi React. Alat 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 keluar dari CRA. Sebaiknya hindari ejecting jika memungkinkan, karena ini berarti mengambil 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 ubah untuk mengerjakan aplikasi. Dokumentasi CRA menjelaskan hal ini secara mendetail.
Apa langkah selanjutnya?
Setelah Anda mengetahui cara mulai membangun Create React App, pelajari cara meningkatkan performa dan aksesibilitas aplikasi Anda dengan semua panduan dalam jalur pembelajaran ini: