I am sure this has been asked before but I haven't found the answer when browsing here or google.
I am following this guide to do a react-router-dom based menu in Laravel -> https://laravel-reactjs.com/react-sidebar-navigation-menu-tutorial-beginner-react-js-project-using-hooks-router/
I understand the guide, and are also aware of that Switch has been replaced with routes in newer version of react-router.
My question is how render the navigation in my blade file. I have tried multiple ways of render, ReactDom.render and appending to elements.. I can't get it to work.
My code is
routepath.js
import ReactDom from 'react';
import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
import Navbar from "./components/Navbar";
function App() {
return(
<Router>
<Navbar />
<routes>
<route path='/' />
</routes>
</Router>
);
}
export default App;
navbar.js
import * as FaIcons from "react-icons/fa";
import { Link } from 'react-router-dom';
function Navbar() {
return (
<div className="navbar">
<link to="#" className="menu-bars">
<FaIcons.FaBars />
Menu
</link>
</div>
)
}
export default Navbar
app.js (to compile)
require("./components/main"); //FullCalendar
require("./RoutePath");
app.blade.php
<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() }}">
<title>Tasksman</title>
<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
<body>
<div id="app"></div>
<div id="menu"></div>
<script src="{{ asset('js/app.js') }}"></script>
</body>
</html>
My file structure is
- js
- Components
- Navbar.js
- pages
- Home.js
- Products.js
- Reports.js
- app.js
- RoutePath.js
- views
- app.blade.php
Try this code
Route::view('/{path?}', 'app')
->where('path', '.*')
->name('react');
in view file
<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() }}">
<title>Tasksman</title>
<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
<body>
<div id="app"></div>
<script src="{{ asset('js/app.js') }}"></script>
</body>
</html>
in mix file
mix.js('resources/js/index.js', 'public/js')
.react()
.less('resources/sass/app.scss', 'public/css');
Related
Getting an error with React portal in the production build but none in development. I'm getting error #200 "target container is not a DOM element". I have put my code below. Please ignore the CSS part.
import ReactDOM from 'react-dom'
import React from 'react'
const Modal_Styles={
backgroundColor:'#FFF',
position:'fixed',
top:'50%',
left:'50%',
right:'10%',
bottom:'10%',
padding:50,
textAlign:'justify',
transform:'translate(-50%,-50%)',
borderRadius:'12px',
zIndex:1000
}
const Overlay_Styles={
position:'fixed',
left:0,
top:0,
right:0,
bottom:0,
backgroundColor:'rgba(0,0,0,0.3)',
zIndex:1000,
}
export default function Modal({open,children,onClose}) {
if(!open){return null}
return ReactDOM.createPortal(
<>
<div style={Overlay_Styles}>
<div style={Modal_Styles}>
{children}
<button className='mbutton' onClick={onClose}>x</button>
</div>
</div>
</>,
document.getElementById('portal')
)
}
The index.html file is:
<!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="C"
/>
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<div id="portal"></div>
</body>
</html>
Any suggestions?
The names for both divs root and portal are correctly written in the index.js and modal.js.
I got this error
Uncaught Error: Target container is not a DOM element.
when I want to create a header for my web page and the problem that I'm following a YouTube video to learn react, and I got this issues and in the YouTube video he didn't have the same problem as me
<!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">
<title>Document</title>
<script crossorigin src="https://unpkg.com/react#16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom#16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/#babel/standalone/babel.min.js"></script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body,h1,h2,h3,h4,h5,h6 {font-family: "Lato", sans-serif}
.w3-bar,h1,button {font-family: "Montserrat", sans-serif}
.fa-anchor,.fa-coffee {font-size:200px}
</style>
</head>
<body>
<div className="Home"></div>
<script type="text/babel">
class Header extends React.Component {
render(){
return(
<div className="w3-top">
<div className="w3-bar w3-red w3-card w3-left-align w3-large">
<a className="w3-bar-item w3-button w3-hide-medium w3-hide-large w3-right w3-padding-large w3-hover-white w3-large w3-red" href="javascript:void(0);" onclick="myFunction()" title="Toggle Navigation Menu"><i className="fa fa-bars"></i></a>
Home
Link 1
Link 2
Link 3
Link 4
</div>
</div>
)
}
}
class Home extends React.Component {
render(){
return(
<header />
)
}
}
ReactDOM.render(<Home/>,document.getElementById("app"))
</script>
</body>
</html>
In reactDOM.render() you are rendering your app to document.getElementById("app") which does not exist on your page. You need to add an element with the id of app to your page so the react app can render to a valid element.
So somewhere in the body of your page add the element <div id="app"></div>
or if you are meaning to render your app to the Home element you need to change the function to say something like:
ReactDOM.render(<Home/>,document.querySelector(".Home")).
and then change your element to say something like:
<div class="Home"></div>
You only need to use className to specify a class inside of a react element. So <div className="Home"></div> is not valid html it should be <div class="Home"></div>. But inside a react element you would use <div className="your-class"></div>.
When I first launch npm run watch it's directing me to *localhost:3000" which I want to show the homepage or BookList right away. But I am getting 404 Not Found. I don't want to go to localhost:3000/home manually. I want to see the BookList right away when first launched the server.
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 BookList from "./BookList";
import "bootstrap/dist/css/bootstrap.min.css";
import { toast } from "react-toastify";
import "react-toastify/dist/ReactToastify.css";
class App extends Component {
render() {
return (
<BrowserRouter>
<div>
<Header />
<Switch>
<Route exact path="/home" component={BookList} />
<Route exact path="/" component={BookList} />
</Switch>
</div>
</BrowserRouter>
);
}
}
ReactDOM.render(<App />, document.getElementById("app"));
app.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">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
crossorigin="anonymous"
/>
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>Yaraku Book Store</title>
<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
<body>
<div id="app"></div>
<script src="{{ asset('js/app.js') }}"></script>
</body>
</html>
I am new to ReactJS. So I have a straight forward question.
I have used materialize cdn, included in index.html. But when I try to initialize it in my component it says 'M' not defined. Where should I initialize the same.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<meta name="theme-color" content="#000000" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"
/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<title>React App</title>
</head>
<body>
<noscript> You need to enable JavaScript to run this app. </noscript>
<div id="root"></div>
</body>
</html>
My component looks something like this
import React from "react";
class Dashboard extends React.Component {
componentDidMount() {
document.addEventListener("DOMContentLoaded", function() {
var elems = document.querySelectorAll(".carousel");
var instances = M.Carousel.init(elems, options);
});
}
}
export default Dashboard;
CodeSandbox link: - https://codesandbox.io/s/40jvz6j590
Well, if you are using it, you need to import it :D
import React from "react";
import {Carousel} from "react-materialize";
And here is how to use it https://react-materialize.github.io/#/carousel
After using the php artisan preset react command my app couldn't render React app components; the page is blank. I started my PHP server using php artisan serve and started Node with npm run dev.
app.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">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>Laravel</title>
<link href="{{asset('css/app.css')}}" rel="stylesheet" type="text/css">
</head>
<body>
<div id="app"></div>
<script src="{{asset('js/app.js')}}"></script>
</body>
</html>
Everything is running without any errors.
EDIT.
I changed Example.js inside assets/js/components to App.js => code:
import React, { Component } from 'react'
import ReactDOM from 'react-dom'
import { BrowserRouter, Route, Switch } from 'react-router-dom'
import Header from './Header'
class App extends Component {
render () {
return (
<BrowserRouter>
<div>
<Header/>
</div>
</BrowserRouter>
)
}
}
ReactDOM.render(<App/>, document.getElementById('app'))
I think you need to export the component as export default App;