I'm currently trying to put together a little Flask + React project. I have had some difficulty getting the js file (which contains the react code) to run at all in the project.
This is my project structure, standard for flask:
The route is defined in the routes.py file in the project root
from flask import Flask, render_template, request
app = Flask(__name__)
#app.route("/qubits")
def qubits():
return render_template('qubits.html')
# http://localhost:5000/qubits
if __name__ == "__main__":
app.run(debug=True)
I have my simple html file, which is linking properly to my css (im able to pull in css elements fine).
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>nstem</title>
<link rel= "stylesheet" href= "{{ url_for('static',filename='css/nstem.css') }}">
</head>
<body>
<div class="indexBox1"></div>
<h1>: )</h1>
<script type="text/javascript"
src="{{ url_for('static', filename='js/index.js') }}"></script>
</div>
</body>
</html>
However, nothing is being returned on the webpage from these two js files:
*index.js*
import React from 'react';
import ReactDOM from 'react-dom';
import './nstem.css';
import Qubit from './qubits';
ReactDOM.render(
<Qubit />,
document.getElementById('root')
);
* function file *
import React from 'react';
import ReactDOM from 'react';
function Qubit() {
const section = 'lists';
return (
<div>Allah'u'abha</div>
);
}
export default Qubit;
Im pretty stumped; ive played with this so much today and cant figure out where the gap is. Please help, and thanks so much.
Related
i need help for integrate frontend ReactJS on my site. currently i avoid to use nodeJS or NPM for implement my reactJS. but i'm using ReactJS CDN. so i not run npm start when develop the reactJS. i just want to use the frontend.
Hope this will understand from the start. so i have a question, how do i able to get another component and place it on single file.
I Created file App.js. I plan that this file will become a centralize for other components.
let me share what i'm doing right now.
here is my file structure
this is my code on index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Buynow Project</title>
<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 src="https://unpkg.com/babel-standalone#6/babel.min.js"></script>
<script type="text/babel" src="buynow/index.js"></script>
</head>
<body>
<div id="root"></div>
</body>
</html>
this is my code on index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.js'
ReactDOM.render(<App />, document.getElementById('root'));
this is my code on App.js
import React from 'react';
import Navbar from './components/Navbar.js'
function App(props){
return (
<div>
<Navbar/>
Hello App
</div>
);
}
export default App;
this is my code on Navbar.js
import React from 'react';
function NavBar(props) {
return (
<div>
<Navbar/>
Hi NavBar
</div>
);
}
export default NavBar;
but i got this error, and pointed on file index.js line:1
Uncaught ReferenceError: require is not defined
this is error
I confuse how to solve this. I start with the simple code just for testing if it can work or not.
please help.
https://reactjs.org/docs/react-without-jsx.html
JSX is not a requirement for using React. Using React without JSX is
especially convenient when you don’t want to set up compilation in
your build environment.
So you can't use JSX/TSX directly in your browser (need compilation). Also, you can't use import outside a module (so basically now, you can already use your function components by adding the import of all your files in the index.html).
In my experience I suggest that you use the benefits of JSX / TSX and compile your code with NPM to be more comfortable (everything is way more intuitive with jsx).
In any case, in the link that I have included, you will find how to do the equivalent of JSX with pure javascript. That's what you need. (as you can see in my small snippet)
If you want keep using react from CDN and without compiling, your code, should be something like this:
// For the Snippet i have all of your js here
// But you could just import in your index.html every separate component file you have (without any import/export syntax)
function NavBar(props) {
return React.createElement('span', null,props.title);
}
function App(props){
return React.createElement('span', null, React.createElement(NavBar, {title: 'Header'}, null),
React.createElement('span', null,'Hello App'));
}
ReactDOM.render(React.createElement(App, {}, null), document.getElementById('root'));
<html>
<head>
<meta charset="UTF-8" />
<title>Buynow Project</title>
<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 src="https://unpkg.com/babel-standalone#6/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
</body>
</html>
Anyway, as you see, the code is not so readable this way...
EDIT
I made the same snippet on stackblitz with separated files
https://stackblitz.com/edit/web-platform-4ruju9?file=index.html
Ps. Also, don't put NavBar inside NavBar or you'll get a render loop
You have to enable module support in script tag
<script type="text/babel" data-type="module" src="./index.js"></script>
Remove React import statements as they can be directly used.
I am working on ReactJS project and want to render an iframe which is rendering using third party script.
Kindly check the problem below:
I have an component name add-data.js.
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import Helmet from 'react-helmet';
import ogImage from '../../../../public/images/qcf-logo-whitebg.svg';
import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";
import ApplyNowNavbar from '../Header/ApplyNowHeader';
import ApplyNowFooter from '../Footer/ApplyNowFooter';
export default class ApplyNow extends Component {
render() {
return (
<div>
<Navbar />
<div id="iframe-container"></div> //iframe will be loadd inside this div
<Footer />
</div>
);
}
}
index.html main file
<!doctype html>
<html>
<head>
<script src="www.example.com/iframe-script.js"></script> <!--this file will load iframe in iframe-container div-->
</head>
<body>
<div id="app"></div>
<script src="../js/app.js"></script>
</body>
</html>
this code works only when reload the page but I want to render iframe without reload the page but render ReactJS component.
Can anybody help me out how can I do that.
Thanks in advance.
i am creating a project where react is not rendering anything on django localhost
index.html
<!DOCTYPE html>
<html lang="en">
<head></head>
<body>
<div id="App">
<!---all will be define in App.js-->
<h1>Index.html </h1>
</div>
</body>
{% load static%}
<script src="{% static "frontend/main.js" %}"></script>
</html>
app.js
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import Header from './layout/header';
class App extends Component {
render() {
return (
<h1>App.JS</h1>
)
}
}
ReactDOM.render(<App />, document.getElementById('app'));
this is my project structure:
After running npm run dev and python manage.py runserver this is the status everything is fine till here:
Change this source code:
document.getElementById('app')
... to this:
document.getElementById('App')
Its because your element has id of "App" but you are trying to hook react app on element 'app'. It's case sensitive.
document.getElementById is case sensitive
I've read multiple posts that static files have to be in the /static/ folder and routed to with url_to in the html template. But it's not working. The entire site renders and loads with localhost, but externally viewed it only loads text, no css or js.
Console says 404: http://exmaple.com/static/scripts/my_app.js
Same applies for any images and css.
/home/me/my_app/web_dynamic/my_app.py
from flask import Flask, render_template, url_for
from models import storage
import uuid
app = Flask(__name__)
app.url_map.strict_slashes = False
port = 5000
host = '0.0.0.0'
#app.route('/', strict_slashes=False)
#app.route('/my_app/', strict_slashes=False)
def filters(the_id=None):
state_objs = storage.all('State').values()
states = dict([state.name, state] for state in state_objs)
places = storage.all('Place').values()
cache_id = uuid.uuid4()
return render_template('my_app.html',
states=states,
places=places,
cache_id=cache_id)
if __name__ == "__main__":
app.run(host=host, port=port)
/home/me/my_app/web_dynamic/temaplates/my_app.html
<html lang="en">
<head>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="{{ url_for('static', filename='scripts/myscript.js') }}"></script>
</head>
<body>
<! --- HTML and JINJA HERE -->
</body>
</html>
I keep getting this error with React:
_registerComponent(...): Target container is not a DOM element.
I'm using "create-react-app" with Yarn. There's three main files of code.
Here's the index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello World</title>
</head>
<body>
<div id="hw"></div>
</body>
</html>
And index.js:
import './index.css'
import React from 'react'
import {render} from 'react-dom'
import Hello from './Hello'
render(<Hello/>, document.querySelector('#hw'))
And Hello.js
import './helloworld.css'
import React, {Component} from 'react'
class Hello extends Component {
render() {
return
<div className="HelloWorld-hello HelloWorld-flex">
<h1>Hello</h1>
</div>
}
}
export default Hello
I've tried everything I can think of. All files are in the same "src" directory. This all started when I was trying to render two components within index.js using this:
render(
<div>
<Hello/>
<World/>
</div>,
document.querySelector('#hw'))
I found the issues, although I don't understand why one is happening. Apparantely, it's only working when I use root as the name of the div in index.html.
<body>
<div id="root"></div>
</body>
And index.js
import './index.css'
import React from 'react'
import ReactDOM from 'react-dom'
import Hello from './Hello'
import World from './World'
ReactDOM.render(<div><Hello/><World/></div>,
document.getElementById('root'))
In the Hello.js file, I placed the div outside of the line with return. Once I moved the div to start on that line.
import './helloworld.css'
import React, {Component} from 'react'
class Hello extends Component {
render() {
return <div className="HelloWorld-hello HelloWorld-flex">
<h1>Hello</h1>
</div>
}
}
export default Hello
I think I understand why I would need to put the <div> on the same line as the return, but I'm completely clueless about why only the word root works for the div id. I've tried all kinds of other words and get the same error.
Ultimately I was trying to have two separate child components (Hello.js and World.js) nested under a parent component (index.js).