1. HTML
  2. HTML Boilerplate

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        
    </body>
    </html>


    HTML Boilerplate with Bootstrap CDN and Fontawesome CDN

    <!doctype html>
    <html lang="en">
        <head>
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
    
        <!-- Bootstrap CSS -->
        <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
    
        <!-- Fontawesome CDN -->
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" integrity="sha512-HK5fgLBL+xu6dm/Ii3z4xhlSUyZgTT9tuc/hSrtw6uzJOvgRr2a9jyxxT1ely+B+xFAmJKVSTbpM/CuL7qxO8w==" crossorigin="anonymous" />
    
        <title>Hello, world!</title>
        </head>
        <body>
        <h1>Hello, world!</h1>
    
        <!-- Optional JavaScript; choose one of the two! -->
    
        <!-- Option 1: Bootstrap Bundle with Popper -->
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
    
        <!-- Option 2: Separate Popper and Bootstrap JS -->
        <!--
        <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-q2kxQ16AaE6UbzuKqyBE9/u/KzioAlnx2maXQHiDX9d4/zp8Ok3f+M7DPm+Ib6IU" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-pQQkAEnwaBkjpqZ8RU1fF1AKtTcHJwFl3pblpTlHXybJjHpMYo79HY3hIi4NKxyj" crossorigin="anonymous"></script>
        -->
        </body>
    </html>


    Bootstrap CSS CDN

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">


    Bootstrap Bundle with Popper CDN

    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>


    Fontawesome CDN

    <!-- fontawesome cdn -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" integrity="sha512-HK5fgLBL+xu6dm/Ii3z4xhlSUyZgTT9tuc/hSrtw6uzJOvgRr2a9jyxxT1ely+B+xFAmJKVSTbpM/CuL7qxO8w==" crossorigin="anonymous" />


  3. CSS
  4. CSS Media Query

    @media only screen and (max-width: 768px) {
            body {
              background-color: lightblue;
            }
          }


  5. React JS
  6. React array map method

    import React from 'react';
    
    const Gallery = () => {
    const data=[
        {
            id:1,
            img:"https://picsum.photos/210/300",
        },
        {
            id:2,
            img:"https://picsum.photos/210/300",
        },
    ];
    
    
    const arraydata = data.map((val, i)=>{
        return(
            <img src={data[i].img}/>
        );
        
    });
    
    return (
        <>
            <h1>Gallery</h1>
            <div className="gallery">
                {arraydata}
            </div>
        </>
    )
    }
    
    export default Gallery;


    Link To Different Pages

    
    <!-- This is on Index.js page -->
    import React from 'react';
    import ReactDOM from 'react-dom';
    import App from './App';
    import './index.css';
    import {BrowserRouter} from 'react-router-dom';
    
    ReactDOM.render(
        <>
    <BrowserRouter><App/></BrowserRouter></>,
    document.getElementById('root'));
    
    <!-- This is on App.js page -->
    
    import Home from './Pages/Home';
    import Home from './Pages/About';
    import Home from './Pages/Contact';
    
    function App(){
    return(
        <Switch>
            <Route exact path="/" component={Home} />
            <Route exact path="/About" component={About} />
            <Route exact path="/Contact" component={Contact} />
            <Redirect to="/"/>
        </Switch>
    );
    }
    export default App;
    
    <!-- This is on Navigation.jsx page -->
    import React from 'react';
    import {NavLink} from 'react-router-dom';
    function Nav(){
        return(
            <>
                <nav>
                    <div className="navbar">
                        <NavLink to="/">Portfolio</NavLink>
                        <ul>
                            <li><NavLink to="/">Home</NavLink></li>
                            <li><NavLink to="/About">About</NavLink></li>
                            <li><NavLink to="/Contact">Contact</NavLink></li>
                        </ul>
                    </div>
                </nav>
            </>
        );
    }
    export default Nav;
    


    Use State and Ternary Operator

    import React, { useState } from 'react'
    import Back from '../Component/Back'
    
    const IncDecNumber = () => {
        const [num, setNum]=useState(0); //Use State
        const incNum=()=>{
            setNum(num+1);
        }
        const decNum=()=>{
    
            // If Else statement
            // if(num > 0)
            // setNum(num-1);
            // else{
            //     setNum(0);
            //     alert("Sorry, Zero limit reached")
            // }
    
            num > 0 ? setNum(num-1) : setNum(0); //Ternary Operater
        }
        return (
            <>
            <Back/>
            <div className="center_div">
            <div className="IncDecNum">
           <h1>{num}</h1>
           <div>
           <button className="btn1" onClick={incNum}>Increment</button>
           <button className="btn2" onClick={decNum}>Decrement</button>
           </div>
          
          </div>
          </div>
                
            </>
        )
    }
    
    export default IncDecNumber;
    


    Props in react

    <!-- Props file -->
    import React from 'react';
    import Back from '../Component/Back';
    
    const Props = (props) => {
      return (
        <>
          <Back />
          <div className='props'>
            <h1>Hi I am {props.name}</h1>
          </div>
        </>
      );
    };
    
    export default Props;
    
    <!-- where I can defined the props -->
    
    import React from 'react';
    import Props from './Props';
    
    const Help = () => {
      return (
        <div>
          <Props name='Arshad' /> <!-- props -->
          <Props name='Arshad' /> <!-- props -->
        </div>
      );
    };
    
    export default Help;
    


    Params in react

    <!-- params  -->
    import React from 'react';
    import { useParams } from 'react-router-dom';
    import Back from '../Component/Back';
    
    const Params = () => {
      const { fname, lname } = useParams();
      return (
        <>
          <Back />
          <h1>
            Hello I Am {fname}
            {lname}
          </h1>
        </>
      );
    };
    
    export default Params;
    
    <!-- params app.js  -->
    import React from 'react';
    import Params from './Practices/Params';
    
    function App() {
      return (
        <>
        
          <Switch>
            
            <Route exact path='/params/:fname/:lname' component={Params} /> <!-- params (/:fname/:lname)  -->
           
          </Switch>
        </>
      );
    }
    export default App;
    
    <!-- params menu  -->
    import React from 'react';
    import { NavLink } from 'react-router-dom';
    
    const PracticeHeading = () => {
      return (
        <>
          <div className='heading_link'>
            
            <NavLink to='/params/Arshad/Qadri'>Params</NavLink> <!-- params  -->
          </div>
        </>
      );
    };
    
    export default PracticeHeading;
    


    useLocation in react

    import React from 'react';
    import Back from '../Component/Back';
    import { useLocation } from 'react-router-dom';
    
    const Location = () => {
      const location = useLocation();
      return (
        <>
          <Back />
          <p>This is my url path or location {location.pathname} </p>
        </>
      );
    };
    
    export default Location;
    


    useHistory in react

    import React from 'react';
    import { useHistory } from 'react-router-dom';
    
    const History = () => {
      const history = useHistory();
      const goBack = () => {
        history.goBack();
      };
      const push = () => {
        history.push('/');
      };
      return (
        <>
          <h1>This is useHistory</h1>
          {/* This is reditect to theprevious page */}
          <button className='goBack_push' onClick={goBack}>
            Go Back
          </button>
          {/* This is push to the home page */}
          <button className='goBack_push' onClick={push}>
            Push
          </button>
        </>
      );
    };
    
    export default History;   
    


    Input in react (using example)

    import React, { useState } from 'react';
    import Back from '../Component/Back';
    
    const SearchImg = () => {
      const [img, setImg] = useState('');
      const search = e => {
        const data = e.target.value;
        e.preventDefault();
    
        setImg(data);
        console.log(img);
      };
      const Simg = `https://source.unsplash.com/400x300?${img}`;
      const imgStyle = {
        height: 300,
        width: 400,
        border: '5px solid red',
      };
      return (
        <>
          <Back />
          <div> className='dearchImg'>
            <input
              type='text'
              value={img}
              onChange={search}
              placeholder='Search here...'
            />
            <br />
            {img === '' ? null : <img src={Simg} alt='img' style={imgStyle} />}
          </div>
        </>
      );
    };
    
    export default SearchImg;
    


www.000webhost.com