I am new in Reactjs and working in Nextjs, I have some css files but i am confuse that where should use these css files,either in "index.js" or "app.js", i will create another pages also so where should i use following files ? Thanks in advance.
Here is my code in "index.js" file
import Head from 'next/head'
import Image from 'next/image'
export default function Home() {
return (
<>
<link rel="stylesheet" href="../styles/css/bootstrap.min.css" />
<link rel="stylesheet" href="../styles/css/style.css" />
<link rel="stylesheet" href="../styles/css/jquery.mCustomScrollbar.min.css" />
<link rel="stylesheet" href="../styles/css/responsive.css" />
<link rel="stylesheet" href="../styles/css/font-awesome.css" />
Related
I am new to web development and have been practicing React by building a site. I need to embed multiple JS scripts to display 360 tours on the site. But can't get it to work. When I use the JS script embed it does not appear on site.
I have included the script in the public/index.html head as follow:
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<script
src="https://static.kuula.io/embed.js"
data-kuula="https://kuula.co/share/collection/7FN30?logo=-1&info=0&fs=1&vr=1&zoom=1&initload=0&thumbs=1"
data-css="ku-embed">
</script>
<title>React App</title>
</head>
Here is my code within the component:
import React from 'react';
import "./portfolio.css";
import { CTA } from '../../components';
const Portfolio = () => {
return (
<div className='portfolio' id="portfolio">
<div className="portfolio-heading">
<h1>Examples</h1>
<p>Experience virtual tours from the customer perspective</p>
</div>
<div className="portfolio-cards">
<div className="card-container-card">
<div className="card-container-card-img">
<script
src="https://static.kuula.io/embed.js"
data-kuula="https://kuula.co/share/collection/7FN30?logo=-1&info=0&fs=1&vr=1&zoom=1&initload=0&thumbs=1"
data-css="ku-embed">
</script>
</div>
<div className="card-container-card-title">
<p>Revel x Plato</p>
</div>
</div>
</div>
< CTA />
</div>
)
}
export default Portfolio
I am running Reactjs with vite, When I am trying to start my app with network IP I am getting the following error
I am getting the following error when I am trying to start the app with host: localhost
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Asset Scanner</title>
<script
src="https://cdn.socket.io/4.2.0/socket.io.min.js"
integrity="sha384-PiBR5S00EtOj2Lto9Uu81cmoyZqR57XcOna1oAuVuIEjzj0wpqDVfD0JA9eXlRsj"
crossorigin="anonymous"
></script>
</head>
<body>
<div id="root"></div>
<div id="modals"></div>
<script type="module" src="/src/main.jsx"></script>
</body>
</html>
src/main.jsx
import React from 'react'
import ReactDOM from 'react-dom'
import App from '##/App'
import { loadCSSVariables } from './common/utils/cssVariables'
loadCSSVariables().then(() => {
ReactDOM.render(<App />, document.getElementById('root'))
})
I was trying to use a template of bootstrap, CSS files are imported properly by I'm not able to import JS. I came to know that in Next Js you can import them in useEffect hook. But still, it gives an error that the script not found. Here is my code,
import Head from 'next/head';
import '../styles/globals.css';
import { useEffect } from 'react';
function MyApp({ Component, pageProps }) {
useEffect(() => {
import("../public/lib/js/jquery-3.3.1.min.js");
import("../public/lib/js/bootstrap.min.js");
import("../public/lib/js/jquery.nice-select.min.js");
import("../public/lib/js/jquery-ui.min.js");
import("../public/lib/js/jquery.slicknav.js");
import("../public/lib/js/mixitup.min.js");
import("../public/lib/js/owl.carousel.min.js");
import("../public/lib/js/main.js");
}, []);
return (
<>
<Head>
<meta charset="UTF-8"/>
<meta name="keywords" content="Ogani, unica, creative, html"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta http-equiv="X-UA-Compatible" content="ie=edge"/>
{/* Font */}
<link href="https://fonts.googleapis.com/css2?family=Cairo:wght#200;300;400;600;900&display=swap" rel="stylesheet"/>
{/* CSS */}
<link rel="stylesheet" href="lib/css/bootstrap.min.css" type="text/css"/>
<link rel="stylesheet" href="lib/css/font-awesome.min.css" type="text/css"/>
<link rel="stylesheet" href="lib/css/elegant-icons.css" type="text/css"/>
<link rel="stylesheet" href="lib/css/nice-select.css" type="text/css"/>
<link rel="stylesheet" href="lib/css/jquery-ui.min.css" type="text/css"/>
<link rel="stylesheet" href="lib/css/owl.carousel.min.css" type="text/css"/>
<link rel="stylesheet" href="lib/css/slicknav.min.css" type="text/css"/>
<link rel="stylesheet" href="lib/css/style.css" type="text/css"/>
</Head>
<Component {...pageProps} />
</>
);
}
export default MyApp;
Here is my directory structure,
Directory Structure
After the suggestion is used _document.js inside the pages directory to include local scripts but still they aren't included when the page is rendered.
pages/_document.js code is below,
import { Html, Head, Main, NextScript } from 'next/document'
import Script from 'next/script'
export default function Document() {
return (
<Html>
<Head>
{/* Site Tag */}
<Script src="lib/js/jquery-3.3.1.min.js" strategy="beforeInteractive"/>
<Script src="lib/js/bootstrap.min.js" strategy="beforeInteractive"/>
<Script src="lib/js/jquery.nice-select.min.js" strategy="beforeInteractive"/>
<Script src="lib/js/jquery-ui.min.js" strategy="beforeInteractive"/>
<Script src="lib/js/jquery.slicknav.js" strategy="beforeInteractive"/>
<Script src="lib/js/mixitup.min.js" strategy="beforeInteractive"/>
<Script src="lib/js/owl.carousel.min.js" strategy="beforeInteractive"/>
<Script src="lib/js/main.js" strategy="beforeInteractive" />
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
Update:
Changed beforeInteractive to lazyOnload. You may also use afterInteractive.
Say you have a local script file: myscript.js that you are trying to include in your NextJS project, to include it:
Place the script file in your /public folder and
In your page component add:
Inside page component:
import Script from 'next/script'
export default function Document() {
return (
<div>
{/* Other stuff */}
<Script
src="myscript.js"
strategy="lazyOnload"
/>
</div>
)
}
NextJS will know to look for scripts referenced without a URL prefix like https in the public folder.
Learn more about the <Script> component and other load strategys here:
https://nextjs.org/docs/basic-features/script#overview and https://nextjs.org/docs/api-reference/next/script
I want my nextjs app to have a different favicon based on the route.
This is the working application where I want to implement this. I want the favicon to become the countries flag whenever someone goes to that countries page.
I have the following code in my react components Head tag:
<Head>
<title>{country.name} | {country.subregion}</title>
<link rel="icon" href={country.flag} />
</Head>
This works sometimes but most of the times the favicon is not updated or the previous favicon stays.
One issue that I had was that your <link> element must be a direct child of next.js's <Head> element. This means you cannot have a <Favicon> React element that internally renders a <link> element. Instead you should call your <Favicon {...props}> React element as a function as shown below:
<Head>
{Favicon({...props})}
</Head>
Something similar happened to me.
Thats my solution.
In href, navigate to file folder.
import Head from 'next/head';
export default function MyPage() {
return (
<>
<Head >
<link rel="icon" type="image/x-icon" href="../../file.svg" />
</Head>
<div>Something...</div>
</>
)
}
What you can do is catching the pathname on the client side in a favicon component that just swaps the favicon src based on the route. what you would end up with would be kind like the following:
app:
import { useRouter } from "next/router";
import Favicons from "../components/favicons";
const App = ({ Component, pageProps }) => {
const router = useRouter();
return (
<>
<Head>
<meta charSet="utf-8" />
<Favicons currentRoute={router.pathname} />
</Head>
<Component {...pageProps} />
</>
);
};
and then in the favicons component something like this:
const Favicons = (currentRoute) => {
switch (currentRoute) {
case "variant-1":
return (
<>
<link
rel="apple-touch-icon"
sizes="180x180"
href="/favicons/[version]/apple-touch-icon.png"
/>
<link
rel="icon"
type="image/png"
sizes="32x32"
href="/favicons/[version]/favicon-32x32.png"
/>
<link
rel="icon"
type="image/png"
sizes="16x16"
href="/favicons/[version]/favicon-16x16.png"
/>
<link rel="manifest" href="/favicons/[version]/site.webmanifest" />
<link rel="shortcut icon" href="/favicons/[version]/favicon.ico" />
<meta name="msapplication-TileColor" content="#603cba" />
<meta name="msapplication-config" content="/favicons/[version]/browserconfig.xml" />
<meta name="theme-color" content="#ffffff" />
</>
);
case "variant-2":
return (
<>
<link
rel="apple-touch-icon"
sizes="180x180"
href="/favicons/[version]/apple-touch-icon.png"
/>
<link
rel="icon"
type="image/png"
sizes="32x32"
href="/favicons/[version]/favicon-32x32.png"
/>
<link
rel="icon"
type="image/png"
sizes="16x16"
href="/favicons/[version]/favicon-16x16.png"
/>
<link rel="manifest" href="/favicons/[version]/site.webmanifest" />
<link rel="shortcut icon" href="/favicons/[version]/favicon.ico" />
<meta name="msapplication-TileColor" content="#603cba" />
<meta name="msapplication-config" content="/favicons/[version]/browserconfig.xml" />
<meta name="theme-color" content="#ffffff" />
</>
);
default:
return (
<>
<link rel="apple-touch-icon" sizes="180x180" href="/favicons/apple-touch-icon.png" />
<link rel="icon" type="image/png" sizes="32x32" href="/favicons/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="/favicons/favicon-16x16.png" />
<link rel="manifest" href="/favicons/site.webmanifest" />
<link rel="shortcut icon" href="/favicons/favicon.ico" />
<meta name="msapplication-TileColor" content="#603cba" />
<meta name="msapplication-config" content="/favicons/browserconfig.xml" />
<meta name="theme-color" content="#ffffff" />
</>
);
}
};
export default Favicons;
Then again, no clue if ya still got relatable issues but hope this helps ya!
I integrated React in my laravel project. I started off using the react router but now I would like to switch back to Laravel routes.
Is it possible to inject my react components globally in my blade files just like Vue?
For setting up React routing I used following wildcard:
Route::view('/{path?}', 'layouts.app');
When I try to get back to normal laravel routing I get the following error
Error
Uncaught Error: Target container is not a DOM element.
My web.php
Route::get('/', 'PageController#index');
Controller
class PageController extends Controller
{
public function index()
{
return view('layouts.index');
}
}
Layouts.app file
<body>
<div class="main">
#section('content')
</div>
<script src="{{ asset('js/test.js') }}"></script>
<script src="{{ asset('js/app.js') }}"></script>
</body>
Index.blade
#extends('layouts.app')
#section('content')
<Call> </Call>
#endsection
React
App.js
import React, { Component } from 'react'
import ReactDOM from 'react-dom'
import { BrowserRouter, Route, Switch } from 'react-router-dom'
import Header from './Header'
import Call from './Call'
import Recipient from './Recipient';
import Avatar from './Avatar';
import registerServiceWorker from '../registerServiceWorker';
class App extends Component {
render () {
return (
<BrowserRouter>
<div>
<Header />
<Switch>
<Route exact path='/' component={Call} />
<Route exact path='/rusthuis' component={Recipient} />
<Route exact path='/avatar' component={Avatar} />
</Switch>
</div>
</BrowserRouter>
)
}
}
ReactDOM.render(<App />, document.getElementById('app'))
registerServiceWorker();
The target container is not a DOM element because in your HTML you don't have a div with the id of app.
You should change your html to this for layouts.app:
<body>
<div id="app" class="main">
#section('content')
</div>
<script src="{{ asset('js/test.js') }}"></script>
<script src="{{ asset('js/app.js') }}"></script>
</body>
By default Laravel(6) already is utilizing id="app" so in your react index.blade.php, i.e. where you define your react entry point, use a different id name to prevent react App.js from overriding your normal Laravel files i.e:
index.blade.php
<!doctype html>
<html lang="{{ app()->getLocale() }}">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- csrf token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<!-- styles -->
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght#300;400&display=swap" rel="stylesheet">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
<body>
<div id="app-react"></div>
<script src="{{ asset('js/app.js') }}"></script>
</body>
</html>
App.js
import React from "react";
import { BrowserRouter as Router, Switch, } from "react-router-dom";
import Home from "./Home";
function App() {
return (
<React.Fragment>
<Navbar />
<Switch>
<Route exact path="/" component={Home}></Route>
<Route component={Default}></Route>
</Switch>
</React.Fragment>
);
}
export default App;
if (document.getElementById("app-react")) {
ReactDOM.render(
<Router>
<App />
</Router>,
document.getElementById("app-react")
);
}
using the following route
Route::get('/{path?}',function(){
return view('app');
});
{path?} represent anything(word)
The first level URLs will affect the react but higher levels i.e
Route::view('/user/links','bladefile')
Links in our case will be a legit Laravel route.
put your
Route::view('/{path?}', 'layouts.app');
at end of web routes so that it will be loaded at last getting your all views