Kita akan membuat layout website responsive menggunakan librari semantic-ui-react. Semantic UI adalah semacam UI frameworks yang memudahkan kita membuat website template atau style website, karena source css, javascript, dan html telah siap untuk digunakan atau diimplementasikan ke dalam project website. Dengan ui framework, kita tidak perlu lagi membuat style website dan fungsi-fungsi javascript dari awal, sangat membantu mempercepat pengembangan aplikasi yang kita buat. Librari semantic-ui-react adalah komponen-komponen react js yang dibuat menggunakan style semantic ui (semantic-ui.com). Semua dokumentasi dari setiap komponen react js bisa kita pelajari melalui website https://react.semantic-ui.com. Pada tutorial sebelumnya kita telah membuat halaman-halaman website menggunakan librari react-router-dom. Tutorial kali ini kita akan membuat layout website responsive yang sudah ada navigasi atau menu untuk menuju ke setiap halaman website. Contoh layout yang akan kita buat seperti ini https://react.semantic-ui.com/layouts/homepage Ikuti langkah-langkah berikut ini: 1. Masuk ke project react js yang telah kita buat, dan install librari semantic-ui-react.

$ cd aplikasi-reactjs
$ npm install --save semantic-ui-react

2. Install package css dari semantic ui.

$ npm install --save semantic-ui-css

3. Import semantic-ui-css di dalam file index.js: 4. Buat folder containers dan components di dalam src:

$ mkdir src/containers
$ mkdir src/components

5. Buatlah file-file berikut ini pada folder nya masing-masing: src/components/HomepageHeading.js ---- src/containers/DesktopContainer.js ---- src/containers/MobileContainer.js ---- src/containers/FooterContainer.js ---- src/containers/ResponsiveContainer.js ---- src/Router.js ---- src/pages/HomePage.js ---- src/pages/AboutPage.js ---- src/pages/ContactPage.js ---- 6. Jalankan aplikasi react js anda di localhost: $ npm start Baiklah sampai disini project react js kita sudah memiliki layout yang responsive terdiri dari navigasi, header, footer dan content setiap page. Berikut ini adalah file-file yang baru dibuat dan yang di-edit: File Baru: src/components/HomepageHeading.js src/containers/DesktopContainer.js src/containers/FooterContainer.js src/containers/MobileContainer.js src/containers/ResponsiveContainer.js src/index.js src/Router.js src/pages/AboutPage.js src/pages/ContactPage.js src/pages/HomePage.js Langkah selanjutnya adalah upload hasil kerja anda ke server hosting. Ikut langkah-langkah pada tutorial bagian 2. Anda bisa melihat hasil dari tutorial ini di alamat website www.opetstudio.com. Source code tutorial di https://github.com/opetstudio/tutorial-reactjs/tree/tutorial-bagian-3. Okey, sekian tutorial cara membuat layout website react js menggunakan librari semantic-ui-react, jika ada bagian yang kurang anda mengerti, anda bisa bertanya langsung di kolom komentar. Ikuti terus seri tutorial react js dalam bahasa Indonesia untuk seri yang akan datang. Terima kasih telah membaca tutorial yang sederhana ini. Semoga bermanfaat. Salam..!!!

Tutorial ini akan membahas tentang penggunaan router pada aplikasi react js. Kita akan menggunakan librari atau package react-router-dom sebagai router. Kegunaan router adalah memisahkan komponen-komponen mana yang akan di-render berdasarkan path url yang sudah ditentukan. Contohnya path url "/home" untuk komponen "HomePage.js", path "/about" untuk "AboutPage.js", path "/contact" untuk "ContactPage.js", dan seterusnya. Ada dua tipe komponen router yang dapat kita pakai dari librari react-router-dom. Pilih salah satu komponen yaitu HashRouter atau BrowserRouter. 

Baca juga  apa itu react js belajar react js

Tutorial kali ini kita akan belajar cara hosting react js atau cara upload ke hosting apache. Biasa nya jasa penyedia hosting yang ada di pasaran, adalah hosting apache yang terdiri dari database mysql, aplikasi php dan web server apache, atau kalau anda sudah mahir biasanya menggunakan vps (virtual private server) atau server dengan teknologi cloud computing.

Kepanjangan dari PWA adalah Progressive Web Apps. lantar apa itu pengertian dari Progressive Web Apps ??

Apa itu Progressive Web Apps(PWA)  ?

Progressive Web Apps adalah sebuah metode untuk membuat sebuah webiste berjalan,terlihat, dan terasa seperti aplikasi native pada umumnya, tetapi merupakan situs web yang sudah di optimized untuk dijalankan dimobile. meskipun seperti aplikasi native kita tidak perlu mendownload di app store, cukup dengan membuka webiste yang sudah teroptimized beberapa  detik nanti akan muncul pop-up untuk mengijinkan apakah web tersebut diizinkan dipasang di HOME. meskipun sudah terpasang dihome pwa tetap berjalan di atas browser dan pwa yang baik harus bisa berjalan meskipun di jaringan 3G dan offline, juga memiliki fitur offline caching,background syncing dan push notifications dengan menggunakan service worker. apa itu service worker ? service worker adalah sebuah aplikasi file javascript yang berjalan di background dan tidak dapat berintarksi langsung dengan halaman website maupun tidak bisa mengakses DOM Secara langsung tetapi dapat berkomunikasi melalui messages (Post Messages). pwa harus menggunakan service worker karena service worker bertindak sebagai proxy server diantara web app, browser dan jaringan(bila tersedia). pada load pertama kali service worker akan mendownload content webiste tersebut dan di simpan dicache browser. dengan demikian jika mengakses lagi dapat memuat website tersebut lebih cepat karena tinggal mengambil data dari cache browser yang disimpan tadi. Dengan cara ini website akan bisa diakses secara offline atau sedang mengalami sinyal yang buruk. Perusahan yang sudah menerapkan pwa pada website mereka

Alibaba

trivago

Instagram

Twitter

dan masi banyak lagi website keren yang sudah menggunakan pwa. dengan menggunakan pwa akan memberikan pengalam kepada user yang membuka website kita sebagai berikut : => Reliable  proses load website akan lebih cepat user tidak lagi melihat downasaur bahkan dalam jaringan yang sangat buruk sekalipun. => fast dengan respon yang cepat dapat mencegah user meninggalkan website kita karena 53% user akan meninggakan webiste kita jika dalam 3 menit webiste kita tidak memberikan respon apapun atau malah muncul downasaur. => Engaging karena pwa terlihat seperti aplikasi native pada umunya maka akan memberikan user  experience yang sangat mendalam. hal yang perlu di perhatikan dalam pembuatan pwa: Service Worker service worker bertindak sebagai proxy server diantara web app, browser dan jaringan(bila tersedia). pada load pertama kali service worker akan mendownload content webiste tersebut dan di simpan dicache browser. dengan demikian jika mengakses lagi dapat memuat website tersebut lebih cepat karena tinggal mengambil data dari cache browser yang disimpan tadi. Dengan cara ini website akan bisa diakses secara offline atau sedang mengalami sinyal yang buruk. Manifest File manifest File adalah file JSON config yang mencakup tentang informasi dari aplikasi seperti jenis icon yang akan disimpan dilayar ketika diisntall, tema,dan nama pendek dari aplikasi. HTTPS service worker memerlukan https untuk tujuan keamanan.karena service worker memiliki kemampuan untuk memodifikasi respon disisi client dan dapat mencegah request jaringan, semua komunikasi antara browser dan jaringan perlu di dienkripsi. alat yang dibutuhkan untuk membuat pwa:

1. Chrome 52 atau di atasnya
2. Web Server for Chrome, atau server web pilihan Anda
3. Text Editor
4. Pengetahuan dasar tentang HTML, CSS, JavaScript, dan Chrome DevTools

Post Data Ke Rest API Menggunakan React Js

import React from "react";
import ReactDOM from "react-dom";
import axios from 'axios';
import "./styles.css";

class App extends React.Component {
  constructor(){
    super();
 this.state={
      title: '',
      body: '',
      userId: 1
    }
  }  
  onChange =(e) =>{
    this.setState({
      [e.target.id]:e.target.value
    })
  }
 onSubmit=()=>{
    let data ={
      title: this.state.title,
      body: this.state.body,
      userId: this.state.userId
    }
    axios.post('https://jsonplaceholder.typicode.com/posts',data)
 .then((res)=>{
      console.log(res)
 }).catch((err)=>{
      console.log(err)
    })
  }
  render() {
    return (
      <div className="App">
        <div>
          <label>Title</label>
          <input type="text" id="title" onChange={this.onChange} />
        </div>
        <div>
          <label>Body</label>
          <textarea id="body" onChange={this.onChange} />
        </div>
        <button type="button" onClick={this.onSubmit}>Post</button>
      </div>
    );
  }
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

demikian lah cara untuk post data ke rest api menggunakan react js dan axios, cukup simple kan?