Steps.txt

1.  comment
/* <!-- 

 --> */

2. route template

<div class="paragraph-section">
        <div class="sub-paragraph">
             <h2>Design Projects</h2>
             
        </div>
</div>

3. background image


00. style={{backgroundImage: `url("assets/images/uploads/1.jpg")`,  backgroundRepeat: 'no-repeat',backgroundPosition: 'left center'}}
01. style={{backgroundImage: 'url("./assets/images/uploads/1.jpg")'}}

<div className="bgcommanSec" style={{ backgroundImage: `url("assets/images/uploads/1.jpg")` }} > </div>


 01.              ======== #css: create folder on src > images > nav-arrow.png ========

.owl-carousel .owl-nav button.owl-prev span{
	
	background-image: url(./images/nav-arrow.png);
	background-repeat: no-repeat;
	background-position: left center;
	background-size: 18px 53px;
	display: inline-block;
	transform: rotate(180deg);
}

<div className=" owl-prev" >  </div>

02.                        =========== ## js ## backgroundImage: `url(${favicon})`  ==============   

import favicon from "../images/favicon.png";

 <div style={{
            width: '150px',
            height:'150px',
            backgroundImage: `url(${favicon})`,
            backgroundRepeat: 'no-repeat',
	    backgroundPosition: 'left center'
          }}> 
</div>

OR
03.  backgroundImage: `url(${require('./images/nav-arrow.png')})`,

 <div style={{
            width: '150px',
            height:'150px',
            backgroundImage: `url(${require('../images/nav-arrow.png')})`,
            backgroundRepeat: 'no-repeat',
	    backgroundPosition: 'left center'
          }}> 
</div>

 04.               ======== images/index.js ==============

src\images\index.js
const IMAGES = {
    imgFav: require('./favicon.png'),
    imgArrow: require('./nav-arrow.png'),
}

export default IMAGES;

                ** and page import const IMAGES any page

import IMAGES from '../images/index.js'

<div style={{ backgroundImage: `url(${IMAGES.imgFav})`}}> 
</div>


=== Bootstrap ====

npm install react-bootstrap bootstrap


<div className="container"> 
   <div className="row"> 

     <div className="col-sm-7 col-md-7 col-lg-7"> </div>

   </div> 
</div> 

=== common section bg image ===

<div className="bgcommanSec" style={{backgroundImage: `url("assets/images/uploads/2.jpg")`}}></div>


	                                      ==== react run dev ====
	
npm install --save-dev nodemon
Go in the package.json and add "dev": "nodemon ./bin/www"



	==== react run dev ====
	
	npm install --save-dev nodemon
Go in the package.json and add "dev": "nodemon ./bin/www"


                              ===== Laravel react ==

  npm i react-axios

  ==== React with Laravel =====


https://legacy.reactjs.org/docs/faq-ajax.html

0. npm i axios


1. php artisan make:controller frontend/BasicController

    public function index()
    {
        $basics = Basic::get();

        echo json_encode(['Success' => "Yes", 'datas' => $basics]);

    }


2. routes\Api.php

    use App\Http\Controllers\frontend\BasicController as FrontendBasicController;
    Route::get('/basic-frontend', [FrontendBasicController::class, 'index'])->name('basic.fe');


OR
    Route::get('/basic-fe', function () {
    $basics = Basic::get();
    return response()->json($basics);
    });


3. json data link
    http://127.0.0.1:8000/api/basic-fe


4. config\cors.php

     'allowed_origins' => ['http://localhost:3000/'],

    php artisan optimize



5. specific page.js


import React, { useEffect, useState } from "react";

const [getuserdata, setUserdata] = useState([]);
  console.log(getuserdata);

  const getdata = async () => {
    const res = await fetch("http://127.0.0.1:8000/api/news-fe", {
      method: "GET",
      headers: {
        "Content-Type": "application/json",
      },
    });

    const data = await res.json();
    console.log(data);

    if (res.status === 422 || !data) {
      console.log("error ");
    } else {
      setUserdata(data);
      console.log("get data");
    }
  };

  useEffect(() => {
    getdata();
  }, []);



 {getuserdata.map((element, id) => {
    return (
      <>

        <tr>
            <th scope="row" key={id} item={element}>{id + 1}</th>
            <td>{element.name}</td>
            <td>{element.email}</td>
            
        </tr>
      
      </>
    )
})}




      ===== Image =====

<img src={`http://127.0.0.1:8000/images/${element.image}`}  alt={element.title} />



Database: 


http://inspace.polwel.com/admin


Db: polwel_inspace
User: polwel_inspace
Pass:  gMvh+)c-1=4N



                                    // create short Api Path in react 

#create page 

export const API_PATH = 'http://127.0.0.1:8000/api';
export const MAIN_PATH = 'http://127.0.0.1:8000';

// http://127.0.0.1:8000/api

// https://inspace.bdprogrammers.com/admin/api



                                    // USE in any page

// import { API_PATH, MAIN_PATH } from '../API_PATH';

// `${API_PATH}/register.php`


// await axios
// .post(`${API_PATH}/register.php`, formData, {
//   headers: { 'content-type': 'multipart/form-data' },
// })


// image

{/* <img src={`${API_PATH}/assets/images/product/${item.thumbnail}`} alt="shope" /> */}

// src={`${MAIN_PATH}/images/${item.logo}`}



                        // Cpanel
                        
https://www.inspaceatelier.com
https://www.inspaceatelier.com/admin




                                ====  Onclick Active class ====

const [active, setActive] = useState(null)

<li
  key={item.id}

  onClick={() => setActive(item)}
  className={`list-group-item ${active == item && 'active'}`} 
>

  {item.name}
</li>

                      ===  Onclick Show/ hiddden ====


 const [show, setShow] = React.useState();

 <button  onClick={() => setShow(true)}>
                Show
  </button>


 <div className={`${show ? "hidden" : ""}`}  >



 =========== Menu ============= =========== Active class ==============

import { useLocation } from "react-router-dom";

//assigning location variable
    const location = useLocation();

//destructuring pathname from location
    const { pathname } = location;

//Javascript split method to get the name of the path in array
    const splitLocation = pathname.split("/");

    // return 

className={splitLocation[1] === "" ? "active" : ""}

<li className={splitLocation[1] === "" ? "active" : ""}>
      <Link to='/'>Home</Link>
</li>

OR

<NavLink exact activeClassName="active"  to="works">
  WORKS
</NavLink>


<NavLink  activeClassName="active" to="/news">
      PRACTICE
</NavLink>