Selamat datang kembali di tutorial React JS Bahasa Indonesia! Pada tutorial sebelumnya kita telah mempelajari tentang apa itu React JS dan juga cara menginstallnya. Pada tutorial kali ini, kita akan belajar tentang bagaimana cara melakukan setup project React JS.
-
Instal Node.js
Langkah pertama yang perlu dilakukan adalah menginstall Node.js. Node.js adalah runtime environment yang digunakan untuk menjalankan JavaScript di luar browser. Anda dapat mengunduh Node.js dari situs resminya yaitu nodejs.org. Setelah mengunduh, ikuti proses instalasi yang sudah disediakan. -
Membuat Project React JS
Setelah Node.js terinstall di komputer Anda, langkah selanjutnya adalah membuat project React JS. Anda dapat menggunakan npx (package runner yang disertakan dengan npm) untuk membuat project dengan mudah. Buka terminal atau command prompt dan ketik perintah berikut:npx create-react-app nama_projectGantilah ‘nama_project’ dengan nama untuk project React JS Anda. Perintah di atas akan membuat sebuah project React JS dengan struktur folder default yang sudah disediakan.
-
Memulai Project
Setelah project berhasil dibuat, langkah selanjutnya adalah masuk ke dalam folder project dengan perintah:cd nama_projectSetelah itu, jalankan project dengan menggunakan perintah:
npm startPerintah di atas akan menjalankan server lokal untuk project React JS Anda. Buka browser dan akses localhost:3000 untuk melihat project yang sudah dibuat.
-
Struktur Folder Project React JS
Pada project React JS yang baru dibuat, terdapat struktur folder default yang sudah disediakan oleh create-react-app. Struktur folder tersebut terdiri dari beberapa folder dan file seperti src, public, node_modules, package.json, dan lain sebagainya. Berikut penjelasan singkat mengenai masing-masing folder dan file tersebut:- src: berisi file JavaScript yang merupakan inti dari project React JS seperti komponen-komponen, styling, dan lain sebagainya.
- public: berisi file statis yang akan digunakan dalam project React JS seperti index.html dan assets lainnya.
- node_modules: berisi package dan dependensi yang digunakan dalam project React JS.
- package.json: berisi konfigurasi project React JS seperti nama project, dependensi, scripts, dan lain sebagainya.
- Menggunakan Code Editor
Untuk menulis kode React JS, Anda dapat menggunakan code editor seperti Visual Studio Code, Sublime Text, Atom, atau editor lainnya yang Anda sukai. Pastikan untuk menginstal ekstensi atau plugin yang mendukung penulisan kode React JS agar lebih mudah dalam pengembangan.
Itulah langkah-langkah untuk melakukan setup project React JS. Dengan mengikuti tutorial ini, Anda sudah siap untuk memulai pengembangan project React JS Anda sendiri. Jangan lupa untuk terus belajar dan eksplorasi fitur-fitur React JS agar Anda semakin mahir dalam penggunaannya. Terima kasih telah mengikuti tutorial ini, semoga bermanfaat!
Halo bang, mau tanya kok saat di install vite nya, beberapa hampir keseluruhan isinya beda, dan format nya bukan jsx tapi js, dan import tailwind pun file yang muncul tidak sama? itu ada kenapa ya?
plis lah di minimize , suka banget cara ngejelasin channel ini tapi DI MINIMIZE
Mantap bang, akhirnya nemu tutorial yang best practice
Makasih, semoga sukses selalu bang
Bang mau tanya, kenapa ya tailwind nya tdk berfungsi? File tailwind.config.js dan postcss.config.js jg extensinya bukan cjs? Mhn pencerahan🙏
Keren banget bang… semoga jadi amal jariyah ya… bikin tutorial spt ini selain butuh skill, juga waktu yang diluangkan…
ada yang sama gak pas instalasi tailwin muncul kyk gini :
npm ERR! code EUNSUPPORTEDPROTOCOL
npm ERR! Unsupported URL Type "link:": link:./src/types
npm ERR! A complete log of this run can be found in: C:UserswhynuAppDataLocalnpm-cache_logs2024-04-19T12_18_09_175Z-debug-0.log
mantap bang terimakasih
Terimakasih banyak bang, kesini karna disuruh pa Dika. Ternyata emang sebagus itu penjelasannya, top dah 👍
mantapp bang mudah dipahami
bagi yang tailwind css nya blom load. coba ikutin full cara dari dokumentasi tailwind > Vite. karena ada beberapa komponen yang perlu di perhatikan.
tailwind config =
content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
index.css
@tailwind base;
@tailwind components;
@tailwind utilities;
app css di comment saja
app jsx struktur seperti ini
return (
<>
<h1 className="text-3xl font-bold underline bg-blue-800 flex justify-center">
Hello world!
</h1>
</>
)
}
ada <> dan </> untuk multi komponen
sekian tysm
Bang mau nanya. Pas gua pasang atribute autoFocus di file input.jsx, autoFocus nya ke inputan paling bawah. Gimana cara nya biar fokus nya ke inputan paling atas bang?. Makasih sebelumnya
Mas, request implement clean architecture React JS dong. Thanks, mas 🔥🔥🔥
channel programming terbaik selain web programming unpas milik pak dika. Semangat terus pak dalam membagikan ilmu yang terbaik. biar allah yang membalas kebaikan bapak aviv.☺
Terima kasih ilmunya kang avip, semoga berkah
tailwind gw kok gabisa ya bang
terimakasih atas ilmunya mas😄
Kalau mau belajar react , minimal pemahaman javascript ny sampe mana bang?
thanks bang penjelasannya bagus, mudah dipahami
makasih kak atas pengejelasannya. mudah dipahami. Dikasih tau best praticesnya kek gimana jg. Semangat terus kak bagi ilmunya. kalau bisa sampai ada project/studi kasusnya kak hehe
makasih kang mudah banget di mengerti, kalo bisa bikin vidio tentang cara atur session di react dong wkwk