Pernahkah Anda mendengar tentang pustaka JavaScript baru dan yang sedang tren bernama React.js? Sangat keren sehingga telah banyak digunakan oleh pengembang untuk membuat Antarmuka Pengguna dan komponen interaktif dalam aplikasi mereka. Pustaka React juga merupakan pilihan tepat ketika Anda ingin membangun aplikasi yang cepat dan skalabel dengan pendekatan berbasis komponen. Jika Anda belum mulai menggunakannya, saatnya Anda mulai belajar. Dalam posting blog ini, kami akan menunjukkan kepada Anda cara mengatur lingkungan pengembangan React di komputer Mac Anda. Baca terus!
Pra-Persyaratan
Pertama, Anda perlu memastikan bahwa Anda telah menginstal macOS terbaru di komputer Anda. Anda dapat memeriksa versi macOS Anda dengan mengklik menu Apple di sudut kiri atas layar komputer Anda dan mengklik "Tentang Mac Ini". Pastikan Anda telah menginstal Node.js di komputer Mac Anda. Anda dapat mengunduh Node.js untuk MacOS.
Anda juga perlu menginstal IDE (Integrated Development Environment) untuk menulis aplikasi React Anda. Pilihan paling populer adalah WebStorm, Visual Studio Code, Atom, dan IntelliJ. Kami akan menggunakan WebStorm untuk tutorial ini. Anda harus mendaftar untuk uji coba gratis untuk mulai menggunakan IDE ini.
Langkah 1: Menginstal Node.js dan NPM
Pertama, Anda perlu menginstal Node.js dan NPM di komputer Mac Anda. Untuk melakukannya, pergi ke terminal dan ketik perintah berikut, dan tekan enter. Anda dapat menemukan terminal dengan mencari “terminal” di menu pencarian MacOS.
nvm install 16
Dengan asumsi Anda sudah menginstal NVM di sistem macOS Anda.
Langkah 2: Instal modul create-react-app dengan NPM
Setelah Anda menginstal Node.js dan NPM, Anda dapat melanjutkan dan menginstal React CLI dengan mengetikkan perintah berikut di terminal. Anda juga dapat menginstalnya dari situs web NPM dengan mengklik tombol “instal”.
npm install create-react-app --location=global
Jika Anda ingin membuat aplikasi React Anda dari awal, ikuti langkah-langkah di bawah ini. Pertama, ubah jalur direktori saat ini ke direktori root komputer Anda dengan mengetikkan perintah berikut.
Anda juga dapat mengubah jalur direktori ke folder lain. Tetapi pastikan Anda memilih jalur yang tidak ada di repositori git mana pun. Jika path folder ada di repositori git mana pun, Anda akan mendapatkan pesan yang mengatakan bahwa path ada di file .gitignore dan tidak dapat dipilih.
Sekarang, buat aplikasi React baru dengan mengetikkan perintah berikut.
npx create-react-app my-app ]praMembuat Aplikasi React di macOS
Setelah itu, Anda dapat menavigasi ke proyek pada baris perintah dan memulainya dengan npm:cd my-app npm start
Tunggu aplikasi untuk memulai.
[ img loading=lazy src=https://tecadmin.net/wp-content/uploads/2022/08/start-react-app-in-development-on-macos.png alt="Cara Membuat Aplikasi React.js di macOS" width=742 height=302 class="size-full wp-image-30953" srcset="https://tecadmin.net/wp-content/uploads/2022/08/start-react-app-in-development -on-macos.png 742w, https://tecadmin.net/wp-content/uploads/2022/08/start-react-app-in-development-on-macos-300x122.png 300w, https://tecadmin .net/wp-content/uploads/2022/08/start-react-app-in-development-on-macos-150x61.png 150w, https://tecadmin.net/wp-content/uploads/2022/08/ start-react-app-in-development-on-macos-450x183.png 450w, https://tecadmin.net/wp-content/uploads/2022/08/start-react-app-in-development-on-macos -300x122@2x.png 600w" size="(max-width: 742px) 1 00vw, 742px">Mulai Aplikasi React dalam Pengembangan di macOS
Aplikasi default akan mendengarkan di localhost:3000. Anda dapat mengakses ini di browser web.Menjalankan Aplikasi React di macOS
Safari adalah browser default untuk mesin macOS, Tapi saya sarankan Anda untuk menggunakan Chrome juga. Google chrome menyediakan lingkungan pengembang dan ekstensi chrome untuk React Developer Tools.
Langkah 4: Bangun React Application
Setelah aplikasi React siap untuk produksi, Anda dapat melanjutkan dan membangunnya. Ketik perintah berikut untuk membangun aplikasi Anda.npm run buildBuat build produksi aplikasi reaksi di macOS
Perintah di atas membangun aplikasi React Anda dan membuat folder bernama "build" di direktori saat ini . Folder build berisi kode JavaScript dan sumber daya lain yang diperlukan oleh application.Mendaftarkan file build reaksi
Anda dapat mengunggah file dari folder build ke root dokumen situs produksi Anda.
Conclusion
Sekarang Anda tahu cara menyiapkan lingkungan pengembangan React nt di komputer Mac Anda, Anda dapat melanjutkan dan mulai mempelajari dasar-dasar React. Kami menyarankan Anda memulai dengan tutorial React untuk mendapatkan pemahaman yang baik tentang cara kerja React. Anda juga dapat melihat dokumentasi React resmi untuk mempelajari lebih lanjut tentang perpustakaan. Setelah Anda selesai dengan pembelajaran awal, Anda dapat mulai membangun aplikasi React yang lebih kompleks. Sekarang setelah Anda mengetahui cara mengatur lingkungan pengembangan React di komputer Mac Anda, Anda dapat melanjutkan dan mulai mempelajari dasar-dasar React.
Referensi tecadmin.com
