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.
Related
I've started to learn React lately and today to just memorize what i've learnt i decided to create a react component that contains a simple heading tag but i can't figure out why it won't be displayed in the browser here's my code
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
</div>
<script crossorigin src="https://unpkg.com/react#18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom#18/umd/react-dom.development.js"></script>
<script src="include-component.js" ></script>
</body>
</html>
and this is my react component which resides in file named include-component.js :
import React from "react";
import ReactDOM from "react-dom";
function IncludeComponent() {
return(
<TestComponent name="Hello Wolrd"/>
);
}
function TestComponent(props) {
return(
<h1>{props.name}</h1>
);
}
const app= document.getElementById('app');
ReactDOM.render(<IncludeComponent/>,app);
can someone tell me why my component won't render ?
You are using a confusing mixture of non-compiled code and compiled code. Did you checked your console? You surely have errors guiding you...
This is for when you don't have a compiler and React and ReactDOM will be available globally:
<script crossorigin src="https://unpkg.com/react#18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom#18/umd/react-dom.development.js"></script>
I don't recommend you try this approach. It is sub optimal and none of the resources you will see online are using it.
Then you do this:
<script src="include-component.js"></script>
This will already cause an exception since you're using import statements inside this JS file, but you haven't said that it type="module". Normal JS files can't use import statements.
Finally you can't import React and ReactDOM like that anyway, since you imported the browser versions which just have global variables.
Instead just start a project with Create React App:
npx create-react-app my-app
cd my-app
yarn start
And start experimenting in that instead.
For completeness you would need to transform with babel:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
</div>
<script src="https://unpkg.com/react/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/#babel/standalone/babel.js"></script>
<script type="text/babel">
function IncludeComponent() {
return(
<TestComponent name="Hello Wolrd"/>
);
}
function TestComponent(props) {
return(
<h1>{props.name}</h1>
);
}
const container = document.getElementById('app');
const root = ReactDOM.createRoot(app);
root.render(<IncludeComponent/>);
</script>
</body>
</html>
You must import the test component!!
import TestComponent from './TestComponent';
function App() {
return (
<div className="App">
<TestComponent name='hello world' />
</div>
);
}
export default App;
I'm working on my first Gatsby site and am good to go except for an embed code that needs to be placed in the body of one of the pages. I've looked at the documentation for SSR API's and can't seem to find any clear documentation as to how this is done. The code that needs to be embedded is below. Any help would be appreciated.
The embed code below only needs to go in the body of one page (not every page on the site)?
<style>.vagaro a {font-size:10px; color:#AAA; text-decoration:none;}</style>
<script type="text/javascript" src="https://www.vagaro.com//resources/WidgetEmbeddedLoader/OZqnC30tDZCcT3q"></script>
</div>
If you need at add this stuff to every page, you can do this with html.js.
First make a copy of the existing html.js so that you can make persistent changes:
cp .cache/default-html.js src/html.js
Then clear the cache and public folders:
gatsby clean
Then edit src/html.js with your required code before the closing of the <head>.
import React from "react"
import PropTypes from "prop-types"
export default function HTML(props) {
return (
<html {...props.htmlAttributes}>
<head>
<meta charSet="utf-8" />
<meta httpEquiv="x-ua-compatible" content="ie=edge" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
{props.headComponents}
<style>{`.vagaro a {font-size:10px; color:#AAA; text-decoration:none;}`}</style>
<script type="text/javascript" src="https://www.vagaro.com//resources/WidgetEmbeddedLoader/OZqnC30tDZCcT3q"></script>
</head>
<body {...props.bodyAttributes}>
{props.preBodyComponents}
<div
key={`body`}
id="___gatsby"
dangerouslySetInnerHTML={{ __html: props.body }}
/>
{props.postBodyComponents}
</body>
</html>
)
}
HTML.propTypes = {
htmlAttributes: PropTypes.object,
headComponents: PropTypes.array,
bodyAttributes: PropTypes.object,
preBodyComponents: PropTypes.array,
body: PropTypes.string,
postBodyComponents: PropTypes.array,
}
If you only need to add it to a single page, use react-helmet
import React from 'react';
import Helmet from 'react-helmet';
const SecondPage = () => {
return (
<>
<Helmet>
<title>Page Two</title>
<style>{`.vagaro a {font-size:10px; color:#AAA; text-decoration:none;}`}</style>
<script type="text/javascript" src="https://www.vagaro.com//resources/WidgetEmbeddedLoader/OZqnC30tDZCcT3q"></script>
</Helmet>
<h1>Page Two</h1>
<p>Welcome to page 2</p>
</>
);
};
export default SecondPage;
I am trying to use altmetrics in one of the my article (PDF) in my website.
I tried to add the altmetric badges (here) to in reacts js but I could not manage.
Here is my trial:
First I tried to create a component and add to the page
class DownloadPDF extends Component {
render() {
return (
<div>
<script type="text/javascript" src="https://d1bxh8uas1mnw7.cloudfront.net/assets/embed.js"></script>
<div data-badge-details="right" data-badge-type="medium-donut" data-doi={"my-doi-number-here"} class="altmetric-embed"> </div>
Download PDF
</div>
);
}
}
The second is I tried to put in the page directly:
<div>
<script type="text/javascript" src="https://d1bxh8uas1mnw7.cloudfront.net/assets/embed.js"></script>
<div data-badge-details="right" data-badge-type="medium-donut" data-doi="my-doi-number-here" class="altmetric-embed"> my-crosreff-doi.pdf</div>
{<DownloadPDF />}
</div>
Can someone know how can I put altmetrics badges correctly in reactJS?
Thank you all answers.
For seeing the Altmetrics result in your page first you should add:
altmetrics external javascript file
<script type='text/javascript'src='https://d1bxh8uas1mnw7.cloudfront.net/assets/embed.js'></script>
2.
You should add your DOI wherever you want to display
<div class='altmetric-embed' data-badge-type='donut' data-doi="10.1038/nature.2012.9872"></div>
so this is for adding to html page but when you add in ReactJS web app we have a tiny problem.
Problem is adding external javascript file to in ReactJS page that you want to display the Altmetrics badge
So solution is we need to install an addition library that allows us to implement any external javascript file.
Check the link:
https://github.com/shaneosullivan/ReactDependentScript/
We need to add below code in your ReactJS page
...
render() {
return (
<div>
<ReactDependentScript
loadingComponent={<div></div>}
scripts={['https://d1bxh8uas1mnw7.cloudfront.net/assets/embed.js']}
>
<div></div>
</ReactDependentScript>
...
</div>
);
}
}
then you can add your the Altmetrics badge wherever you want in the page like this
<div data-badge-details="right" data-badge-type="medium-donut" data-doi="doi-numberhere" class="altmetric-embed"></div>
I think all you need to do as described https://api.altmetric.com/embeds.html
that you put the js script in any where in html , but react is virtual dom , so all you need is put in puplic in index.html in <body> under <div id"root"></div>
or like you named. just simple as that
There are two things you are missing
Adding the script to index.html file underpublicdirectory (if you have created your app usingcreate-react-app`)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<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">
<!-- Here we go with the external script -->
<script type='text/javascript' src='https://d1bxh8uas1mnw7.cloudfront.net/assets/embed.js'></script>
<title>React App</title>
</head>
<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<div id="root"></div>
</body>
</html>
Change the class attribute to className in dom
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
class App extends Component {
render() {
return (
<div className="App">
// changed class to className
<div className='altmetric-embed' data-badge-type='donut' data-doi="10.1038/nature.2012.9872"></div>
</div>
);
}
}
export default App;
I am learning React, and I want to make my first project using Bootstrap also. I followed this tutorial, but all I get is this error:
./src/App.js
Line 9: 'Jumbotron' is not defined react/jsx-no-undef
This is my Apps.js:
import 'bootstrap/dist/css/bootstrap.min.css';
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
class App extends Component {
render() {
return (
<Jumbotron>
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h1 className="App-title">Welcome to My First React project</h1>
</header>
<p className="App-intro">
To get started, edit <code>src/App.js</code> and save to reload.
</p>
</Jumbotron>
);
}
}
export default App;
This is my index.js:
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();
And 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, 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">
<title>React App</title>
</head>
<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<div id="root"></div>
</body>
</html>
I installed all the modules stated in the tutorial and made the imports, but compiler still don't recognize Bootstrap objects, like Jumbotron.
You're referencing a global variable that doesn't exist. you're looking for https://reactstrap.github.io/
In this case, since you are importing the boostrap css file, you need to use the 'jumbotron' as a class in a div.
If you wanna write the bootstrap elements as jsx tags like you did you need to use the library Andy Ray referenced.
I'm trying to render a small search bar onto my website, but what I see is that it is still existing in the website, but its size becomes 0x0, and I can't find anything wrong with my ES6 code. Can someone debug for me please?
index.html:
<!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">
<link rel="stylesheet" href="/style/style.css">
<!-- <script src="https://maps.googleapis.com/maps/api/js"></script> -->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<title>React-Redux-Learning</title>
</head>
<body>
<div id="container"></div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Latest compiled and minified Bootstrap JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
</body>
<script src="/bundle.js"></script>
</html>
index.js:
import React from 'react'
import ReactDOM from 'react-dom'
import searchBar from './components/searchBar'
const youtubeAPIKey = '...'
const App = () => {
return (
<div>
<searchBar />
</div>
)
}
ReactDOM.render(<App />, document.getElementById('container'))
searchBar.js:
import React, { Component } from 'react'
class searchBar extends Component {
constructor(props) {
super(props)
this.state = {term: ''}
}
render() {
return <input onChange={event => console.log(event.target.value)}/>
}
}
export default searchBar
First of, you have defined your component as <searchBar\>. I guess React is not able to see it as JSX Component and is embedding it as a plain html tag instead, as evidenced by the <searchbar\> tag seen in Elements tab of chrome.
I think what you need is, to figure out why react is not able see searchBar as a JSX component. I hope this leads you to the right direction.
OK my boss actually found it out, it's the problem about CAPITALIZING the variable names. After I cap the first letter of the variable names things are working again...
Your search bar code works fine. Check your CSS to make sure that your body has a size.