Tutorial Belajar React JS Dasar Lengkap
Belajar React Dengan Tutorial Dasar Lengkap - React adalah sebuah library javascript yang diciptakan oleh Facebook dan merupakan salah satu yang paling banyak dipakai saat ini.
Banyak perusahaan besar menggunaka React seperti facebook, instagram, netflix, airbnb, dropbox, untuk perusahaan lokal seperti tokopedia dan traveloka.
React biasa digunakan untuk tampilan situs web dan React Native digunakan untuk membuat aplikasi android dan iOS.
Bagi anda yang ingin lihat code master nya bisa cek disini :
Tools :
- Visual Studio Code
- Google Chrome
- Node JS
Cara Install :
Untuk pemula, disarankan untuk menggunakan Create React App.
tetapi ketika anda sudah mahir anda bisa bangun aplikasi React sendiri dengan packages yang anda butuhkan saja seperti react, react-dom, react-router,babel,webpack.
Kedepan anda bahkan bisa gunakan Next.js atau Gatsby.
Tetapi disini kita mulai dari dasar sehingga menggunakan Create React App
Cukup ketik ini di terminal anda:
npx create-react-app nama-aplikasi
Contoh:
npx create-reacp-app buat-appku
Maka aplikasi anda akan terinstall di dengan nama "buat-appku"
Lalu tinggal ketik perintah:
cd buat-appku
npm start
maka aplikasi react anda akan berjalan di localhost dan bisa dibuka di browser anda, Selamat!
dan ketika aplikasi anda sudah sampai tahap production, ketik perintah:
npm run build
maka aplikasi anda sudah siap di upload ke server milik anda.
Atau selengkapnya tentang berbagai cara install react di komputer anda, Klik disini.
Contoh Struktur React :
Penjelasan Singkat:
- Baris Pertama - Mengimport library React
- Baris Kedua - Mengimport/Menggunakan Style CSS dari index.css
- Baris Keempat - Membuat Component bernama "App"
- Baris Kelima sampai Dua Belas - Isi dari Component App yang akan dijalankan/dirender
- Baris ke 8 & 9 - Berisikan "Belajar React" dan "Testing Belajar React" inilah yang akan dirender
- Baris ke 15 - Agar App dapat dapat digunakan maka Component App ini harus di export
Oke itulah penjelasan singkatnya, mari kita coba latihan dasar menggunakan React.
Menggunakan JSX
Menulis JSX hampir sama dengan menulis HTML. Anda dapat menggunakan tag yang benar-benar sama seperti HTML, seperti <h1> dan <h2> untuk judul atau <p> untuk paragraf, dan <div> untuk kolom dan container.Kesalahan Umum dengan JSX
Meskipun JSX sangat mirip dengan HTML, ada beberapa perbedaan. Seperti yang ditunjukkan digambar sebelah kiri, beberapa element tidak dapat diletakkan didalam return.
Jika Anda memiliki lebih dari satu element, gabungkan element-element tersebut ke dalam satu tag <div> seperti contoh disebelah kanan.
Selengkapnya tentang penggunaan JSX bisa anda Lihat Disini.
Catatan tentang tag img
Di HTML, tag img tidak memiliki tag penutup sehingga dapat ditulis seperti <img src='URL gambar'>. Namun, tag penutup diperlukan oleh tag img didalam JSX seperti <img src='URL gambar' />. ingatlah didalam JSX, tag img harus diakhir dengan /.
Struktur App.js
File App.js selalu memiliki element dan struktur yang ditunjukkan di bawah ini. Catatan: Jika Anda lupa akan inheritence atau class, Anda dapat selalu membuka Slide Library untuk mereviewnya.
JSX Dan JS
Seperti yang dapat Anda lihat di atas, area JSX dan JS (JavaScript) dibagi dengan jelas. JSX hanya ditulis di dalam return dari method render. Element JSX akan ditampilkan di browser.
JavaScript dapat ditulis di luar kolom return (tetapi tetap di dalam method render). Dalam contoh dibawah ini, constant text ditentukan dengan code JavaScript di method render.
Meletakkan Code JS Di Dalam JSX
Bahkan dikolom return, JavaScript dapat ditulis didalam JSX. Untuk melakukan ini, code JavaScript harus diletakkan didalam tanda kurung kurawal { }. Selain itu, nilai atribut tag juga dapat disisipkan kedalam JSX dengan tanda kurung kurawal { } (seperti contoh di sebelah kanan).
Contoh :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 | import React from 'react'; class App extends React.Component { render() { // Nyatakan constant name const name = 'Ninja Ken'; // Nyatakan constant imgUrl const imgUrl = 'https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/react/kentheninja.png'; return ( <div> {/* Gunakan constant name untuk menampilkan "Ninja Ken" */} <h1> {name} </h1> {/* Gunakan constant imgUrl untuk menampilkan gambar */} <img src= {imgUrl} /> </div> ); } } export default App; |
Belajar Cara Mengubah Teks dengan Tombol React
Kali ini akan study kasus sederhana membuat tombol di react, menggunakan event dan stateMembuat Tombol
Pertama, kita akan membuat beberapa tombol untuk ditekan. Tombol dapat dibuat dengan tag <button>. Semua kata yang diletakkan di tag <button> akan ditampilkan di tombol.
Contoh :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 | import React from 'react'; class App extends React.Component { render() { return ( <div> <h1>Halo, Ninja Ken!</h1> {/* Tambahkan tag <button> dengan teks "Guru Domba" */} <button>Guru Domba</button> <button>Ninja Ken</button> {/* Tambahkan tag <button> dengan teks "Ninja Ken" */} </div> ); } } export default App; |
Menggunakan Event
Dengan event, Anda dapat menentukan kapan sebuah code akan dijalankan. Pada contoh di bawah ini, ketika tombol di klik, code akan dijalankan untuk membuat Ninja Ken melompat.
Anda dapat membuat perintah untuk hanya menjalankan code ketika suatu event terjadi, gunakan code berikut: eventName={() => { code }}. Karena arrow function adalah fungsi JavaScript, jangan lupa untuk mengapitnya dengan tanda kurung kurawal { }.
Kita dapat menggunakan event onClick untuk menjalankan code ketika element tertentu di klik. Nama untuk event ini sebaiknya adalah onClick. Contoh penulisan di element button adalah <button onClick={() => {code}}>. Tulis code yang ingin dijalankan ketika event klik terjadi didalam tanda kurung kurawal { } (posisinya terletak dibagian {code} pada arrow function).
Contoh :
import React from 'react';
class App extends React.Component {
render() {
return (
<div>
<h1>Halo, Ninja Ken!</h1>
{/* Tambahkan event onClick didalam tag button, yang berfungsi untuk mencetak nama di console */}
<button onClick={ () => {console.log('Guru Domba')} }>Guru Domba</button>
{/* Tambahkan event onClick didalam tag button, yang berfungsi untuk mencetak nama di console */}
<button onClick={ ()=> {console.log('Ninja Ken')} }>Ninja Ken</button>
</div>
);
}
}
export default App;
State
Selanjutnya, mari kita ubah bagian name dari Hello, (name)! di dalam code sehingga ketika sebuah tombol ditekan, nama yang ditunjukkan di atas berubah.
Di React, nilai yang dapat dirubah berdasarkan tindakan pengguna disebut state. Kita dapat memperbarui state setiap kali tombol ditekan, lalu mengubah nama yang akan ditampilkan berdasarkan state.
Contoh :
import React from 'react';
class App extends React.Component {
// Nyatakan constructor dibawah
constructor(props){
super(props);
this.state = {name : 'Ninja Ken'};
}
render() {
return (
<div>
<h1>Halo, Ninja Ken!</h1>
<button onClick={() => {console.log('Guru Domba')}}>Guru Domba</button>
<button onClick={() => {console.log('Ninja Ken')}}>Ninja Ken</button>
</div>
);
}
}
export default App;
Memperbarui Halaman dengan State
Untuk Menggunakan State, kita butuh tiga tahap seperti gambar diatas.
Menentukan State
Untuk bagian lain dari code seperti constructor(props) dan super(props);, ingat bahwa ini standar dan hampir selalu ditulis dengan cara yang sama.
Mendapatkan State
Setelah ditentukan, Anda dapat mengakses state dengan menggunakan this.state. Seperti yang sudah kita pelajari, state akan disimpan sebagai object. Jadi, console.log(this.state) akan mem-print object state tersebut ke console.
Catatan: string akan di-print dengan tanda kutip ganda (" ")
Menampilkan State
Karena this.state adalah sebuah object, Anda bisa mendapatkan nilai property didalam object tersebut dengan menulis code seperti this.state.propertyName.
Dicontoh di bawah, this.state.name akan mengembalikan nilai Ninja Ken, sehingga pesan Halo, Ninja Ken! akan ditampilkan pada browser, seperti gambar disebelah kanan.
Memperbarui State
Dengan code this.setState({propertyName: valueToUpdate}), nilai state untuk property yang ditentukan akan berubah. Ini artinya nilai yang dapat ditampilkan dengan this.state.name juga dapat diubah.
Untuk mengubah nama yang ditampilkan ketika sebuah tombol diklik, kita akan meletakkan setState di dalam method event onClick.
Hal-Hal Penting Tentang Memperbarui State
Di React, Anda tidak dapat mengubah nilai state dengan menetapkannya langsung ke state. Jika Anda ingin mengubah nilai di state, Anda harus menggunakan method setState. Hal ini penting untuk diingat ketika ingin memperbarui state.
Contoh :
import React from 'react';
class App extends React.Component {
constructor(props) {
super(props);
this.state = {name: 'Ninja Ken'};
}
// Nyatakan method handleClick
handleClick(name){
this.setState({name:name})
}
render() {
return (
<div>
<h1>Hello, {this.state.name}!</h1>
{/* Gantikan event onClick supaya dapat memanggil method handleClick */}
<button onClick={() => {this.handleClick('Guru Domba')}}>Guru Domba</button>
{/* Gantikan event onClick supaya dapat memanggil method handleClick */}
<button onClick={() => {this.handleClick('Ninja Ken')}}>Ninja Ken</button>
</div>
);
}
}
export default App;
Souce Code : https://github.com/ihsandroid1/tombol-react
Belajar Membuat fitur Counter di React
Gunakan 3 langkah state untuk membuat fitur counter. Pertama, kita akan menyelesaikan Langkah pertama: Tentukan State dan Langkah kedua: Tampilkan State.
Contoh :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 | import React from 'react'; class App extends React.Component { constructor(props) { super(props); // Tentukan state this.state = {count : 0} } render() { return ( <div> <h1> {/* Tampilkan nilai state */} {this.state.count} </h1> {/* Tambahkan tag <button> */} <button>+</button> </div> ); } } export default App; |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | // Import React import React from 'react'; // Deklarasikan class Lesson class Lesson extends React.Component { render() { return ( <div className='lesson-card'> <div className='lesson-item'> <p></p> <img /> </div> </div> ); } } // Export class Lesson export default Lesson; |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 | import React from 'react'; class Lesson extends React.Component { constructor(props) { super(props); this.state = {isModalOpen: false}; } handleClickLesson() { this.setState({isModalOpen: true}); } // Deklarasikan method handleClickClose handleClickClose(){ this.setState({isModalOpen: false}) } render() { let modal; if (this.state.isModalOpen) { modal = ( <div className='modal'> <div className='modal-inner'> <div className='modal-header'></div> <div className='modal-introduction'> <h2>{this.props.name}</h2> <p>{this.props.introduction}</p> </div> {/* Tambahkan event onClick */} <button className='modal-close-btn' onClick={() => {this.handleClickClose()}} > Tutup </button> </div> </div> ); } return ( <div className='lesson-card'> <div className='lesson-item' onClick={() => {this.handleClickLesson()}} > <p>{this.props.name}</p> <img src={this.props.image} /> </div> {modal} </div> ); } } export default Lesson; |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 | import React from 'react'; class ContactForm extends React.Component { constructor(props) { super(props); this.state = { /* Spesifikasikan state isSubmitted */ isSubmitted : false, }; } render() { /* Deklarasikan variable contactForm */ let contactForm; /* Buat statement if dengan isSubmitted sebagai pernyataan kondisional */ if (this.state.isSubmitted){ contactForm = ( <div className='contact-submit-message'> Pesan Terkirim </div>); } else { contactForm = ( <form> <p>Alamat Email (wajib diisi)</p> <input /> <p>Pesan (wajib diisi)</p> <textarea /> <input type='submit' value='Kirim' /> </form> ); } return ( <div className='contact-form'> {/* Hapus code di bawah dan tampilkan variable contactForm */} {contactForm} {/* Hapus sampai di sini */} </div> ); } } export default ContactForm; |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 | import React from 'react'; class ContactForm extends React.Component { constructor(props) { super(props); this.state = { isSubmitted: false, email: '', }; } handleSubmit() { this.setState({isSubmitted: true}); } render() { let contactForm; if (this.state.isSubmitted) { contactForm = ( <div className='contact-submit-message'> Pesan Terkirim </div> ); } else { contactForm = ( <form onSubmit={() => {this.handleSubmit()}}> <p>Alamat Email (wajib diisi)</p> {/* Tambahkan event onChange ke tag input */} <input value={this.state.email} onChange= { (event)=>{console.log(event.target.value)} } /> <p>Pesan (wajib diisi)</p> <textarea /> <input type='submit' value='Kirim' /> </form> ); } return ( <div className='contact-form'> {contactForm} </div> ); } } export default ContactForm; |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 | import React from 'react'; class ContactForm extends React.Component { constructor(props) { super(props); this.state = { isSubmitted: false, email: '', hasEmailError: false, }; } handleEmailChange(event) { const inputValue = event.target.value; /* Deklarasikan constant isEmpty dan tetapkan nilainya ke hasil dari pemeriksaan input */ const isEmpty = inputValue === '' /* Perbarui hasEmailError */ this.setState({email: inputValue, hasEmailError: isEmpty}); } handleSubmit() { this.setState({isSubmitted: true}); } render() { let emailErrorText; if (this.state.hasEmailError) { emailErrorText = ( <p className='contact-message-error'> Masukkan alamat email Anda </p> ); } let contactForm; if (this.state.isSubmitted) { contactForm = ( <div className='contact-submit-message'> Pesan Terkirim </div> ); } else { contactForm = ( <form onSubmit={() => {this.handleSubmit()}}> <p>Alamat Email (wajib diisi)</p> <input value={this.state.email} onChange={(event) => {this.handleEmailChange(event)}} /> {emailErrorText} <p>Pesan (wajib diisi)</p> <textarea /> <input type='submit' value='Kirim' /> </form> ); } return ( <div className='contact-form'> {contactForm} </div> ); } } export default ContactForm; |
Lalu saat nya finishing dalam membuat contact form kita, sehingga menjadi seperti ini :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 | import React from 'react'; class ContactForm extends React.Component { constructor(props) { super(props); this.state = { isSubmitted: false, email: '', hasEmailError: false, /* Tambahkan state "content" dan "hasContentError" */ content : '', hasContentError : false }; } handleEmailChange(event) { const inputValue = event.target.value; const isEmpty = inputValue === ''; this.setState({ email: inputValue, hasEmailError: isEmpty, }); } /* Deklarasikan method handleContentChange */ handleContentChange(event){ const inputValue = event.target.value ; const isEmpty = inputValue === '' ; this.setState({ content : inputValue, hasContentError : isEmpty }) } handleSubmit() { this.setState({isSubmitted: true}); } render() { let emailErrorText; if (this.state.hasEmailError) { emailErrorText = ( <p className='contact-message-error'> Masukkan alamat email Anda </p> ); } /* Deklarasikan variable contentErrorText */ let contentErrorText; /* Buat statement if dengan hasContentError sebagai kondisi */ if (this.state.hasContentError){ contentErrorText = ( <p className='contact-message-error'> Masukkan pesan Anda </p> ) } let contactForm; if (this.state.isSubmitted) { contactForm = ( <div className='contact-submit-message'> Pesan Terkirim </div> ); } else { contactForm = ( <form onSubmit={() => {this.handleSubmit()}} > <p>Alamat Email (wajib diisi)</p> <input value={this.state.email} onChange= {(event) => {this.handleEmailChange(event)}} /> {emailErrorText} <p>Pesan (wajib diisi)</p> {/* Tambahkan nilai dan event onChange */} <textarea value={this.state.content} onChange={(event) => {this.handleContentChange(event)}} /> {/* Tampilkan contentErrorText */} { contentErrorText } <input type='submit' value='Kirim' /> </form> ); } return ( <div className='contact-form'> {contactForm} </div> ); } } export default ContactForm; |
Preview :
Source Code : https://github.com/ihsandroid1/form-react
Contoh Data Dinamis JSON sebagai Objek (app.js):
import React,{ Component } from 'react'; class App extends Component { constructor(){ super(); this.state = { siswa: [ { id: 1, nama: 'Mona Nabilah' }, { id:2, nama: 'Neno Balqis' }, { id:3, nama: 'Ayana Shahab' } ] } } render(){ return( <div> { this.state.siswa.map((dinamis,key) => <div> <h3> {dinamis.id} . {dinamis.nama} </h3> </div> ) } </div> ) } } export default App;
Contoh JSON Dari file json
import React,{ Component } from 'react'; class App extends Component { constructor(){ super(); this.state = { homestays : [] } } componentDidMount(){ fetch("https://raw.githubusercontent.com/algosigma/js-reactjs/master/homestays.json") .then(response => response.json()) .then((data) => { this.setState({ homestays: data }); }) } render(){ return( <div> { this.state.homestays.map((dinamis,key) => <div> <h3> {dinamis.nama} - Rp. {dinamis.harga} rb </h3> </div> ) } </div> ) } } export default App;
Terima kasih jangan lupa untuk selalu belajar dari dokumentasi react atau sumber lainnya :)