I have the following html file in my public folder:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<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%/juno-icon.png" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<link
href="https://fonts.googleapis.com/css2?family=Amatic+SC:wght#700&display=swap"
rel="stylesheet"
/>
<title>Issue Report</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
what I don't understand is, how does it know to render my index.tsx file (in src) without me stating any script tag?
import React from 'react';
import ReactDOM from 'react-dom/client';
import reportWebVitals from './reportWebVitals';
import App from './popup/components/App';
import './popup/styles/index.css';
import { BrowserRouter } from 'react-router-dom';
import { QueryClientProvider, QueryClient } from 'react-query';
import { ReactQueryDevtools } from 'react-query/devtools'
const root = ReactDOM.createRoot(
document.getElementById('root') as HTMLElement
);
const queryClient = new QueryClient({
defaultOptions: {
queries: {
refetchOnWindowFocus: false,
},
},
})
root.render(
<QueryClientProvider client={queryClient}>
<BrowserRouter>
<React.StrictMode>
<App />
</React.StrictMode>
</BrowserRouter>
<ReactQueryDevtools initialIsOpen={true} position='bottom-right' />
</QueryClientProvider>
);
reportWebVitals();
it just seem to render it and it seems like a magic to me o_o
how can it possibly know what file to render?
Related
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 have a working npm project and am trying to add a javascript file (App.js) to index.html
index.html:
<!DOCTYPE html>
<html lang="en">
<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="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
/>
<title>React App</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
App.js:
import React, { Component } from 'react';
import './App.css'
class App extends Component {
render() {
return "Testing"
}
}
export default App;
index.js:
import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from './components/App';
import * as serviceWorker from "./serviceWorker";
import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
import {
Navigation,
Footer,
Home,
About
} from "./components";
ReactDOM.render(<App />,
<Router>
<Navigation />
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
</Routes>
<Footer />
</Router>,
document.getElementById("root")
);
serviceWorker.unregister();
I get the error, "Target container is not a DOM element". Other answers to this have said to put the div id="root" line in index.html at the end of the body which I have already done. If anyone can please help me figure out why I am getting this error, that would be very helpful.
ReactDOM.render expects 2 arguments: the component to render, and the parent element aka target. You give it 3 arguments.
You'll want to wrap what you have in a fragment or fix App to actually be the wrapper.
ReactDOM.render(
<>
<App />
<Router>
<Navigation />
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
</Routes>
<Footer />
</Router>
</>,
document.getElementById("root")
);
or
class App extends Component {
render() {
return (<Router>
<Navigation />
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
</Routes>
<Footer />
</Router>);
}
}
// ...
ReactDOM.render(
<App />,
document.getElementById("root")
);
I am making a simple TODO App using MERN Stack. But can't able to run because of above mentioned error i.e. Target container is not a DOM element. I checked out whole code but can't able to find its cause or solution. This are the problems. Please help here.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
<title>Document</title>
</head>
<body>
<noscript></noscript>
<div class="root">
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script>
</body>
</html>
App.js
import React, { Component } from 'react';
import logo from './logo.svg';
import {BrowserRouter as Link, Router, Route} from 'react-router-dom';
import TodoList from './components/todo-list';
class App extends Component
{
render()
{
return(
<Router>
<div>
<nav className="navbar navbar-expand-lg navbar-light bg-light">
<a href="/" className="navbar-brand">
<img src={logo} alt="Logo" height="40" width="40"/>
</a>
<Link to="/" className="navbar-brand">MERN Stack TO-DO App</Link>
<button className="navbar-toggler" type="button" data-toggle="collapse" data-target="myNavBar">
<span className="navbar-toggler-icon"></span>
</button>
<div className="collapse navbar-collapse" id="myNavBar">
<ul className="navbar-nav mr-auto">
<li className="navbar-item">
<Link to="/" className="nav-link">Todos</Link>
</li>
</ul>
</div>
</nav>
</div>
<Route path="/" exact component={TodoList}></Route>
</Router>
);
}
}
export default App;
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
reportWebVitals();
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
this going to render the React app in a div with id root
and in your html file you have a div with class root and no id
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
<title>Document</title>
</head>
<body>
<noscript></noscript>
<div class="root">
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script>
</body>
</html>
give the div id root
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
<title>Document</title>
</head>
<body>
<noscript></noscript>
<div id="root">
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script>
</body>
</html>
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