React js Merupakan Library javascript yang memudahkan para Web Developer yang akan membuat suatu aplikasi berbasis websiste yang tampilanya menjadi lebih interaktif, dimana bagian bagiannya nanti akan dibentuk dalam komponen agar mudah dipakai berkali-kali.

Pada pembahasan Kali ini Kita akan coba Belajar Membuat Tampilan form Login Pada React js , dan kita juga akan menggunakan CSS dari Bootstrap 4, agar tampilan lebih responsive dan mobile mobile friendly agar tampilan web lebih di sukai oleh user dan google.

Jika untuk temen-temen yang masih baru silahakn baca dulu tutorial sebelumnya yaitu cara install react js di windows

Karena ini adalah Tutorial lanjutan dari pembahasan sebelumnya tentang

Belajar Boostrap membuat website company profile dengan React JS

silahkan Buka kembali text editor dan projek yang sudah temen-temen buat, kita akan membuat folder baru bernama Login agar sususan folder biar lebih rapih, untuk lebih detailny lihat gambar di bawah y :

 

Didalam folder Login kita buat file Login.jsx untuk untuk lebih detail tentang scriptnya silahkan cek di bawah y :

disini kita menggunakn script dari bawan bootstrap agar proses pembuatan form login jadi lebih mudah dan lebih cepat,

import React, {Component} from 'react';

class Login  extends Component {
    
    render() { 
        return (
            <div className="container">
                <div className="row justify-content-center">
                        <div className="col-md-6">
                        <h2>Login Sistem</h2>
                            <form>
                                <div className="form-group">
                                    <label for="exampleInputEmail1">Username </label>
                                     <input type="email" className="form-control" placeholder="Masukan username anda"  required/>
                                </div>
                                <div className="form-group">
                                    <label for="exampleInputPassword1">Password</label>
                                    <input type="password" className="form-control" placeholder="Password" />
                                </div>
                                <div class="form-check">
                                    <input type="checkbox" className="form-check-input" id="exampleCheck1"/>
                                    <label className="form-check-label" for="exampleCheck1">Check me out</label>
                                    </div>
                                    <button type="submit" class="btn btn-primary btn-lg btn-block">Submit</button>   
                            </form>
                        </div>
                </div>
            </div> 
         );
    }
}
 
export default Login ;

 

script diatas adalah isi dari file  Login.jsx

kemudian kita buka kembali file dari App.js nya, dan tambahkan sitak seperti di bawah ini,

untuk temen-temen yang belum lihat seri tutorial sebelumnya silahkan ikuti dulu y biar tidak bingung,

Menampilkan data Api dan membuat portal berita

Jika sudah mengikuti dari awal semoga tidak bingung karena tutorial ini saya bahas step by step, agar lebih paham

silahakn buka file App.js nya dan scriptnya seperti di bawah ini y,

 

import React,{Component} from 'react';
import Grid from './Grid';
import Home from './Home/Home';
import News from './News';
import Login from './Login/Login';


import '../style/styles.css';
import { BrowserRouter as Router,Route,Link } from "react-router-dom";
import $ from 'jquery';
window.jQuery = $;
window.$ = $;
global.jQuery = $;

class App extends Component {
    render(){
      return(
        <Router>
        <div className="header">
         <div className="container">
            <nav className="navbar navbar-expand-lg navbar-light warna">
                <Link className="navbar-brand" to=""> <img className="logo" src={require('../logo/logo.png')}  alt="logo"/></Link>
                <button className="navbar-toggler toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                    <span className="navbar-toggler-icon"></span>
                </button>

                <div className="collapse navbar-collapse" id="navbarSupportedContent">
                    <ul className="navbar-nav ml-auto">
                      <li class="nav-item dropdown">
                        <Link class="nav-link dropdown-toggle text-white" to="" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                          PROMO
                        </Link>
                        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                          <Link class="dropdown-item " to="/">PROMO</Link>
                          <Link class="dropdown-item " to="/grid">Partnership</Link>
                        </div>
                      </li>
                      <li className="nav-item dropdown">
                          <Link className="nav-link dropdown-toggle text-white" to="" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                          PAKET & ADD-ON
                          </Link>
                          <div className="dropdown-menu" aria-labelledby="navbarDropdown">
                          <Link className="dropdown-item" to="">Action</Link>
                          <Link className="dropdown-item" to="">Another action</Link>
                          <div className="dropdown-divider"></div>
                         
                          </div>
                      </li>
                      <li className="nav-item">
                          <Link className="nav-link text-white">PUSAT BANTUAN</Link>
                      </li>
                      <li className="nav-item">
                          <Link className="nav-link text-white" to="/news">News</Link>
                      </li>
                      <li className="nav-item">
                          <Link className="nav-link text-white" to="/login">Login</Link>
                      </li>
                    </ul>
                </div>
            </nav>             
         </div>
         <div className="">
        

            <Route path="/" exact component={Home}/>
            <Route path="/grid"  component={Grid}/>
            <Route path="/news" component={News}/>
            <Route path="/login" component={Login}/>
         </div>

        </div>
        </Router>
      )
    }
}

export default App;

 

jika sudah buka kembali terminalnyadan masuk ke direktori projeknya kemudian jalankan npm start

 

maka hasilnya seperti gambar di bawah ini :