javascript react js

Belajar Boostrap membuat website company profile dengan React JS

Pada pertemuan kali ini kita akan lanjut kembali belajar boostrap pada React js untuk temen-temen yang belum install react js bootrstrap silahkan ikutin tutorial sebelumnya Cara instal React js Bootstarp.

Kita akan membuat file baru beranam Grid.jsx di dalam folder component

kursus react js

 

jika teman teman sudah membuat file grid.jsx langkah selanjutnya pindahklan file App.js kedalam folder component

React js

masih di dalam file App.jsx langkah selanjutnya kita akan membuat navbar atau menu pada website yang kita buat

Silahkan tambahkan script seperti dibawah kedalam file App.jsx, untuk Logo Silahkan gunakan logo yang temen-temen punya atau bisa ambil dari website resminya Indihome

import React,{Component} from 'react';
import Grid from './Grid';
import '../style/styles.css';
import $ from 'jquery';
window.jQuery = $;
window.$ = $;
global.jQuery = $;

class App extends Component {
    render(){
      return(
        <div className="header">
         
          <div className="container">
            <nav className="navbar navbar-expand-lg navbar-light warna">
                  <a className="navbar-brand" to=""> <img className="logo" src={require('../logo/logo.png')}  alt="logo"/></a>
                  <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">
                          <a class="nav-a dropdown-toggle text-white" to="" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            PROMO
                          </a>
                          <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                            <a class="dropdown-item " to="/">PROMO</a>
                            <a class="dropdown-item " to="/grid">Partnership</a>
                          </div>
                        </li>
                        <li className="nav-item dropdown">
                            <a className="nav-a dropdown-toggle text-white" to="" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            PAKET & ADD-ON
                            </a>
                            <div className="dropdown-menu" aria-labelledby="navbarDropdown">
                            <a className="dropdown-item" to="">Action</a>
                            <a className="dropdown-item" to="">Another action</a>
                            <div className="dropdown-divider"></div>
                          
                            </div>
                        </li>
                        <li className="nav-item">
                            <a className="nav-a text-white">PUSAT BANTUAN</a>
                        </li>
                      </ul>
                  </div>
              </nav>    
              
          </div>
          <div className="">
              <Grid/>
          </div>
        </div>
    )
    }
}

export default App;

 

Didalam Folder style buat folder dengan nama styles.css

.warna{
    background-color: red;
  }
  .logo{
    width: 200px;
  }
  .header{
    background-color: red;
    height: 70px;
  }
  .toggler{
    background-color: transparent;
  }




Selanjutnya jalankan npm start di cmd atau terminal , dan hasilnya seperti Gambar diBawah:

Kursus react js

jika tampilan webiste nya sudah seperti diatas langkah selanjutnya instal React Router Dom

1. Cara install React router Dom

buka cmd teman-teman dan jalankan npm install react-router-dom untuk lebih jelasnya tentang react Router silahkan kunjungi situs resminya , install React Router   

2. Jika React Router dom sudah terinstal silahkan teman teman         buka kembali App.js nya dan tambahkan sintak seperti berikut:

import React,{Component} from 'react';
import Grid from './Grid';
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(
        <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>
                    </ul>
                </div>
            </nav>     
          </div>
          <div className="">
              <Grid/>
          </div>
        </div>
    )
    }
}

export default App;

 

dari script diatas bisa dilihat disitu kita import React-router-dom dan merubah tag <a href=””> menjadi <Link to=””>

 

Selanjutnya kita akan membuat file baru,  dengan nama Home.jsx didalam folder component buat folder Home

react js boostrap 3

Masih di dalam file Home.jsx silahkan tambahkan scriptnya seperti yang di bawah ini:

import  React, { Component } from 'react';
class Home extends Component {
    render() { 
        return (  
            <div className="slider">
                <div className="container sliderimage">
                    <div className="row">
                      <img className="img-fluid rounded slide " alt="Responsive image" src={require('../../gambar/desktop.jpg')} />
                    </div>
                </div>
                <div className="container notive">
                    <div className="row">
                        <div className="col-md-12">
                                <div className="alert alert-danger danger" role="alert">
                                     <p className="text-white text-center">A simple success alert—check it out!</p> 
                                </div>
                        </div>
                    </div>
                </div> 
                {/* end slider */}
                <div className="container slide">
                    <div className="row">
                        <div className="col-md-8">
                        <div id="carouselExampleIndicators" className="carousel slide" data-ride="carousel">
                                <div className="carousel-inner">
                                    <div className="carousel-item active">
                                
                                    <img className="img-fluid d-block w-100" src={require('../../gambar/slide1.jpg')} />
                                    </div>
                                    <div className="carousel-item">
                                    <img className="img-fluid d-block w-100 "  src={require('../../gambar/slide2.jpg')} />
                                
                                    </div>
                                    <div className="carousel-item">
                                    <img className="img-fluid d-block w-100"  src={require('../../gambar/slide3.jpg')} />
                                    
                                    </div>
                                    <a className="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
                                        <span className="carousel-control-prev-icon" aria-hidden="true"></span>
                                        <span className="sr-only">Previous</span>
                                    </a>
                                    <a className="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
                                        <span className="carousel-control-next-icon" aria-hidden="true"></span>
                                        <span className="sr-only">Next</span>
                                    </a>
                                </div>
                            </div>
                        </div>
                        <div className="col-md-4">
                        <img className="img-fluid rounded slide " alt="Responsive image" src={require('../../gambar/mini-banner-1-raw.png')} />

                        <img className="img-fluid rounded slide " alt="Responsive image" src={require('../../gambar/desktop.jpg')} />
                        </div>
                    </div>
                </div>


                

            </div>
        );
    }
}
 
export default Home;

Untuk file gambar nya silahkan gunakan gambar masing-masing, jika ingin sama gunakan gambar dari situs resminya, <img className=”img-fluid rounded slide ” alt=”Responsive image” src={require(‘../../gambar/desktop.jpg’)} /> </div>

 

buka kembali file styles.css dan tambahkan sitak berikut:

.warna{
    background-color: red;
  }
  .logo{
    width: 200px;
  }
  .header{
    background-color: red;
    height: 70px;
  }
  .toggler{
    background-color: transparent;
  }

  .sliderimage{
    margin-top: 50px;
  }
  .slider{
    background-color: rgb(186,3,2);
    height: 400px;
    margin-top: -50px;
  }
  .slide{
    padding-top: 30px;
  }
  .notive{
    margin-top: 20px;
  }
  .danger{
    background-color: rgb(186,3,2) !important;
    
  }

  .slide{
    margin-bottom: 20px;
  }


  @media only screen and (max-width: 480px) {
    .slider{
      background-color: rgb(186,3,2);
      height: 90px;
    }
  }

Buka kembali file App.js nya dan silahkan ganti tag <a menjadi <Link to=””>

import React,{Component} from 'react';
import Grid from './Grid';
import Home from './Home/Home';
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>
                    </ul>
                </div>
            </nav>             
         </div>
         <div className="">
        

            <Route path="/" exact component={Home}/>
            <Route path="/grid"  component={Grid}/>
         </div>

        </div>
        </Router>
      )
    }
}

export default App;

Jika sudah jalankan npm start

maka hasilnya seperti gambar di bawah :

 

Tinggalkan Balasan