Here is my flask project, which im trying to get a react file to work in.
In it, we have app.py, which contains the routes, and should be hitting index.html in the templates folder.
app = Flask(__name__)
#app.route("/stem")
# test channel
def qi():
return render_template('index.html')
in the html, im simple running the script for App.js,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="{{ url_for('static',filename='styles/App.css') }}">
<script src="https://unpkg.com/react#16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom#16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone#6.26.0/babel.js"></script>
<title>nstem</title>
</head>
<body>
<script src="{{ url_for('static', filename='js/App.js') }}"> </script>
<div id="root">
</div>
</body>
</html>
which, in turn, should be running a function that creates a bunch of elements.
import React from 'react';
import './static/styles/App.css';
import ReactDOM from 'react';
import game from './vectors/game.svg';
import v1 from './vectors/v1.svg';
import v2 from './vectors/v2.svg';
import flower4 from './vectors/flower4.svg';
import unity from './vectors/unity.svg';
import box from './vectors/box.svg';
import map1 from './vectors/map1.svg';
// <img class="map1" src={map1}/>
function DataStructures() {
const section = 'lists';
return (
<div>
<section class = "section">Allah'u'abha</section>
<div>
<div >
<div></div>
<div class = "listBox1"></div>
<div class = "indexBox1"></div>
<div class = "boxIndex1"></div>
</div>
</div>
<div>
<div >
<div class = "listBoxes1"></div>
<div class = "listBoxes2"></div>
<div class = "listBoxes3"></div>
</div>
</div>
<div>
<div >
<div class = "listBoxes1b"></div>
<div class = "listBoxes2b"></div>
<div class = "listBoxes3b"></div>
<div class = "boxIndex1b"></div>
<div class = "indexValue"></div>
</div>
</div>
<div>
<div >
<img class="flower2" src={v1}/>
<img class="flower3" src={v2}/>
<img class="flower4" src={flower4}/>
</div>
<div class="metabox">
<img class="flower5" src={flower4}/>
</div>
<div >
<img class="box" src={v2}/>
</div>
</div>
</div>
);
}
ReactDOM.render(
<DataStructures />,
document.getElementById('root')
);
The issue is, nothing but the background color for the page is coming up. Im trying to understand what i'm missing here. Do i need to edit my project structure, or might it be something else?
Since your React component is in JSX form the problem is most likely because the JSX needs to be transpiled into JavaScript that is browser-readable. Toolchains you are probably used to like Create-React-App will transpile for you (using Babel) but in Flask as far as I know you have to handle it yourself.
With Flask there are a few tutorials for making a toolchain for integrating with React out there but if you already have a pretty extensive Flask app it can be tricky.
My workaround was to initialize NPM for the project, install the babel-cli package, pre-transpile JSX files into JS and then link the HTML page to the transpiled JS file.
You can install by running the following commands:
npm init -y
npm install babel-cli#6 babel-preset-react-app#3
From there, you run this command:
npx babel --watch (jsdirectory) --out-dir (outputdirectory) --presets react-app/prod
where (jsdirectory) is the path to the directory where your React component files written using JSX are, and (outputdirectory) is where you want your translated files to show up--use . for (outputdirectory) to have transpiled files appear in your root directory.
Once you have the outputted .js files try to associate them with the HTML page as you normally would using the script tag and it should render properly.
Related
I try to implement Sign in with Facebook to my app (next.js), which require me to put tag to my html file, but with next.js is not static page, so I don't have html file.
This says I should create /public/static/script.js and put my code something like this:
import Head from 'next/head';
import MyAwesomeComponent from '../components/mycomponent';
export default () => (
<div>
<Head>
<script type="text/javascript" src="/static/script.js"></script>
</Head>
<MyAwesomeComponent />
</div>
)
Is that the way to do it is it a good practice, or I'm doing it wrong
When using a <select> tag on Safari with React and Bootstrap Safari automatically sets the CSS value of -webkit-appearance to menulist-button even when trying to force it to remain a menulist.
It's simpler to play with it. You'll see the issue on Safari, and not on other Chrome or Firefox.
Is it a bug, or is there a way to remove whatever is "triggering" this behavior?
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"></link>
</head>
<body>
<div id="root"></div>
</body>
</html>
import React from "react";
import { render } from "react-dom";
function App() {
return (
<div className="App">
<div className="container my-3 py-3">
<select name="outside" id="outside" className="form-control">
<option>blue</option>
<option>green</option>
<option>red</option>
<option>yellow</option>
<option>magenta</option>
</select>
</div>
</div>
);
}
const rootElement = document.getElementById("root");
render(<App />, rootElement);
https://codesandbox.io/embed/loving-robinson-8722i
The solution was twofold:
First use the custom-select class on the <select/> tag instead of form-control. That fixes the example above.
But since my project was using custom SCSS, I needed to make sure to rebuild it with Autoprefixer
For the latter, it's running something like this:
npm install autoprefixer postcss postcss-cli
postcss styles.css -u autoprefixer
Thanks #Tomas_moose!
I'm kinda new to ReactJS and don't even know if it's possible but I want my react app to be working in the browser from the .html file. without the need for calling the server and have it, working, only that way. ( I don't mind having a server to serve it obviously) just need to be able to have by calling the .html file
the public/index.html file:
<head>
<meta charset="utf-8">
<script src="/my_library/my_library.min.js"></script> <!-- needed for the project in the same folder the index.html is -->
<title>Demo</title>
</head>
<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`.
To create a production bundle, use `npm run build`.
-->
</body>
</html>
the index.js (in src folder):
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App from './App';
import './index.css';
ReactDOM.render(
React.createElement(App),
document.getElementById('root')
);
The App.jsx in the src folder
import * as React from 'react';
import './App.css';
import { MyContainer } from './components/MyContainer/index';
class App extends React.Component {
render() {
return (
<div className={ 'App' }>
<header className={ 'App-header' }>
<h1 className={ 'App-title' }>
</h1>
</header>
<MyContainer />
</div>
);
}
}
export default App;
PS: I have been able to add React to my file... But this particular component that I want to add only works with NPM Start. and as you can see in the index.html file shown above is says
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
which is exactly what I aim to change. if any one can provide some guidance or help about this, would be much appreciated.
If you just want to use React within an HTML file within a browser maybe you could just include the React library with a script tag as well as your custom React scripts with script tags as well. Their documentation has a nice example of just using React within an HTML file. I created a Codebox with their sample example for this below where the like button is using react. However, if you want to use JSX syntax you will have to use Babel, to transpile JSX into native JavaScript, and link the library like such:
<script src="https://unpkg.com/babel-standalone#6/babel.min.js"></script>
create_react_app gives you a lot of bells and whistles so you don't have to worry about setting up build configurations using tools such as webpack, babel, eslint, etc.. but this meant to give you a head start on building out an application so you can focus on the application itself and not configuration settings. Behind the scenes it's using webpack-dev-server to serve up your application, but for your use case I think it would be best to just add React as a script tag to an existing HTML page
'use strict';
const e = React.createElement;
class LikeButton extends React.Component {
constructor(props) {
super(props);
this.state = { liked: false };
}
render() {
if (this.state.liked) {
return 'You liked this.';
}
return e(
'button',
{ onClick: () => this.setState({ liked: true }) },
'Like'
);
}
}
const domContainer = document.querySelector('#like_button_container');
ReactDOM.render(e(LikeButton), domContainer);
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Add React in One Minute</title>
</head>
<body>
<h2>Add React in One Minute</h2>
<p>This page demonstrates using React with no build tooling.</p>
<p>React is loaded as a script tag.</p>
<!-- We will put our React component inside this div. -->
<div id="like_button_container"></div>
<!-- Load React. -->
<!-- Note: when deploying, replace "development.js" with "production.min.js". -->
<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>
<!-- Load our React component. -->
<script src="like_button.js"></script>
</body>
</html>
Hopefully that helps!
I'm a project and that project have a "bootstrap" own, and i would want to import it for my render.
I created an archive HTML with the scripts:
<html>
<head>
<script> //1.www.s81c.com/common/v18/css/www.css</script>
<script> //1.www.s81c.com/common/stats/ida_stats.js</script>
<script> //1.www.s81c.com/common/v18/js/www.js</script>
</head>
</html>
and imported in my App.js:
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
***import './V18.html'***;
class App extends Component {
render() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h1 class="nameOfClassImported" className="App-title">BEM VINDX</h1>
</header>
To get started, edit <code>src/App.js</code> and save to reload.
</div>
);
}
}
export default App;
but given that error:
> Failed to compile.
./src/V18.html
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| <html>
| <head>
| <script> //1.www.s81c.com/common/v18/css/www.css</script>
Resume:
I want to import scripts for i to use in my App.js
I think the tag for the .css file should be <link>.
There are multiple ways to import external scripts. One way that does work is to move these scripts to the <head> of your public/index.html.
/// public/index.html ///
<html>
<head>
<script src="//1.www.s81c.com/common/stats/ida_stats.js"></script>
<link href="//1.www.s81c.com/common/v18/css/www.css" rel="stylesheet">
<script src="//1.www.s81c.com/common/v18/js/www.js"></script>
/// rest of public/index.html ///
Those scripts will be downloaded when your page loads and you can access the variables in those scripts on the window object. After linking to these from your public/index.html, restart your React app, then open the console with F12 or Command-Option-i and type window into the console. There you will see all the global functions that are available from within your React app including window.IBMCore, window.Modernizr, etc
Have you tried this?
<script type='text/javascript' src='..//1.www.s81c.com/common/stats/ida_stats.js'></script>
and for following can you try a regular <link /> instead of <script>
import those in index.html path is public.index.html. Because your app put in one of div of same html page.
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
Read this how webpack work.
https://webpack.js.org/configuration/externals/
else other way is save file and import at App.js
import './App.scss';
Im building a new React app but get the following error -
"require is not defined"
hello-world.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<script src="react/react.js"></script>
<script src="react/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel" src="hello-world.js">
</body>
</html>
hello-world.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';
ReactDOM.render(
<App />,
document.getElementById('example')
);
App.jsx
import React from 'react';
class App extends React.Component {
render() {
return (
<div>
Hello World!!!
</div>
);
}
}
export default App;
Im running this from my client and don't have any web server running.
I tried to include http://requirejs.org/docs/release/2.2.0/minified/require.js
but it gives a totally different error.
You're trying to use a CommonJS module from within your browser.
This will not work.
How are you using them?
When you write import ... from ... in ES6 Babel will transpile these calls to a module definition called CommonJS and since CommonJS isn't around in the browser you'll get an undefined error from require().
Furthermore, you're also trying to load RequireJS which uses a different module definition pattern called AMD, Asynchronous Module Definition, and will not take care of the require calls for you. You can wrap them in RequireJS specific calls.
If you want to use CommonJS modules in your code base you need to first bundle them with either Browserify or webpack. The two tools will transform your require calls to some glue magic that you can use within the browser.
But in your specific case, if you remove the import calls and just let the browser take care of and attach the classes you've created to the window object your code should work.
Also, note that when you are using submodules from React without another transpiler you will have to reference the top-level modules. I just know that in some cases there are people who will not wish refactor their projects and alter directories to handle webpack/browserify module imports.
So instead of using the CommonJS import React, {useState, useEffect} from 'react' you can instead reference hooks with React.useEffect() , React.useState().
Just another solution for those who don't want to deal with any refactoring.
Here is a basic hello world example on hooks
The code samples on react website doesn't show the full html document. In summary use React.useEffect and React.useState. Get rid of the import statement.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello World</title>
<script src="https://unpkg.com/react#17/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom#17/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/#babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
function Example() {
const [count, setCount] = React.useState(0);
// Similar to componentDidMount and componentDidUpdate:
React.useEffect(() => { // Update the document title using the browser API
document.title = `You clicked ${count} times`; });
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}
ReactDOM.render(
<Example />,
document.getElementById('root')
);
</script>
</body>
</html>