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.
Related
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
I'm developing a React Native project.
I have a (only) React component and I must integrate it into my React Native app.
I have tried with React Native WebView, but i get an error on ReactDOM.
Is there a way for integration with React Native Web View?
Thanks
React Native
import React from "react"
import { WebView } from 'react-native'
class TVView extends React.Component{
render(){
return (
<WebView
source={require('../TV/Resources/public/index.html')}
injectedJavaScript={require('../TV/Resources/src/index.html')}
style={{flex: 1}}
/>
);
}
}
export default TVChartView
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Demo</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
index.js
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')
);
App.js
import * as React from 'react';
import './App.css';
import { TVContainer } from './components/TVContainer/index';
class App extends React.Component {
render() {
return (
<div className={ 'App' }>
<header className={ 'App-header' }>
<h1 className={ 'App-title' }>
Example
</h1>
</header>
<TVContainer />
</div>
);
}
}
export default App;
First you run React project on localhost then you download library react-native-webview (https://www.npmjs.com/package/react-native-webview) because react-native deprecated WebView.
Example:-
import React from "react"
import {WebView} from 'react-native-webview';
class TVView extends React.Component{
render(){
return (
<WebView
source={{uri:'localhost:3000/}}
injectedJavaScript={`const meta = document.createElement('meta'); meta.setAttribute('content', 'width=device-width, initial-scale=0.5, maximum-scale=0.5, user-scalable=0'); meta.setAttribute('name', 'viewport'); document.getElementsByTagName('head')[0].appendChild(meta); `}
style={{flex: 1}}
/>
);
}
}
export default TVChartView
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'm using spring boot and my index.html is in src/main/resources/templates directory and below is the content. If i render a static content from html itself it renders but when i try to render from react component it doesn't render anything
<html xmlns:th="http://www.thymeleaf.org">
<head lang="en">
<meta charset="UTF-8"/>
<title>ReactJS + Spring Data REST</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.5.4/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.5.4/react-dom.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
</head>
<body>
<div id="react"></div>
<script src="built/bundle.js"></script>
</body>
</html>
my react component is in src/main/js/ directory and app.js file
Below is the all the codes i have in the app.js file
import React from 'react';
import {render} from 'react-dom';
import RendorTest from 'components/RendorTest';
class RendorTest extends React.component{
rendor(){
return(
<div><h1>Spring Boot + Rest + React.js</h1></div>
);
}
}
var element = <RendorTest />;
ReactDOM.render(
element,document.getElementById('react')
)
I'm not sure why you're importing RendorTest and then declaring another class of the same name, but you are also extending the wrong method on the React object. You need to extend React.Component { } not .component.
You could also import React, { Component } from "react"; and then extend Component { }
As ahutch mentioned, you also need to call the render() method, rendor() is not a method of React.Component.
Kyle is right and also you want to call render() and not rendor(). This component is also probably better written as a stateless functional component, for example:
const RendorTest = (props) => {
return (
<div>
<h1>Spring Boot + Rest + React.js</h1>
</div>
)
}
I have a React app which has many components importing the same modules. Does webpack import each module once for each file requesting it, resulting in duplicate code(in this case each import twice for just the two components)? I'm considering re-writing the components so that child components do not need to require the React modules, but maybe I'm solving a problem that doesn't exist. I'd like to avoid many imports of the same react module if it results in duplicate code.
Component 1
import React from "react";
import { Link } from "react-router";
import ReactLogo from "elements/ReactLogo";
export default class MainMenu extends React.Component {
render() {
return <div>
<ReactLogo type="svg" /> <ReactLogo type="png" /> <ReactLogo type="jpg" />
<h2>MainMenu:</h2>
<ul>
<li>The <Link to="home">home</Link> page.</li>
<li>Do something on the <Link to="todo">todo page</Link>.</li>
<li>Switch to <Link to="some-page">some page</Link>.</li>
<li>Open the chat demo: <Link to="chat" params={{room: "home"}}>Chat</Link>.</li>
<li>Open the page that shows <Link to="readme">README.md</Link>.</li>
</ul>
</div>;
}
}
Component 2 importing the same 3 modules.
import React from "react";
import { Link } from "react-router";
import ReactLogo from "elements/ReactLogo";
export default class MainMenu extends React.Component {
render() {
return <div>
<ReactLogo type="svg" /> <ReactLogo type="png" /> <ReactLogo type="jpg" />
<h2>MainMenu:</h2>
<ul>
<li>The <Link to="home">home</Link> page.</li>
<li>Do something on the <Link to="todo">todo page</Link>.</li>
<li>Switch to <Link to="some-page">some page</Link>.</li>
<li>Open the chat demo: <Link to="chat" params={{room: "home"}}>Chat</Link>.</li>
<li>Open the page that shows <Link to="readme">README.md</Link>.</li>
</ul>
</div>;
}
}
No, webpack (similar to browserify and other module bundlers) will only bundle it once.
Every react component will get its own scope, and when it requires/imports another module, webpack will check if the required file was already included or not in the bundle.
So no, it will not result in duplicate code. However if you import some external packaged libraries, you may have some duplicate code. In that case, you can use Webpack's Deduplication plugin to find these files and deduplicate them. More info here for that: https://github.com/webpack/docs/wiki/optimization#deduplication