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
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>
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>
In my project, I am trying to tie together Django and React.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" /> {% load static %}
<link rel="icon" href="{% static 'logofavicon.ico' %}" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta property="og:image" content="{% static 'Banner.png' %}">
<meta name="description" content="The future of digital content" />
<link rel="apple-touch-icon" href="{% static 'logo192.png' %}" />
<link rel="manifest" href="{% static 'manifest.json' %}" />
<title>Drop Party</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<script type="module" src="{% static 'index.js' %}"></script>
<div id="root"></div>
</body>
</html>
index.js
import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import "./styleguide.css";
import "./globals.css";
ReactDOM.render( <
React.StrictMode >
<
App / >
<
/React.StrictMode>,
document.getElementById("root")
);
reportWebVitals();
settings.py
# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/3.2/howto/static-files/
STATIC_URL = '/frontend/'
STATICFILES_DIRS = (
FRONTEND_DIR / 'build', FRONTEND_DIR / 'src', FRONTEND_DIR / 'public'
)
Project Hierarchy
I have looked at this post, and confirmed that this solution is not applicable for me.
The primary issue, I think, is that Django is serving the html, but not running the .js, so I'm unsure of where to go with this.
I have also confirmed that the image linking is working as well, so I'm not getting 404 errors or anything like that.
Secondary, semi-related question: Should I be linking the favicons like this? I get the feeling I shouldn't be serving the html statically, but I was unable to find how exactly to serve the project, other than serving the html statically.
(edit) I have added in the script as in comments, but now I get an error where Django seems to reject the React tags.
Your HTML file has no <script> tag for your index.js (although, interestingly, it does have a <noscript>).
You need to tell your page about every JS file you want to run, which you do by using <script> tags.
See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script for more info.
Get index.js in the public folder.
Add the line below after body tag,
<script src="index.js"></script>
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 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.