Bagaimana cara menginstal React di Windows? Panduan Lengkap

ReactJS adalah pustaka JavaScript sumber terbuka gratis yang telah mengubah teknik pengembangan frontend kuno secara signifikan. Diumumkan pada tahun 2013, React adalah proyek internal Facebook. Sejak saat itu, React telah diadopsi oleh berbagai organisasi dan startup. Pengembang frontend dengan pengetahuan yang cukup tentang JavaScript, HTML, dan CSS dapat membuat antarmuka pengguna interaktif untuk aplikasi web dan seluler. Salah satu keuntungan terbesar ReactJS adalah pendekatan berbasis komponennya. Membangun komponen enkapsulasi yang dapat digunakan kembali dengan status independennya sendiri menyederhanakan antarmuka pengguna yang kompleks.

Menariknya apa pun yang kita tulis di ReactJS mungkin tampak seperti HTML, tetapi sebenarnya tidak. Ini dikenal sebagai JSX, file JavaScript XML. JSX ini menghasilkan "elemen" React, yang dirender ke dalam Model Objek Dokumen. Dalam istilah awam, JSX memungkinkan kita untuk menulis logika JavaScript di dalam tubuh HTML. Sehingga membuat React jauh lebih sederhana dan mudah dimengerti.

Untuk memanfaatkannya secara ideal, mari selami untuk mempelajari cara menginstal React JS di Windows.

Bagaimana cara menginstal React JS di Windows?

Persyaratan Sistem untuk Windows

Meskipun menggunakan ReactJs cukup mudah, proses cara menginstal React JS di Windows bisa sangat membosankan. Karena ReactJS adalah proyek sumber terbuka, tidak semudah mengunduh perangkat lunak dari internet. Pertama dan terpenting, ada beberapa prasyarat untuk menggunakan ReactJS di Windows Anda.

1. Versi Windows: Windows XP, Windows 7 (32/64 bit) atau lebih tinggi.
2. Diperlukan minimal 4 GB RAM.
3. Minimal 10 GB ruang disk pada hard drive Anda.
4. Browser internet seperti Chrome, Microsoft Edge, Firefox dll.
5. Satu editor untuk men-debug dan menguji kode yang ditulis dalam ReactJS.

Pelajari Kursus Pengembangan Perangkat Lunak online dari Universitas top Dunia. Dapatkan Program PG Eksekutif, Program Sertifikat Lanjutan, atau Program Magister untuk mempercepat karier Anda.

Mengunduh dan Memasang Node.js

Node.js adalah server yang membantu Anda menjalankan kode ReactJS di sistem Anda. Sama seperti ReactJS, itu juga open source. Penginstal Node.js menyertakan NPM (Node Package Manager), yang berisi berbagai modul node yang digunakan pengembang untuk menghosting dan menerbitkan modul mereka sendiri di komunitas sumber terbuka. Jadi Node bekerja berdampingan dengan registri NPM, yang membuatnya lebih mudah untuk menginstal paket apa pun menggunakan NPM CLI. Node selanjutnya membungkus aplikasi ReactJS menjadi satu menggunakan paket web untuk kemudahan instalasi.

Berikut adalah prosedur bertahap untuk mengunduh dan menginstal Node.js:

1. Untuk menginstal Node.js buka https://nodejs.org/en/ .
2. Bergantung pada versi OS Windows Anda, Anda harus memilih penginstal yang sesuai.
3. Halaman beranda Node.js merekomendasikan versi LTS tergantung pada sistem operasi Anda. Mengkliknya akan secara otomatis memulai unduhan.
4. Anda akan menemukan penginstal di folder unduhan. Jalankan penginstal.
5. Wizard penyiapan akan muncul di layar, yang akan meminta Perjanjian Lisensi Pengguna Akhir. Terima syarat dan ketentuan untuk melanjutkan instalasi.
6. Kemudian pengguna harus memilih folder tujuan dengan jalur default penginstal. Klik berikutnya untuk melanjutkan.
7. Penginstal kemudian menampilkan fitur yang akan diinstal dan juga menetapkan variabel path lingkungan ke command prompt. Klik berikutnya untuk memulai instalasi.
8. Setelah penginstalan selesai, verifikasi Node.js di sistem Anda menggunakan command prompt.
9. Ketik "node -v" di command prompt untuk memeriksa versi Node.js yang diinstal.
10. Ketik "npm -v" di command prompt untuk memverifikasi instalasi npm juga.

Menginstal Bereaksi

Setelah menginstal Node.js, kita dapat menginstal React JS di Windows menggunakan dua teknik:

• Menggunakan paket web dan Babel

1. Membuat Folder Akar

Sebelum menginstal ReactJS, buat folder root dengan nama "reactFile" menggunakan perintah berikut di command prompt.

C:\Users\username\Desktop>mkdir reactFile

C:\Users\username\Desktop>cd reactFile

Setelah membuat direktori, buat file package.json menggunakan perintah berikut di command prompt. File package.json membantu membuat modul.

C:\Users\username\Desktop>reactFile> npm init

Prompt perintah kemudian meminta informasi mengenai modul; lewati saja dengan memilih opsi "-y".

2. Instal React dan react-dom

Instal paket React dan react-dom menggunakan perintah npm berikut dan tambahkan paket ke file package.json menggunakan perintah "-save".

C:\Users\username\Desktop>reactFile> npm install react –save

C:\Users\username\Desktop>reactFile> npm install react-dom –save

Jelajahi Kursus Gratis Pengembangan Perangkat Lunak Kami

3. Instal Webpack

Instal webpack, webpack-dev-server dan webpack-cli menggunakan perintah berikut.

C:\Users\username\Desktop>reactFile> npm install webpack webpack-dev-server webpack-cli –save

4. Instal Babel

Babel adalah transpiler yang mengubah kode JavaScript menjadi sesuatu yang dimengerti browser. Jadi menginstal Babel dan plugin berikut, yaitu babel-loader, babel-preset-env, babel-preset-react, dan html-webpack-plugin, sangatlah penting.

Gunakan perintah berikut untuk menginstal semua plugin babel sekaligus.

C:\Users\username\Desktop\reactFile>npm install babel-core babel-loader babel-preset-env babel-preset-react html-webpack-plugin –save-dev

5. Buat File ReactJS

Untuk menyelesaikan proses instalasi, kita harus membuat file tertentu secara manual menggunakan command prompt.

C:\Users\username\Desktop\reactFile>ketik nul > index.html

C:\Users\username\Desktop\reactFile>ketik nul > App.js

C:\Users\username\Desktop\reactFile>ketik nul > main.js

C:\Users\username\Desktop\reactFile>ketik nul > webpack.config.js

C:\Users\username\Desktop\reactFile>ketik nul > .babelrc

6. Setup Compiler, Server dan Loader

Setelah file ReactJS ini dibuat di dalam folder "reactFile", Anda dapat menyiapkan server penerapan yang mengaturnya di port 8001 atau port apa pun yang Anda inginkan di webpack.-config.js.

Gunakan kode berikut di file webpack-config.js,

jalur const = membutuhkan ('jalur');

const HtmlWebpackPlugin = memerlukan('html-webpack-plugin');

modul.ekspor = {

entri: './main.js',

keluaran: {

path: path.join(__dirname, '/bundle'),

nama file: 'index_bundle.js'

},

devServer: {

sebaris: benar,

pelabuhan: 8001

},

modul: {

aturan: [

{

tes: /\.jsx?$/,

kecualikan: /node_modules/,

loader: 'babel-loader',

kueri: {

preset: ['es2015', 'react']

}

}

]

},

plugin:[

HtmlWebpackPlugin baru({

templat: './index.html'

})

]

}

7. Menyiapkan index.html

Di dalam index.html tulis kode HTML biasa dengan div id=”app” sebagai elemen root dan kemudian tambahkan skrip index_bundle.js di badan HTML.

Keterampilan Pengembangan Perangkat Lunak Dalam Permintaan

8. Menyiapkan App.js dan main.js

Tulis komponen React di dalam App.js untuk merender sebuah kelas atau fungsi. Sisipkan teks yang ingin Anda render di dalam komponen, yang akan muncul di browser setelah dikompilasi. Kemudian impor komponen ke elemen Aplikasi root kita di dalam main.js agar hasilnya muncul di browser.

Buat file “.babelrc” dan masukkan baris kode berikut,

{

“preset”:[“env”, “reaksi”]

}

9. Menampilkan Konten di Halaman Web

Penyiapan akhirnya selesai, dan server akan aktif dan berjalan setelah Anda mengetik perintah berikut di command prompt.

C:\Users\username\Desktop\reactFile>npm mulai

Segera setelah Anda menekan enter, browser akan menampilkan pesan yang Anda buat di dalam komponen.

• Menggunakan perintah buat-reaksi-aplikasi

1. Instal buat-reaksi-aplikasi

Buka command prompt dan tulis kode berikut untuk menginstal aplikasi create-react.

C:\Users\username\Desktop>npx create-react-app my-app

Perintah ini menginstal semua file dan folder yang diperlukan di dalam folder "aplikasi saya" desktop Anda. Satu baris kode ini menyelesaikan penginstalan React di sistem Anda dalam beberapa menit.

2. Jalankan Server

Pergi ke prompt perintah dan ketik

C:\Users\username\Desktop>cd my-app

C:\Users\Tutorialspoint\Desktop>my-app> npm start

Proyek React Anda aktif dan berjalan di browser Anda dengan bantuan localhost, yang menampung proyek Anda di port yang tersedia.

Jelajahi Kursus Rekayasa Perangkat Lunak Populer kami

Kesimpulan

ReactJS telah mengubah game pengembangan frontend sejak dirilis dan telah berkembang menjadi salah satu pustaka JavaScript sumber terbuka paling populer. Beberapa perusahaan, seperti Meta, Netflix, dan Slack, menggunakan ReactJS. Salah satu keuntungan terbesar adalah komponen dapat digunakan kembali untuk membuat perubahan ke dalam halaman web. Beberapa aplikasi React disebarkan ke Azure Web App menggunakan Azure DevOps. Ini adalah salah satu keterampilan yang paling dicari di industri TI sekarang.

Jika Anda adalah pengembang React, Anda dapat meningkatkan keahlian Anda dengan mengetahui Azure DevOps melalui Program Sertifikat Lanjutan upGrad di DevOps dari IIIT Bangalore . Kursus ini menawarkan lebih dari 250 jam modul pembelajaran bersama dengan panduan persiapan wawancara. Anda juga akan menghadiri sesi bimbingan karir dengan pakar DevOps yang dapat memberi Anda peta jalan yang jelas tentang apa yang diharapkan industri. Anda menerima sertifikat dan status alumni IIITB di akhir kursus, menjadikannya tambahan yang luar biasa untuk resume Anda!