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
Related
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?
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 am using Bootstrap with ReactJS in order to learn the latter.
I want to diplay a Bootstrap Navbar in my app.
My code is the following:
app.js
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import { Navbar } from "react-bootstrap";
function App() {
return (
<div className="App">
<Navbar bg="dark" variant="dark">
<Navbar.Brand href="#home">
<img
alt=""
src="####"
width="30"
height="30"
className="d-inline-block align-top"
/>
// {' React Bootstrap'}
</Navbar.Brand>
</Navbar>
</div>
);
}
export default App;
index.html
<!DOCTYPE html>
<html lang="en">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css"
integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4"
crossorigin="anonymous">
<!-- BOOTSTRAP -->
<link rel="apple-touch-icon" href="logo192.png" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<title>My app</title>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"
integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"
integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm"
crossorigin="anonymous"></script>
</body>
</html>
index.js
import 'bootstrap/dist/css/bootstrap.min.css';
import $ from 'jquery';
import Popper from 'popper.js';
import 'bootstrap/dist/js/bootstrap.bundle.min';
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
ReactDOM.render(<App />, document.getElementById('root'));
But I get:
Invalid hook call. Hooks can only be called inside of the body of a function component
I did some research and people suggest that the error is caused by different version of React.
So I run npm ls react but I get only one version:
myapp-frontend#0.1.0 /Desktop/myapp-frontend
└── react#16.10.2
As suggested in comment, if I run npm ls react-dom I get this:
myapp-frontend#0.1.0 /Desktop/myapp-frontend
└── react-dom#16.10.2
Can you remove this out of your code please
// {' React Bootstrap'}
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import { Navbar } from "react-bootstrap";
function App() {
return (
<div className="App">
<Navbar bg="dark" variant="dark">
<Navbar.Brand href="#home">
<img
alt=""
src="####"
width="30"
height="30"
className="d-inline-block align-top"
/>
</Navbar.Brand>
</Navbar>
</div>
);
}
export default App;
I think the error is coming from that line
My project was working on my computer but now on CodeSanbox I've got an error
Target container is not a DOM element
The project is just a template project using react & parcel.
I didn't change anything between my home project and the one on codesanbox.
<!DOCTYPE html>
<html>
<head>
<title>React App w/ Parcel</title>
<meta charset="utf-8" />
</head>
<body>
<div id="app"></div>
<script src="index.js"></script>
</body>
</html>
import React from "react";
import ReactDOM from "react-dom";
import "./styles.scss";
const App = () => {
return <div />;
};
ReactDOM.render(<App />, document.getElementById("app"));
github repo
There seems to be a clash with the keyword app.
You can simply rename the div to root or similar
<!DOCTYPE html>
<html>
<head>
<title>React App w/ Parcel</title>
<meta charset="utf-8" />
</head>
<body>
<div id="root"></div>
<script src="index.js"></script>
</body>
</html>
import React from "react";
import ReactDOM from "react-dom";
import "./styles.scss";
const App = () => {
return <div />;
};
ReactDOM.render(<App />, document.getElementById("app"));
Working sandbox: https://codesandbox.io/s/react-app-parcel-g9ff8
I don't have the following error when I run my code on my VirtualBox. (localhost)
But when I deploy on Heroku (and run heroku open or heroku local web) I got whole blank page, and the following error: bundle.js:1285 Uncaught Error: _registerComponent(...): Target container is not a DOM element.
Image of Detailed Error Message
My react versions in the package.json
...
"react": "^0.14.3",
"react-dom": "^0.14.3",
"react-redux": "4.3.0",
"react-router": "^4.1.2",
"react-router-dom": "^4.1.2",
I have no idea about this error and have googled some similar error on the stackoverflow. Most of solutions are putting bundle.js before the end of the body.
index.html
<!doctype html>
<html lang="">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> Drone Tracker </title>
</head>
<body>
<div id="wrapper" class="active">
<div id="page-content-wrapper">
<div class="page-content-inset">
<div id="root"> </div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha/js/bootstrap.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAGD352Uy7zH5XMLZ__x2XyuMyUOxVDLgQ&language=zh-TW"></script>
<script src="/bundle.js"> </script>
</body>
</html>
index.js
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import ContentBody from './components/content_body';
import NavBar from './components/NavBar.js';
import Main from './components/Main.js';
import { BrowserRouter } from "react-router-dom";
class App extends Component{
render(){
return (
<div>
<NavBar />
<Main />
</div>
);
}
}
ReactDOM.render(
<BrowserRouter >
<App />
</BrowserRouter>, document.querySelector('#root'));
Main.js
import React from 'react'
import { Switch, Route } from 'react-router-dom'
import Home from './Home.js';
import ContentBody from './content_body';
const Main = () => (
<main>
<Switch>
<Route exact path='/' component={Home}/>
<Route path='/contentBody' component={ContentBody}/>
</Switch>
</main>
);
export default Main;
Home.js
import React from 'react';
const Home = () => (
<div>
<h1>HOME PAGE</h1>
</div>
);
export default Home;