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!
Related
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.
I am learning react and nextjs, and am faced with a problem where the bootstrap css is overriding my own css.
Here is my code
index.js
import Head from "next/head";
import Navbar from "../components/PrimaryBtn";
export default () => (
<div>
<Head>
<title>Testing</title>
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin="anonymous"
/>
<script
src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"
/>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin="anonymous"
/>
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin="anonymous"
/>
</Head>
<PrimaryBtn color="blue">click<PrimaryBtn />
</div>
);
PrimaryBtn.js
import React from 'react';
import styles from './PrimaryBtn.css';
export default const PrimaryBtn = (props) => {
return (
<div>
<button className={`btn btn-primary ${styles[props.color]}`}>{props.children}</button>
</div>
);
}
PrimaryBtn.css
.blue {
background-color: blue;
}
This background-color is overridden by the bootstrap class because the bootstrap cdn is rendered after my styles is there any work around to solve this.
I was facing the same issue. I fix it by changing the import of the bootstrap.
Instead of importing this: import "bootstrap/dist/css/bootstrap.css";
I import the Bootsrap CSS in the Head of _app.js like:
<Head>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous"
/>
</Head>
code screen shot for help
If you were to put a console.log(styles) in your PrimaryBtn render function, I assume you would see null or undefined. CSS is not understood by JavaScript, importing it into your JavaScript code only serves the purpose of ensuring that Webpack (or similar) includes it in your bundle. You only need to include the name of your class in your className, I believe className={`btn btn-primary ${props.color}`} is what you're looking for.
I am trying to include cdn link for my react js app. What would be the link to include material ui.
http://www.material-ui.com/#/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>First React App</title>
<script crossorigin src="https://unpkg.com/react#16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom#16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone#6.15.0/babel.min.js"></script>
</head>
<body>
<div id="container" style="font-style: italic;"></div>
<script type="text/babel">
var destination = document.querySelector("#container");
ReactDOM.render(
<h1>My First App</h1>,
destination);
</script>
</body>
</html>
The way to include material ui is through npm rather than a CDN link like traditional Frontend frameworks or libraries.
The correct way to to do it is through npm packages.
You install the library by running
npm install material-ui
Then you can use it inside your react component as below
import React from 'react';
import ReactDOM from 'react-dom';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import MyAwesomeReactComponent from './MyAwesomeReactComponent';
const App = () => (
<MuiThemeProvider>
<MyAwesomeReactComponent />
</MuiThemeProvider>
);
ReactDOM.render(
<App />,
document.getElementById('app')
);
You can read more about it here http://www.material-ui.com/#/get-started/installation
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>
JSX code:
var App = React.createClass({
render: function() {
return <div className="darken">hello world</div>
}
});
React.renderComponent(<App/>, document.querySelector('.main'))
HTML:
<body>
<header>welcome</header>
<div class="main"></div>
</body>
React.renderComponent will append rendered JSX to <div class="main">. Output of HTML will be:
<body>
<header>welcome</header>
<div class="main">
<div class="darken">hello world</div>
</div>
</body>
Is it possible React.renderComponent replace <div class="main">, so what I expect like this:
<body>
<header>welcome</header>
<div class="darken">hello world</div>
</body>
Was having a problem getting my component to render in React 0.14.0. My solution was make sure your scripts have a special type:
<script type="text/babel" src='js/app.js'></script>
Include these three libraries:
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
Then use ReactDOM.render():
ReactDOM.render(<Timer start={Date.now()} />, document.getElementById('app'));
I'm not even using ES6 or a build system. Simple solution to get text on the screen with react.js
Sure, just use:
React.render(<App/>, document.body);
Had a similar problem and this is what I came up with.
Replace it with a simple span tag so it doesn't affect your styling.
const appContainer = document.createElement('span')
const mainEl = document.querySelector('.main')
mainEl.parentNode.replaceChild(appContainer, mainEl)
React.renderComponent(<App/>, mainEl)
Which will produce
<body>
<header>welcome</header>
<span> <!-- this acts as the container for react -->
<div class="darken">hello world</div>
</span>
</body>