arif.com: December 2017

Cara Install React dan Membuat Hello World

Salam..

Kita jumpa lagi pada kesempatan kali ini penulis ingin berbagi tutorial tentang React, kebetulan penulis juga lagi belajar membuat aplikasi menggunakan React.
React Js merupakan sebuah library JavaScript yang di buat oleh facebook. React adalah library yang bersifat composable user interface, React sangat flexibel untuk digunakan dalam berbagai proyek, kita dapat membagun aplikasi baru full dengan React js.

Sebelum memulai membuat aplikasi React js kita terlebih harus menginstall NPM dan NodeJs. Buka Terminal pada Ubuntu yaitu dengan mengetik :

sudo apt-get install npm

Masukan kata sandi root, dan tunggu beberapa saat sampai prosesnya selesai, Silahkan cek pada Terminal.

npm -v

Sekarang baru menginstall Nodejs pada terminal dengan mengetik perintah dibawah ini :

curl -sL https://deb.nodesource.com/setup_9.x | sudo -E bash -
sudo apt-get install -y nodejs

Adapun untuk instalasi di linux lainnya bisa merujuk ke halaman panduan instalasi lansung di website Node.js disini
Untuk mengecek instalasi bisa megetik perintah dibawah ini pada terminal.

node -v

Untuk menginstall React pada ubuntu jalankan perintah ini pada terminal.

npm install -g create-react-app

Kemudian untuk membuat aplikasi React ketik perintah.

create-reat-app hello-world

Cara membuat project dengan React

Dan React akan membuat project hello world seperti gambar dibawah ini.

Tampilan folder yang sudah dibuat dengan React

Untuk menjalankannya terlebih dahulu kita masuk kedalam folder yang sudah kita buat dengan cara

cd hello-world

Untuk menjalankannya react ketik perintah kemudian jalankan servernya dengan mengetik perintah pada terminal.

npm start

Kemudian web browser akan terbuka dengan sendirinya dan react akan otomatis dijalan pada web browser dengan sendirinya dengan port localhost:3000, berikut tampilannya.

Tampilan React pada saat pertama kali dijalankan pada web browser

Tampilan React Saat pertama kali dijalankan

Kemudian coba buka pada Text Editor, disini saya menggunakan text editor Sublime Text didalam aplikasi tadi bisa lihat apa saja yang sudah oleh React.

Tampilan Folder pada aplikasi React

Dalam aplikasi yang sudah oleh React tadi itu terbagi dalam tiga folder ada npm, public, dan src, sekarang kita lompat saja kedalam dalam folder public, didalam folder public itu terdapat tiga file, dan didalam folder src terdapat 7 file, untuk sementara bagi yang baru mempelajari tentang React kita hanya perlu index.html yang ada dalam folder public, juga app,js dan index.js yang ada pada file src saja, kalau yang lain sementara bisa hapus dulu seperti gambar dibawah ini.

Tampilan Folder Reactjs

Pada saat menghapus beberapa file yang ada didalam folder React App yang telah kita buat tadi maka server localhost:3000 akan menjalankan dengan sendirinya pada web browser yang menampilkan error Failed Compile pada web browser karene menghapus beberapa file tadi tanpa harus mengrefres lagi web browser silahkan lihat contoh gambar yang disamping dibawah ini.

gambar failed compile

Sekarang buka index.html dan ubah script seperti dibawah ini dan jangan lupa Save aplikasi atau dengan cara Ctrl+S

Sekarang kita pindah ke index.js dan juga ubah seperti dibawah ini

import React from ' react'; yang berati kita akan mengimport react library.
import App from './App'; yang berati mengimport file App
Sekarang yang terakhir ubah juga yang ada pada file App.js

Setalah selesai jangan lupa Save Aplikasi dan coba lihat aplikasinya yang sudah dijalankan sendirinya pada web browsernya.

cara membuat apliaksi hello world dengan App React

Tampilan hello world dengan React App

Sekelian Terima Kasih karena telah mengunjungi blogarif.com dan jangan lupa tinggalkan komentarnya,