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

$ npm install --save semantic-ui-css

$ mkdir src/containers
$ mkdir src/components

Baca juga  apa itu react js belajar react js

$ cd aplikasi-reactjs
$ npm install --save react-router-dom

$ mkdir src/pages

$ npm start

$ npm run build

Options -MultiViews
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.html [QSA,L]

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

Apa itu Progressive Web Apps(PWA)  ?

Alibaba

trivago

Instagram

Twitter

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);

Get Data Dari API Menggunakan React js

Persiapan untuk mulai get data dari rest api

cara install axios

npm install axios

yarn add axios

import axios from 'axios';

https://jsonplaceholder.typicode.com/

constructor() {
    super();
    this.state = {
      data: []
    };
  }

    componentDidMount() {
    axios.get("https://jsonplaceholder.typicode.com/posts").then(res =>
      this.setState({
        data: res.data
      })
    );
  }

render() {
    return <>{this.state.data.map((data, key) => {
    return  	
  })}</>;
  }

import React, { Component } from "react";
class List extends Component {
  render() {
    return (
      <div>
        <h4>{this.props.judul}</h4>
        <p>{this.props.isi}</p>
        <hr/>
      </div>
    );
  }
}
export default List;

import React, { Component } from "react";
import axios from "axios";
import List from "./List";
class App extends Component {
  constructor() {
    super();
    this.state = {
      data: []
    };
  }
  componentDidMount() {
    axios.get("https://jsonplaceholder.typicode.com/posts").then(res =>
      this.setState({
        data: res.data
      })
    );
  }
  render() {
    return <>{this.state.data.map((data, key) => {
    return <List judul={data.title} isi={data.body} />
  })}</>;
  }
}
export default App;

kesimpulan

Menghandle Form Pada React Js

import React, { Component } from "react";
class App extends Component {
  constructor(){
    super();
 this.state={
      email:'',
      password:''
    }
  }
  //mengambil text value dari input 
  //kemudia di pindahkan ke state
 onChang=(e)=>{
    this.setState({
      [e.target.id]:e.target.value
    })
  }
  //mengumpulkan data dari state untuk di kirimkan ke server
 onSubmit=()=>{
    let data={
      email:this.state.email,
      password:this.state.password
    }
    console.log(data);
  }
  render() {
    return <div>
        <input type="email" id="email" placeholder="masukan email" onChange={this.onChang} /><br/>
        <input type="password" id="password" placeholder="Masukan password" onChange={this.onChang}/><br/>
        <button type="button" onClick={this.onSubmit}>login</button>
    </div>;
  }
}
export default App;

Lists and Keys Pada React JS

semple data

[
  {id:1,nama:'soto',harga:8000},
  {id:2,nama:'sate',harga:7000},
  {id:3,nama:'bakso',harga:10000},
  {id:4,nama:'nasi campur',harga:5000}
]

import React, { Component } from "react";
import List from "./List";
class App extends Component {
  constructor() {
    super();
    this.state = {
      list: [
        { id: 1, nama: "soto", harga: 8000 },
        { id: 2, nama: "sate", harga: 7000 },
        { id: 3, nama: "bakso", harga: 10000 },
        { id: 4, nama: "nasi campur", harga: 5000 }
      ]
    };
  }
  render() {
    return (
      <>
        <h1>daftar makanan</h1>
        <ol>
          {this.state.list.map((data, key) => {
            return <List key={key} nama={data.nama} harga={data.harga} />
          })}
        </ol>
      </>
    );
  }
}
export default App;

import React, { Component } from "react";
class List extends Component {
  render() {
    return (
      <li>
        {this.props.nama} = {this.props.harga}
      </li>
    );
  }
}

export default List;

Coditional Rendering React js

Conditional Rendering Pada React js

// ternary
import React, { Component } from 'react';
class App extends Component {
  constructor(){
    super();
 this.state={
      isLoggedIn:true
    }
  }
  render() {
    return (
       <div>
      {this.state.isLoggedIn ? (
        <button>Logout</button>
      ) : (
        <button>Login</button>
      )}
    </div>
    );
  }
}

export default App;

import React, { Component } from 'react';
class App extends Component {
  constructor(){
    super();
 this.state={
      isLoggedIn:true
    }
  }
  render() {
    return (
       <div>
      {this.state.isLoggedIn &&
          <h5>selamat datang</h5>
      }
    </div>
    );
  }
}

export default App;

React event handling functions

langsung aja kita praktek aja

//html
<button id="foobutton" onclick="handleClick()">
  simpan
</button>

//js
function handleClick() {
  alert('tombol simpan diclik');
};

//code react
class ButtonMe extends Component {
  handleClick = () => {
    alert('tombol di clik');
  }
  render() {
    return <button onClick={this.handleClick}>kilk saya</button>
  }
}

// cara pertama
class Component1 extends Component {
constructor(){
super();
this.handleClick = this.handleClick.bind(this);
}
handleClick(){
    alert('clicked.');
  }
  render() {
    return <button onClick={this.handleClick}>Click Me</button>
  }
}

// cara kedua
class Component1 extends Component {
  handleClick = () => {
    alert('clicked.');
  }
  render() {
    return <button onClick={this.handleClick}>Click Me</button>
  }
}

Latihan Event Handling

import React, { Component } from 'react';
class App extends Component {
  constructor(){
    super();
 this.state={
      num:10
    }
 this.increment=this.increment.bind(this);
  }
  increment(){
    this.setState({
      num:this.state.num + 1
    })
  }
 decrement=()=>{
    this.setState({
      num:this.state.num - 1
    })
  }
  render() {
    return (
      <div>
        <button onClick={this.increment}>+</button>
        <div>{this.state.num}</div>
        <button onClick={this.decrement}>-</button>
      </div>
    );
  }
}

export default App;

React Lifecycle

Fase Mounting

1. constructor : disini akan di inisialisasikan state
2. componentDidMount : biasnya disini digunakan untuk me-request data dari rest api
3. componentWillMount :  bisa digunakan untuk merubah state yang tidak mempengaruhi UI

Fase Updating

Sumber: https://rangle.github.io/react-training/react-lifecycles/

React Fragment

class BlogPostExcerpt extends Component {
  render() {
    return (
      <React.Fragment>
        <h1>Judul Blog</h1>
        <p>ini isi blog</p>
      </React.Fragment>
    )
  }
}

class BlogPostExcerpt extends Component {
  render() {
    return (
      <>
        <h1>Judul Blog</h1>
        <p>ini isi blog</p>
      </>
    )
  }
}

apa itu props

import React, { Component } from 'react';
import Welcome from "./Welcome"

class App extends Component {
  render() {
    return (
       <div classname="App">
        <welcome name="andi"/>
       </div>
     );
  }
}

export default App;

import React, { Component } from 'react';
class Welcome extends Component {
  render() {
    return (
      <h1>Welcome back,{this.props.name}</h1>
    );
  }
}
export default Welcome;

Welcome.defaultProps={
  name:'eka'
}

static defaultProps={
  name:'eka'
}

npm install prop-types --save

import PropTypes from 'prop-types';

Welcome.propsType={
    name:PropType.string
}

Welcome.propsType={
    name:PropType.string.isRequired
}

• PropTypes.any — untuk type prop apapun
• PropTypes.bool — untuk type prop boolean 
• PropTypes.number — untuk type prop number 
• PropTypes.string — untuk type prop string 
• PropTypes.func — untuk prop berupa function 
• PropTypes.array — untuk type prop berupa array 
• PropTypes.object — untuk type prop berupa object 
• PropTypes.symbol — untuk type prop berupa symbol 

class App extends Component {
  render() {
    return (
       <div classname="App">
        <welcome name="andi"/>
       </div>
     );
  }
}

export default App;

import React, { Component } from 'react';
import PropType from "prop-types"
class Welcome extends Component {
  render() {
    return (
      <h1>Welcome back,{this.props.name}</h1>
    );
  }
}
 Welcome.defaultProps={
  name:'eka'
  }
 Welcome.propsType={
    name:PropType.string
  }
export default Welcome;

create-react-app namaproject

App.js

import React,{ Component } from 'react';
class App extends Component{
  render(){
    return(
    <h1>hello </h1>
    )
  }
 }
 export default App;

import React,{ Component } from 'react';

export default Nama component

App.js

import React, { Component } from 'react';
class Nama extends Component {
  render() {
    return (
      <span>developer</span>
    );
  }
}
class App extends Component {
  render() {
    return (
      <div className="App">
        <h1>hello  <Nama /></h1>
        <Footer />
      </div>
    );
  }
}

export default App;

App.js

import React, { Component } from 'react';
import Header from './Header';
class Nama extends Component {
  render() {
    return (
      <span>developer</span>
    );
  }
}
const Footer =()=>{
return(
  <h3>ini footer</h3>
)
}
class App extends Component {
  render() {
    return (
      <div className="App">
        <h1>hello  <Nama /></h1>
        <Footer />
      </div>
    );
  }
}
export default App;

Header.js

import React,{ Component } from 'react';
class Header extends Component {
  render() {
    return (
      <div className="App">
        <h1>ini header</h1>
      </div>
    );
  }
}
export default Header;

import Header from './Header';

App.js

import React, { Component } from 'react';
import Header from './Header';
class App extends Component {
  render() {
    return (
      <div className="App">
        <Header />
        <h1>hello </h1>
        <Footer />
      </div>
    );
  }
}
export default App;

Berikut penjelasan tetang cara melakukan caching di pwa

hanya cache

hanya jaringan

cache kemudian jaringan

Cache kemudian network sambil masukkan ke cache lagi

jaringan kemudian cache

cache atau jaringan

Apa itu React JS ?

cara install react js

node -v

v8.15.0

npm -v

6.4.1

npm i -g create-react-app

create-react-app --varsion

2.1.1

create-react-app hello-dev

import React, { Component } from 'react';
class App extends Component {
  render() {
    return (
      <h1>selamat ada telah berhasil membuat project reactjs</h1>
    );
  }
}
export default App;

npm start