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>.
Related
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');
I have an addin for outlook, which is complaining: Uncaught Invariant Violation: Target container is not a DOM element.
My app already ran before, so it seems to be an issue within my components (just a guess).
The Exception occours here:
const render = Component => {
ReactDOM.render(
<AppContainer>
<Component title={title} isOfficeInitialized={isOfficeInitialized} key="config" />
</AppContainer>,
document.getElementById("root")
);
};
<!doctype html>
<html lang="en" data-framework="typescript">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Contoso Task Pane Add-in</title>
<!-- Office JavaScript API -->
<script type="text/javascript" src="https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js"></script>
<!-- For more information on Office UI Fabric, visit https://developer.microsoft.com/fabric. -->
<link rel="stylesheet" href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-core/9.6.1/css/fabric.min.css"/>
<!-- Template styles -->
<link href="../taskpane/taskpane.css" rel="stylesheet" type="text/css" />
</head>
<body class="ms-font-m ms-Fabric">
<div id="root"></div>
</body>
</html>
EDIT: Rendered code in Chrome debug tools
How can I find the code part which cannot be rendered? Which DOM element might be the issue?
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
I am new to React. I read the official tutorial of React and I try to create a basic hello world react app but I dont succeed.
I looked in the web and also here for an answer and I didnt find one.
Can you please tell me what I am missing and what I need to do?
The following is my html and javascript files:
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(
<h1>Hello, World</h1>,
document.getElementById('root')
);
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://unpkg.com/react#16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom#16/umd/react-dom.development.js" crossorigin></script>
<script type="text/jsx" src="inputPhoneNumber.js"></script>
</head>
<body>
<div class="jumbotron jumbotron-fluid">
<div id="root" class="container">
</div>
</div>
</body>
</html>
All you should need is the react and react-dom scripts like you already have, a root element like the div with id root you have, and a file which uses ReactDOM to render the topmost component into the root element.
Example
ReactDOM.render(
React.createElement('h1', {}, 'Hello, World'),
document.getElementById('root')
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>
I'm trying to render a small search bar onto my website, but what I see is that it is still existing in the website, but its size becomes 0x0, and I can't find anything wrong with my ES6 code. Can someone debug for me please?
index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="/style/style.css">
<!-- <script src="https://maps.googleapis.com/maps/api/js"></script> -->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<title>React-Redux-Learning</title>
</head>
<body>
<div id="container"></div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Latest compiled and minified Bootstrap JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
</body>
<script src="/bundle.js"></script>
</html>
index.js:
import React from 'react'
import ReactDOM from 'react-dom'
import searchBar from './components/searchBar'
const youtubeAPIKey = '...'
const App = () => {
return (
<div>
<searchBar />
</div>
)
}
ReactDOM.render(<App />, document.getElementById('container'))
searchBar.js:
import React, { Component } from 'react'
class searchBar extends Component {
constructor(props) {
super(props)
this.state = {term: ''}
}
render() {
return <input onChange={event => console.log(event.target.value)}/>
}
}
export default searchBar
First of, you have defined your component as <searchBar\>. I guess React is not able to see it as JSX Component and is embedding it as a plain html tag instead, as evidenced by the <searchbar\> tag seen in Elements tab of chrome.
I think what you need is, to figure out why react is not able see searchBar as a JSX component. I hope this leads you to the right direction.
OK my boss actually found it out, it's the problem about CAPITALIZING the variable names. After I cap the first letter of the variable names things are working again...
Your search bar code works fine. Check your CSS to make sure that your body has a size.