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
Related
The grid system don't work maybe i'm dumb but i don't understand, my code :
import React from "react";
import {Col, Row} from "react-bootstrap";
const Home = () => {
return (
<Row className="home">
<Col xs={6}>2 of 3 (wider)</Col>
<Col xs={6}>3 of 3</Col>
</Row>
)
}
export default Home;
You should import bootstrap css in your project
import 'bootstrap/dist/css/bootstrap.min.css'
Try to add the bootstrap CDN link in the index.html in the public folder.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
Reference https://getbootstrap.com/docs/3.3/getting-started/
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 am starting in React.js and I find this problem when making a navigation menu. It does not generate the menu effect that is expected, here is the code:
import React, {Component} from 'react';
import {Link} from 'react-router-dom';
import { Navbar, Nav, NavItem} from 'react-bootstrap';
export class Menu extends Component {
render(){
return (
<Navbar>
<Nav>
<NavItem componentClass= {Link} href="/" to="/" >
Inicio
</NavItem>
<NavItem componentClass= {Link} href="/Pelicula" to="/Pelicula" >
Pelicula
</NavItem>
</Nav>
</Navbar>
);
}
}
export default Menu;
This is the result
It is divided into two components, the top part is the Menu component and the bottom component, Greeting, but the one of my interest is the menu
I hope your help
Ensure you include stylesheets
Because React-Bootstrap doesn't depend on a very precise version of Bootstrap, we don't ship with any included css. However, some stylesheet is required to use these components. How and which bootstrap styles you include is up to you, but the simplest way is to include the latest styles from the CDN.
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
React-bootstrap - Getting Started
Wrap your NavItem in BrowserRouter
import React from 'react';
import React, { Component } from 'react';
import { Link, BrowserRouter } from 'react-router-dom';
import { Navbar, Nav, NavItem } from 'react-bootstrap';
export class Menu extends Component {
render() {
return (
<Navbar>
<Nav>
<BrowserRouter>
<NavItem componentClass={Link} href="/" to="/">Inicio</NavItem>
</BrowserRouter>
<BrowserRouter>
<NavItem componentClass={Link} href="/Pelicula" to="/Pelicula">Pelicula</NavItem>
</BrowserRouter>
</Nav>
</Navbar>
);
}
}
export default Menu;
Stackblitz
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
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;