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>
Related
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>
I want to use a 3rd library only for my homepage in a React application. The problem is : the library is developed with Jquery : www.npmjs.com/package/fullview
I need to import : Jquery, js file and css file.
so far, I haven't found any way to import this type of library into a functionnal component. Only class components.
Can I import these files directly in index.html with or i need to import them in my component with import ... from "..."
Thank you !
You can add jquery CDN in your public/index.html like this:
//public/index.html
<!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>
<script
src="https://code.jquery.com/jquery-3.5.1.min.js"
crossorigin="anonymous"
></script>
</body>
</html>
no need to import jquery in component or something else now jquery is avalible golobally.
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
I am a complete beginner and I would like to add a text box
-eventually I would have buttons with logic characters that would show up in the textbox as I click them).
Should this be a component?
Do I make it via index.html or index.js? None?
I am quite lost and all of my attempts have led to nothing. I assume the only useful code I can provide is my index.html, so here it is. This is basically the default.
<!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>Kirk Logic Tool</title>
</head>
<h1>Kirk Logic Tool</h1>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>
Thank you for any responses, as a learner I really appreciate all who take the time to respond :)
You would create another JS file with a class that extends React.Component and use render(<MyComponent/>, document.getElementById('root')). Here's an example:
class MyComponent extends React.Component {
render() {
return <input type="text"/>
}
}
ReactDOM.render(
<MyComponent/>,
document.getElementById('root')
);
I followed facebook's tutorial to learn react. I used npm create-react-app to create a react app. Html files are in a folder called public . JS and CSS files are in a folder called src.
This is my index.html:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>React App</title>
</head>
<body>
Link
<div id="root"></div>
</body>
</html>
This is my index.js:
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(
<App name="Sumanth Jois"/>,
document.getElementById('root')
);
index.html works fine . <App/> is being rendered on to the screen.I have another file which login.html.
This is login.html:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>React App</title>
</head>
<body>
<div id="app"></div>
</body>
</html>
This is my login.js :
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(
<App name="Sumanth Jois"/>,
document.getElementById('app')
);
But this time login.html is display nothing it's empty. Can somebody please tell me where I am going wrong? I am stuck with this for hours now.