I just discovered the react-router and I decided to try it out
but I keep having this error and my code refused to work.
This is my html code
<!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="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<title>React App</title>
</head>
<body>
<div id="root"></div>
<script src="..//src/index.js"></script>
</body>
</html>
This is my index.js file
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import css from './App.css'
function Web(){
return(
<div>
<App/>
</div>
)
}
ReactDOM.render(<Web/>, document.getElementById('root'))
This is my app.js file
import { BrowserRouter, Route, Router, Routes} from 'react-router-dom'
import './App.css';
import react from 'react'
import ReactDOM from 'react';
export default function App() {
return (
<BrowserRouter>
<Routes>
<Route path='/' element={<div>fhhthrtytt</div>}/>
</Routes>
</BrowserRouter>
);
}
This is the error I'm getting in the console
Warning: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
I suspect it's the extraneous script tag trying to run your index.js file. It doesn't appear to be necessary here.
<body>
<div id="root"></div>
<script src="..//src/index.js"></script> // <-- remove this
</body>
Should be:
<body>
<div id="root"></div>
</body>
Related
I am trying to display a simple form using react but I get the error "Target container is not a DOM element" despite the fact that the root element is definitely a DOM element as I have check using console.
edit : Importing form 'react-dom' and using 'render' works fine but I cannot seem to get it work other wise
Here is the form component
import React from 'react';
export default function StudentForm()
{
return (
<form>
//some stuff
</form>
)
}
My index file
import ReactDOM from 'react-dom/client';
import './index.css';
import StudentForm from './App';
const root = document.getElementById('root');
ReactDOM.createRoot(<StudentForm/>,root);
Here is my index.html file
<!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="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>
I guess you don't have a element with id root in your index.html, please add the following tag in your index.html,
<div id="root" />
try this:
const root = ReactDOM.createRoot(document.getElementById('root'))
root.render(
<React.StrictMode>
<StudentForm />
</React.StrictMode>
)
You need to add your main or index script to HTML.
<div id="root"></div>
<script type="module" src="/src/index.tsx"></script>
The issue I'm encountering concerns a basic react app (v6). More specifically it is related to routing.
I've gone through several questions/answers on stackoverflow already but wasn't able to figure out what's wrong.
Here's what I'm working with.
App.js
import "./App.css";
import React from "react";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import NavBar from "./components/NavBar";
import Home from "./pages/Home";
import About from "./pages/About";
import PrivacyPolicy from "./pages/PrivacyPolicy";
import TermsOfService from "./pages/TermsOfService";
const App = () => {
return (
<BrowserRouter>
<NavBar/>
<Routes>
<Route path="/" element = {<Home/>} />
<Route path="/home" element={<Home />} />
<Route path="/about" element={<About />} />
<Route path="/privacyPolicy" element={<PrivacyPolicy />} />
<Route path="/termsOfService" element={<TermsOfService />} />
</Routes>
</BrowserRouter>
);
}
export default App;
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(
<App />,
document.getElementById('root')
);
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="./favicon.ico" /> <!-- Used to be "%PUBLIC_URL%/favicon.ico" >> might be required when live -->
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta name="description" content="Genesis platform for financial education." />
<meta name="keywords" content="Genesis" class="next-head" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<title>Genesis</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root">
</div>
</body>
</html>
And here is the error message when pressing the F5 (refresh) button in a browser window.
The buttons in the NavBar work well to navigate to the different pages, but the refresh leaves me hanging...
From the research I've done I feel like the solution is somewhere within these files, but I just can't figure out what to change.
In SPAs, you need to send all the traffic to index.html. You can do it by adding a _redirects file in the root folder and add this:
/* /index.html 200
In the server, this serves index.html to all the requests, and React handles the routing in the browser.
If you used CRA for this, put the _redirects file in the public folder.
On going through multiple DOCs I get to know that index.html file is the entry point for a React application and all the components we load overrides this file. But if I am making changes to the index.html file that is not reflected in the web page. I am working on integrating Zoom SDKs which needs to include script tags inside the index.html or else JQuery errors are thrown to the console.
Contents of my public/index.html file:
<!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 type="text/css" rel="stylesheet" href="https://source.zoom.us/1.7.0/css/bootstrap.css" />
<link type="text/css" rel="stylesheet" href="https://source.zoom.us/1.7.0/css/react-select.css" />
<title>React App</title>
</head>
<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<div id="root"></div>
<script src="https://source.zoom.us/1.7.2/lib/vendor/react.min.js"></script>
<script src="https://source.zoom.us/1.7.2/lib/vendor/react-dom.min.js"></script>
<script src="https://source.zoom.us/1.7.2/lib/vendor/redux.min.js"></script>
<script src="https://source.zoom.us/1.7.2/lib/vendor/redux-thunk.min.js"></script>
<script src="https://source.zoom.us/1.7.2/lib/vendor/jquery.min.js"></script>
<script src="https://source.zoom.us/1.7.2/lib/vendor/lodash.min.js"></script>
<script src="https://source.zoom.us/zoom-meeting-1.7.2.min.js"></script>
</body>
</html>
My index.js configuration:
import React from 'react';
import ReactDOM from 'react-dom';
import {
Redirect,
HashRouter as Router,
Route,
Switch
} from 'react-router-dom';
import { Provider } from 'react-redux';
import { setStore } from './store/base';
import configureStore from './store/configureStore';
import './App.scss';
import MeetingRoom from './containers/MeetingRoom/MeetingRoom';
export const store = configureStore({});
setStore(store);
const routes = (
<Provider store={store}>
<Router>
<Switch>
<Route component={MeetingRoom} path='/m/:mid/' />
</Switch>
</Router>
</Provider>
);
ReactDOM.render(routes, document.getElementById('root'));
If I am changing the text inside <noscript> tag i.e You need to enable JavaScript to run this app. to some other string but it is not getting reflected in the web page. So how my index.html is getting loaded I cannot figure out. Is there any other information I need to provide for getting the solution?
The HTML noscript element defines a section of HTML to be inserted if a script type on the page is unsupported or if scripting is currently turned off in the browser. Add some string inside div element to see on the webpage
Well, honestly I didn't know how to make the question, sorry. But the thing is. I'm making something with react and php backend, but when I run the server with "sudo php artisan serve" nothing appears, that is because it's taking a wrong "app.js" this is some of my code:
app.js
require('./bootstrap');
import React from 'react';
import {render} from 'react-dom';
import {Router, Route, browserHistory} from 'react-router';
import Master from './components/Master';
import CreateProduct from './components/CreateProduct';
import DisplayProduct from './components/DisplayProduct';
import UpdateProduct from './components/UpdateProduct';
render(
<Router history={browserHistory}>
<Route path="/" component={Master} >
<Route path="/add-item" component={CreateProduct} />
<Route path="/display-item" component={DisplayProduct} />
<Route path="/edit/:id" component={UpdateProduct} />
</Route>
</Router>,
document.getElementById('crud-app'));
welcome.blade.php
<!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">
<title>Laravel 5.5 ReactJS CRUD</title>
<!-- <link href="{{asset('css/app.css')}}" rel="stylesheet" type="text/css"> -->
</head>
<body>
<div id="crud-app"></div>
<script src="{{asset('js/app.js')}}" ></script>
</body>
</html>
as I say when I run the server it takes a "app.js" that is in "proyect/public/js/app.js" however the file I want to appear is in "proyect/resources/js/app.js" how can I do to get the file I want?
Take a look at this question and answers given:
How to include CSS in laravel 5 running with artisan?
Basically your asset files should be in public folder as your public folder is root folder when you run your server with serve command.
I'm attempting to load my second React component into my HTML page but I'm getting the following error:
Uncaught Error: Target container is not a DOM element.
I've attempted other solutions, but I haven't been successful. I started with create-react-app and I did everything the same way as the first component since that's loading up correctly but the second one isn't.
Root file:
SRC file:
My LiteInfo.js file:
import React from 'react';
const LiteInfo = function() {
return (
<div className="LiteInfo">
<h1>Hello</h1>;
</div>
);
}
export default LiteInfo;
and I'm trying to load it in the same way as App.js in index.js file:
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import LiteInfo from './LiteInfo';
import 'bootstrap/dist/css/bootstrap.css';
import registerServiceWorker from './registerServiceWorker';
ReactDOM.render(<App />, document.getElementById('root'));
console.log(document.getElementById('root'));
ReactDOM.render(<LiteInfo />, document.getElementById('liteInfo'));
console.log(LiteInfo);
registerServiceWorker();
Using console.log shows info, but the error is coming from ReactDOM.render(<LiteInfo />, document.getElementById('liteIndo'));
And lastly, my HTML file which is found in public):
<!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">
<title>React App</title>
</head>
<body>
<div id="navbar"></div>
<div id="liteInfo"></div>
<div id="root">
</div>
</body>
</html>
Anyone know what I'm doing wrong?
EDIT