React create-react-app

CODEORAYO COMMUNITY Web Development Tutorial Javascript React create-react-app

  • Post
    React create-react-app

    Memulai proyek React baru sangat rumit, dengan begitu banyak alat pembuatan. Ia menggunakan banyak dependensi, file konfigurasi, dan persyaratan lain seperti Babel, Webpack, ESLint sebelum menulis satu baris kode React. Alat CLI Buat Aplikasi React menghilangkan semua kerumitan itu dan membuat aplikasi React sederhana. Untuk ini, Anda perlu menginstal paket menggunakan NPM, dan kemudian menjalankan beberapa perintah sederhana untuk mendapatkan proyek React yang baru.

    Aplikasi create-react adalah alat yang sangat baik untuk pemula, yang memungkinkan Anda membuat dan menjalankan proyek React dengan sangat cepat. Ini tidak mengambil konfigurasi apa pun secara manual. Alat ini membungkus semua dependensi yang diperlukan seperti Webpack , Babel untuk proyek React itu sendiri dan kemudian Anda perlu fokus pada penulisan kode React saja. Alat ini menyiapkan lingkungan pengembangan, memberikan pengalaman pengembang yang sangat baik, dan mengoptimalkan aplikasi untuk produksi.

    Persyaratan

    Aplikasi Create React dikelola oleh Facebook dan dapat bekerja pada platform apa pun , misalnya, macOS, Windows, Linux, dll. Untuk membuat Proyek React menggunakan aplikasi create-react, Anda perlu menginstal hal-hal berikut di sistem Anda.

    1. Versi node> = 8.10
    2. Versi NPM> = 5.6

    Mari kita periksa versi Node dan NPM saat ini di sistem.

    Jalankan perintah berikut untuk memeriksa versi Node di prompt perintah.

    1. $ node -v

    Jalankan perintah berikut untuk memeriksa versi NPM di prompt perintah.

    1. $ npm -v

    Instalasi

    Di sini, kita akan mempelajari bagaimana kita dapat menginstal React menggunakan alat CRA . Untuk ini, kita perlu mengikuti langkah-langkah seperti yang diberikan di bawah ini.

    Instal React

    Kita dapat menginstal React menggunakan npm package manager dengan menggunakan perintah berikut. Tidak perlu khawatir tentang kerumitan instalasi React. Manajer paket npm create-react-app akan mengelola semuanya, yang diperlukan untuk proyek React.

    1. C: \ Users \ javatpoint> npm install -g create-react-app

    Buat proyek React baru

    Setelah instalasi React berhasil, kita dapat membuat proyek React baru menggunakan perintah create-react-app. Di sini, saya memilih nama “reactproject” untuk proyek saya.

    1. C: \ Users \ javatpoint> create-react-app reactproject

    CATATAN: Kami dapat menggabungkan dua langkah di atas dalam satu perintah menggunakan npx . Npx adalah alat pelari paket yang hadir dengan npm 5.2 dan versi di atasnya.

    1. C: \ Users \ javatpoint> npx create-react-app reactproject

    Perintah di atas akan membutuhkan waktu untuk menginstal React dan membuat proyek baru dengan nama “reactproject.”

    Setelah React berhasil dibuat di sistem kami. Sekarang, kita perlu menjalankan server agar kita dapat mengakses aplikasi di browser. Ketik perintah berikut di jendela terminal.

    1. $ cd Desktop
    2. $ npm mulai

    NPM adalah manajer paket yang memulai server dan mengakses aplikasi di server default http: // localhost: 3000 .

    Selanjutnya, buka proyek di Editor kode. Di sini, saya menggunakan Visual Studio Code. Struktur default proyek kami terlihat seperti gambar di bawah ini.

    Di aplikasi React, ada beberapa file dan folder di direktori root. Beberapa diantaranya adalah sebagai berikut:

    1. node_modules: Ini berisi perpustakaan React dan perpustakaan pihak ketiga lainnya yang diperlukan.
    2. publik: Ini memegang aset publik dari aplikasi. Ini berisi index.html di mana React akan me-mount aplikasi secara default pada elemen

      .

    3. src: Berisi file App.css, App.js, App.test.js, index.css, index.js, dan serviceWorker.js. Di sini, file App.js selalu bertanggung jawab untuk menampilkan layar keluaran di React.
    4. package-lock.json: Ini dihasilkan secara otomatis untuk setiap operasi di mana paket npm memodifikasi pohon node_modules atau package.json. Itu tidak bisa dipublikasikan. Ini akan diabaikan jika menemukan tempat lain selain paket tingkat atas.
    5. package.json: Ini menyimpan berbagai metadata yang diperlukan untuk proyek. Ini memberikan informasi kepada npm, yang memungkinkan untuk mengidentifikasi proyek serta menangani ketergantungan proyek.
    6. README.md: Ini menyediakan dokumentasi untuk membaca tentang topik React.

    Pengaturan Lingkungan React

    Sekarang, buka file src >> App.js dan buat perubahan yang ingin Anda tampilkan di layar. Setelah melakukan perubahan yang diinginkan, simpan file tersebut. Segera setelah kami menyimpan file, Webpack mengkompilasi ulang kode tersebut, dan halaman akan di-refresh secara otomatis, dan perubahan tercermin pada layar browser. Sekarang, kita dapat membuat komponen sebanyak yang kita inginkan, mengimpor komponen yang baru dibuat di dalam file App.js dan file itu akan dimasukkan ke dalam file index.html utama kita setelah dikompilasi oleh Webpack.

    Selanjutnya jika kita ingin membuat project untuk mode produksi, ketikkan perintah berikut. Perintah ini akan menghasilkan build produksi, yang paling optimal.

    1. $ npm build

     

     

    credit.  javatpoint

Tagged: 

  • You must be logged in to reply to this topic.