React Untuk Pemula— Instalasi & Setup
Kamu pernah belajar react?dan mengalami kesulitan?Jika iya kita sama, dan semoga tutorial ini dapat membantu kamu belajar react dengan cara yang lebih simpel&mudah dipahami. Oke, kita mulai ya.
Apa itu React?
React adalah library javascript (bukan framework) yang dikembangkan oleh Facebook secara opensource. Intinya React digunakan untuk membangun user interface pada frontend sebuah website. Biasanya React digunakan pada Website dengan konsep SPA(Single Page Application). Pada Konsep SPA intinya semua aktivitas hanya dihandel pada sebuah halaman website, mengambil&mengirim data ke server, berpindah ke module lain pada website dilakukan tanpa loading browsing.
Instalasi & Setup Dengan Static HTML File
Cara Instalasi yang pertama ini sebenarnya tidak populer dan kurang direkomendasikan, tapi buat kamu yang belum terbiasa dengan penulisan syntaks pada React dan terbiasa dengan VanillaJS & Jquery, cara ini sedikit memudahkan kita untuk bisa memahami React dengan baik.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" /> <title>Halo React</title> <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6.26.0/babel.js"></script>
</head> <body>
<div id="root"></div> <!-- Penulisan Syntaks React di sini -->
<script type="text/babel">
</script>
</body>
</html>
Untuk menginstalnya, kita copy&paste syntaks di atas ke dalam sebuah file html dan beri nama semisal index.html. Pada syntaks di atas kita meload 3 file javacript dari cdn yaitu react,react-dom dan babel.
Oke sekarang kita akan mencoba menulis kode React pertama kita pada block script yang sudah ada. Penulisannya menggunakan ES6, untuk yang belum terbiasa dengan ES6 jangan khawatir, ikuti saja dengan pelan-pelan. Tambahkan kode di bawah ini ke dalam blok script pada file index.html yang sudah kita buat.
class App extends React.component {
render() {
return <h1>Halo React</h1>
}
}ReactDOM.render(<App />, document.getElementById('root'))
Pada kode di atas, kita membuat sebuah React component dengan nama App dan di dalam method render digunakan untuk menampilkan output yang ingin kita tampilkan, dalam contoh ini kita menampilkan tulisan “Halo React” dengan style heading 1 (h1).
Mungkin ada yang bingung, kenapa ada syntaks HTML di dalam kode block javascript (script), nah itu namanya JSX yang digunakan React untuk penulisan kodenya, dan kita akan mempelajarinya lebih lanjut pada materi selanjutnya.
dan ini kode lengkap pada file index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" /><title>Halo React</title><script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6.26.0/babel.js"></script>
</head><body>
<div id="root"></div><!-- Penulisan Syntaks React di sini -->
<script type="text/babel">
class App extends React.Component {
render() {
return <h1>Halo React!</h1>
}
}
ReactDOM.render(<App />, document.getElementById('root'))
</script>
</body>
</html>
buka file index.html tersebut pada browser, jika penulisannya sudah benar,maka tampilannya akan seperti.
Nice! Kamu sudah bisa menginstal dan menulis kode React pertama kamu. Selamat.
Instalasi&Setup dengan Create React App
Cara Instalasi React yang kedua ini akan lebih simpel tapi mungkin akan lebih sulit untuk dipahami karena kita akan banyak belajar hal baru. Tapi anggap saja ini sebuah tantangan ya, jangan takut.
Oke sebelum kita mulai, ada satu yang perlu kita persiapkan, yaitu kita harus menginstal terlebih dahulu nodejs&npm. Untuk menginstalnya kamu bisa mengikuti tutorial lain dari kami(Install NodeJS di OS X El Capitan, Ubuntu 16.04 dan Windows 7) atau bisa langsung ke official webnya di https://nodejs.org/en/download/
Selanjutnya buka terminal(macOs, Linux) atau command prompt (windows). dan ketikkan perintah :
npx create-react-app hello-reactperintah di atas digunakan untuk menginstal&mensetup react dengan konfigurasi & setting yang sudah disiapkan dengan format npx create-react-app nama_folder (disini menggunakan nama hello-react). Untuk menjalankannya masuk ke dalam folder.
cd hello-reactdan jalankan aplikasi dengan perintah
npm startTunggu proses running aplikasi sampai selesai, jika sudah selesai maka otomatis aplikasi akan terbuka pada browser pada url http://localhost:3000.
Cool!Kamu berhasil menginstal React menggunakan tool Create React App
