I try to use snipcart in a single product page (like here) with react.
With the code below a click on the button (class="snipcart-add-item") doesn't do anything. How do I have to import?
In my version "data-api-key" is my correct snipcart api key of course.
import 'bootstrap/dist/css/bootstrap.min.css';
import "./App.css"
import React from 'react';
function App() {
return (
<div className="App">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="https://cdn.snipcart.com/scripts/2.0/snipcart.js" id="snipcart" data-api-key="API_KEY"></script>
<link href="https://cdn.snipcart.com/themes/2.0/base/snipcart.min.css" type="text/css" rel="stylesheet" />
<button
class="snipcart-add-item"
data-item-id="2"
data-item-name="Bacon"
data-item-price="3.00"
data-item-weight="20"
data-item-url="http://myapp.com/products/bacon"
data-item-description="Some fresh bacon">
Buy bacon
</button>
</div>
);
}
export default App;
Go to public/index.html and paste your scripts and link inside the head
Related
I am trying to embed a jobber request form in my react application but I am not sure how to go about this https://stackoverflow.com/questions/73739326/how-to-render-embedded-html-with-multiple-tags-in-react/73743146#73743146 has a similar question where the use of react-helmet was the solve.
I'd like for it to be button that would activate the form request. I have the button built, but not sure how to integrate the code below to make it all work.
import React from "react";
import { Helmet } from "react-helmet";
export default class Jobber extends React.Component {
render() {
return (
<div className="Application" id="f6f2802e-49e8-477b-b405-8b2b18dded97">
<Helmet>
<div id="f6f2802e-49e8-477b-b405-8b2b18dded97"></div>
<link
rel="stylesheet"
media="screen"
href="https://d3ey4dbjkt2f6s.cloudfront.net/assets/external/work_request_embed.css"
/>
<script
src="https://d3ey4dbjkt2f6s.cloudfront.net/assets/static_link/work_request_embed_snippet.js" clienthub_id="f6f2802e-49e8-477b-b405-8b2b18dded97" form_url="https://clienthub.getjobber.com/client_hubs/f6f2802e-49e8-477b-b405-8b2b18dded97/public/work_request/embedded_work_request_form"
/>
</Helmet>
</div>
);
}
}
'''
I just have a blank page.
I'm using FontAwesome inside a React App and TypesScript(created with react-react-app), but the icons aren't showing yet I followed the documentation's guide step-by-step.
Importing icons globally (index.tsx)
import { library } from '#fortawesome/fontawesome-svg-core';
import { faCheckSquare, faCoffee } from '#fortawesome/free-solid-svg-icons';
library.add(faCheckSquare, faCoffee);
Using the icons in my component
import { FontAwesomeIcon } from '#fortawesome/react-fontawesome';
export const Home = ()=> {
return <FontAwesomeIcon icon='coffee' size='lg'/>
}
What is happening?
The below screenshot shows where the icon is supposed to be next to view price changes but it's not visible. What am I doing wrong? Thanks in advance.
Most probably Css of font-awesome is not added
try adding this in your index.html file.
<head>
<meta charset="UTF-8">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-
awesome.min.css" rel="stylesheet" integrity="sha384-
wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN"
crossorigin="anonymous">
</head>
I am learning reactjs I have made components from a html template, when I am calling them I am receiving this error:
class App extends !(function webpackMissingModule() { var e = new Error("Cannot find module './components'"); e.code = 'MODULE_NOT_FOUND'; throw e; }())
Please any one let me know why this is occurring
**App.js**
import React from 'react';
import Component from './components';
import logo from './logo.svg';
import './App.css';
import About from './components/about';
import Blog from './components/blog';
import Contact from './components/contact';
import Footer from './components/footer';
import Home from './components/home';
import Menus from './components/menus';
import Projects from './components/projects';
import Reasearch from './components/reasearch';
import Services from './components/services';
import Testimonials from './components/testimonials';
import Welcome from './components/welcome';
class App extends Component {
render() {
return (
<div id="colorlib-page">
<div id="container-wrap">
<Menus></Menus>
<Welcome></Welcome>
<Welcome></Welcome>
<Services></Services>
<Reasearch></Reasearch>
<Projects></Projects>
<About></About>
<Testimonials></Testimonials>
<Blog></Blog>
<Contact></Contact>
<Footer></Footer>
</div>
</div>
);
}
}
export default App;
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Arvind Pundir - A Fullstack Web & App Developer</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="https://fonts.googleapis.com/css?family=Nunito+Sans:200,300,400,600,700,800,900"
rel="stylesheet">
<link rel="stylesheet" href="%PUBLIC_URL%/css/open-iconic-bootstrap.min.css">
<link rel="stylesheet" href="%PUBLIC_URL%/css/animate.css">
<link rel="stylesheet" href="%PUBLIC_URL%/css/owl.carousel.min.css">
<link rel="stylesheet" href="%PUBLIC_URL%/css/owl.theme.default.min.css">
<link rel="stylesheet" href="%PUBLIC_URL%/css/magnific-popup.css">
<link rel="stylesheet" href="%PUBLIC_URL%/css/aos.css">
<link rel="stylesheet" href="%PUBLIC_URL%/css/ionicons.min.css">
<link rel="stylesheet" href="%PUBLIC_URL%/css/flaticon.css">
<link rel="stylesheet" href="%PUBLIC_URL%/css/icomoon.css">
<link rel="stylesheet" href="%PUBLIC_URL%/css/style.css">
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!-- loader -->
<div id="ftco-loader" class="show fullscreen"><svg class="circular" width="48px" height="48px">
<circle class="path-bg" cx="24" cy="24" r="22" fill="none" stroke-width="4" stroke="#eeeeee"/>
<circle class="path" cx="24" cy="24" r="22" fill="none" stroke-width="4" stroke-miterlimit="10"
stroke="#F96D00"/></svg></div>
<script src="%PUBLIC_URL%/js/jquery.min.js"></script>
<script src="%PUBLIC_URL%/js/jquery-migrate-3.0.1.min.js"></script>
<script src="%PUBLIC_URL%/js/popper.min.js"></script>
<script src="%PUBLIC_URL%/js/bootstrap.min.js"></script>
<script src="%PUBLIC_URL%/js/jquery.easing.1.3.js"></script>
<script src="%PUBLIC_URL%/js/jquery.waypoints.min.js"></script>
<script src="%PUBLIC_URL%/js/jquery.stellar.min.js"></script>
<script src="%PUBLIC_URL%/js/owl.carousel.min.js"></script>
<script src="%PUBLIC_URL%/js/jquery.magnific-popup.min.js"></script>
<script src="%PUBLIC_URL%/js/aos.js"></script>
<script src="%PUBLIC_URL%/js/jquery.animateNumber.min.js"></script>
<script src="%PUBLIC_URL%/js/scrollax.min.js"></script>
<script src="%PUBLIC_URL%/js/main.js"></script>
</body>
The issue is with this line of code:
import Component from './components';
Notice that this is a directory for most of your other component imports:
import About from './components/about';
import Blog from './components/blog';
import Contact from './components/contact';
import Footer from './components/footer';
import Home from './components/home';
import Menus from './components/menus';
import Projects from './components/projects';
import Reasearch from './components/reasearch';
import Services from './components/services';
import Testimonials from './components/testimonials';
import Welcome from './components/welcome';
If you don't give an exact path to a component within your ./components directory there needs to be an index.js file within your ./components directory for the import Component from './components'; to work correctly. You can see this from your error message:
class App extends !(function webpackMissingModule() { var e = new Error("Cannot find module './components'"); e.code = 'MODULE_NOT_FOUND'; throw e; }())
This is telling you it can't find the ./components module associate with the import Component from './components'; import. Either add an index.js file within your ./components directory containing the necessary code for said component or double check that your path is correct for said import, i.e.:
import Component from './components'<COMPONENT>;
where <COMPONENT> is the name of the component you meant to import.
Hopefully that helps!
I'm trying to add the scroll function in script tags to this header component in Gatsby. I know it could work in html and not in react, but what is the right way to do it? Thanks!
import React from 'react'
import Link from 'gatsby-link'
import './header.css'
const Header = () => (
<div className='Header'>
<div className='HeaderGroup'>
<Link to='/'><img src={require('../img/logo_nav.png')} width='60' /></Link>
<Link to='/index'>Selected Works</Link>
<Link to='/uber'>Uber Thoughts</Link>
<Link to='/awards'>Awards</Link>
<Link to='/about'>About</Link>
</div>
</div>
)
export default Header
<script>
$(window).scroll(function () {
if ($(window).scrollTop() > 10) {
$('.Header').addClass('floatingHeader');
} else {
$('.Header').removeClass('floatingHeader');
}
}
</script>
If you want scripts to load before the DOM is ready you can add your scripts inside html.js file.
From the Gatsby docs:
Gatsby uses a React component to server render the and other
parts of the HTML outside of the core Gatsby application.
Read more about it here.
In your case, what you can do is to write your script inside the componentDidMount react lifecycle method, because you need access to the DOM (as you're using jQuery there) you need to run the script after the body has been loaded, so placing your script in the <head> won't work, you need to add it inside the componentDidMount method by first making your component a class component to get access to the react lifecycle methods.
import React from 'react'
import Link from 'gatsby-link'
import $ from 'jquery'
import './header.css'
class Header extends React.Component {
componentDidMount () {
$(window).scroll(function () {
if ($(window).scrollTop() > 10) {
$('.Header').addClass('floatingHeader');
} else {
$('.Header').removeClass('floatingHeader');
}
})
}
render () {
return (
<div className='Header'>
<div className='HeaderGroup'>
<Link to='/'><img src={require('../img/logo_nav.png')} width='60' /></Link>
<Link to='/index'>Selected Works</Link>
<Link to='/uber'>Uber Thoughts</Link>
<Link to='/awards'>Awards</Link>
<Link to='/about'>About</Link>
</div>
</div>
)
}
}
export default Header
You can also use a Gatsby layout template like the gatsby-starter-blog project and put your script at the bottom of the {children} call as a <script>Your script</script> and it will be available in all your pages, same as using the html.js file but since you need access to the DOM you need to put it inside the body for your script to work (more info about Gatsby layouts here).
I am trying to use http://www.material-ui.com/ for front end design. I am trying to execute the first example within the getting started tutorial. I have following html file :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>examples</title>
</head>
<body>
<div id="app"></div>
<script type="text/javascript" src="App.js"></script>
<script type="text/javascript" src="MyAwesomeReactComponent.js"></script>
</body>
</html>
and following App.js and MyAwesomeReactComponent.js files as defined in ( http://www.material-ui.com/#/get-started/usage )
App.js :
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')
);
MyAwesomeReactComponent.js:
import React from 'react';
import RaisedButton from 'material-ui/RaisedButton';
const MyAwesomeReactComponent = () => (
<RaisedButton label="Default" />
);
export default MyAwesomeReactComponent;
But when I run the index file, I can't see any output.
The problem is here since you are implementing ES6 code, you need to use a javascript compiler like babel to transform your ES6 code to ES5 which is current javascript standard that is supported by browsers.
It would be a good practice to use babel with webpack as a loader.
Following React's get started page's instruction is a good starting point. I'd suggest reading the instructions carefully.
Finally, if you want to use pure ES6 without transforming, the compatibility table is available here: https://kangax.github.io/compat-table/es6/