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
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 am learning react.js by myself, so you may find this question a silly one. But, I want to learn concepts.
home.js
import React from 'react';
import ReactDOM from 'react-dom';
class AppStyle extends React.Component {
render() {
var myStyle = {
fontSize: 100,
color: '#FF0000'
}
return (
<div>
<h1 style = {myStyle}>Header Style</h1>
</div>
);
}
}
ReactDOM.render(<AppStyle />, document.getElementById('style'));
export default AppStyle;
index.js
import React from 'react';
import ReactDOM from 'react-dom';
class App extends React.Component {
render() {
var i = 1;
return (
<div>
<h1>Header</h1>
<h2>Content</h2>
<p data-myattribute = "somevalue">This is the content!!!</p>
<h1>{1+1}</h1>
<h1>{i === 1 ? 'True' : 'False'}</h1>
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById('root'));
export default App;
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="widht=device-width, initial-scale=1" />
<title>Learn React</title>
</head>
<body>
<div id="root"></div>
<div id="style"></div>
</body>
</html>
In my index.html, I have placed two divs, which are calling two different components, but the only first component is loaded on the page. Is there any way to call both of them? And if not then why?
Here is the pattern.
home.js
import React from 'react';
import ReactDOM from 'react-dom';
class AppStyle extends React.Component {
render() {
var myStyle = {
fontSize: 100,
color: '#FF0000'
}
return (
<div>
<h1 style = {myStyle}>Header Style</h1>
</div>
);
}
}
export default AppStyle;
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import Home from './home';
class App extends React.Component {
render() {
var i = 1;
return (
<>
<div>
<h1>Header</h1>
<h2>Content</h2>
<p data-myattribute = "somevalue">This is the content!!!</p>
<h1>{1+1}</h1>
<h1>{i === 1 ? 'True' : 'False'}</h1>
</div>
<Home />
</>
);
}
}
ReactDOM.render(<App />, document.getElementById('root'));
export default App; // not necessary since you are rendering already...
you can also create a seperate component for the code
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="widht=device-width, initial-scale=1" />
<title>Learn React</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
Nothing is importing and rendering Home. If you really wanted to render into two separate elements on the same page, then import Home into index.js and then you can render both.
import React from 'react';
import ReactDOM from 'react-dom';
import AppStyle from './home';
class App extends React.Component {
render() {
var i = 1;
return (
<div>
<h1>Header</h1>
<h2>Content</h2>
<p data-myattribute = "somevalue">This is the content!!!</p>
<h1>{1+1}</h1>
<h1>{i === 1 ? 'True' : 'False'}</h1>
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById('root'));
ReactDOM.render(<AppStyle />, document.getElementById('style'));
As others have pointed out though, the normal pattern is to only render a single react application per page.
I keep getting the error "Module not found: Can't resolve './components/dndEditor' in '/Users/bob/Documents/GitHub/Active/DevComponents/DragDropComponents/src'"
I have scaled the code right back to the basics and it still is not working I must be doing something fundamentally wrong (I am more used to working with functional components than classes). The urls are pointing the files as visual studio is autocompleting the URL.
import React from 'react';
import ReactDOM from 'react-dom';
import DndEditor from './components/dndEditor';
class App extends React.Component {
render() {
return (
<div>
<DndEditor />
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById('root'));
and the class is
import React from 'react';
export default class DndEditor extends React.Component {
render() {
return (
<div>
<h1>gfd </h1>
</div>
)
}
}
Code looks fine there might be something wrong with the file name .
Check the below link of codesandbox . It is working there
https://codesandbox.io/s/laughing-shaw-v210y
index.js file
import React from "react";
import ReactDOM from "react-dom";
import "./styles.css";
import DndEditor from "./DndEditor";
function App() {
return (
<div className="App">
<h1>Hello CodeSandbox</h1>
<DndEditor />
</div>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
DndEditor.js
import React from "react";
export default class DndEditor extends React.Component {
render() {
return (
<div>
<h1>This is DndEditor </h1>
</div>
);
}
}
botframework with react is not working in IE,
I'm using my index html file similar to
https://github.com/microsoft/BotFramework-WebChat/tree/master/samples/03.a.host-with-react, its working in chrome but not in IE, i tried using webchat-es5.js also.
I'm using token given by bot team.
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Web Chat: Integrate with React</title>
<script src="https://unpkg.com/babel-standalone#6/babel.min.js"></script>
<script src="https://unpkg.com/react#16.5.0/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom#16.5.0/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/react-redux#5.0.7/dist/react-redux.min.js"></script>
<script src="https://cdn.botframework.com/botframework-webchat/latest/webchat-es5.js"></script>
<style>
html, body { height: 100% }
body { margin: 0 }
#webchat {
height: 100%;
width: 100%;
}
</style>
</head>
<div id="webchat" role="main"></div>
<script type="text/babel">
function start() {
const { createStore, ReactWebChat } = window.WebChat;
const { Provider } = window.ReactRedux;
const store = createStore();
window.ReactDOM.render(
<Provider store={ store }>
<ReactWebChat
directLine={ window.WebChat.createDirectLine({ token:'mytoken' }) }
storeKey="webchat"
/>
</Provider>,
document.getElementById('webchat')
);
document.querySelector('#webchat > *').focus();
}
start();
</script>
</body>
</html>
working in Chrome but not in IE, somebody help me on this please.
Unfortunatley, the "webchat-es5.js" package was designed for instantiating web chat via the window.WebChat.renderWebChat method. While the "webchat.js" package does allow for using window.ReactDOM.render, it is not designed for older browsers, such as IE.
I played with this a bunch and was simply unable to render web chat using window.ReactDOM.render while also in IE, despite utilizing any number of polyfills. That being said, I was able to get the hosted React web chat sample to work in a proper React project with a few of modifications. Please note, this also makes use of webpack.
Hope of help!
index.js: Nothing special or unexpected here.
import React from 'react';
import ReactDOM from 'react-dom';
import App from './app';
import './css/index.css';
import * as serviceWorker from './serviceWorker';
ReactDOM.render(<App />, document.getElementById('root'));
serviceWorker.unregister();
app.js: Just some necessary routing.
import React, { Component } from 'react';
import { BrowserRouter as Router, Route } from 'react-router-dom';
import WebChatView from './webChatView';
class App extends Component {
render() {
return (
<Router>
<div className="App">
<Route path="/" exact component={WebChatView} />
</div>
</Router>
);
}
}
export default App;
webChatView.js: Renders the web chat page (with some necessary styling)
import React, { Component } from 'react';
import WebChatView from './webchatView';
const FragmentStyling = {
'container': {
'display': 'flex',
'justifyContent': 'center'
},
'div': {
'height': '40rem',
'minHeight': '20rem',
'width': '1200px',
'display': 'flex',
'justifyContent': 'space-around',
'marginTop': '2rem'
}
}
class WebChatView extends Component {
render() {
return (
<div style={FragmentStyling.container}>
<div style={FragmentStyling.div}>
<WebChatView id="webchat" role="main" />
</div >
</div>
)
}
}
export default WebChatView;
webchat.js: Several things to note:
Either import '#babel/polyfill' needs to be included or all the 'core-js' imports listed below. Babel recommends importing only the required polyfills (to keep package size down). Those shown below are what is needed. However, using the '#babel' option works, as well.
Simply using fetch as-is breaks due to compatibility issues. There may be other options, but the below 'whatwg-fetch' option works in both IE and Chrome. Others I tested did not.
'fetching' the token needs to be promise-based. Using async/await breaks React web chat in IE.
import 'core-js/es6/map';
import 'core-js/es6/promise'
import 'core-js/es6/set';
import 'core-js/es6/symbol';
import 'core-js/fn/array/find-index';
import 'core-js/fn/array/includes';
import 'core-js/fn/math/sign';
import 'core-js/fn/object/assign';
import 'core-js/fn/string/starts-with';
import { fetch as fetchPolyfill } from 'whatwg-fetch';
import React from 'react';
import ReactWebChat, { createDirectLine } from 'botframework-webchat';
export default class WebChat extends React.Component {
constructor(props) {
super(props);
this.state = {
directLine: null
};
}
componentDidMount() {
this.fetchToken();
}
fetchToken(token) {
fetchPolyfill('http://localhost:3500/directline/token', { method: 'POST' })
.then(res => res.json()) // expecting a json response
.then(json =>
this.setState(() => ({
directLine: createDirectLine(
{
token: json.token
}
)
}))
)
}
render() {
return (
this.state.directLine ?
<ReactWebChat
directLine={this.state.directLine}
/>
:
<div>Connecting to bot…</div>
)
}
}
index.html: The 'react-polyfill.min.js' package needs to be included and should precede any other scripts that might live here.
<!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.0">
<script src="//pitzcarraldo.github.io/react-polyfill/react-polyfill.min.js" charSet="UTF-8"></script>
<title>React Web App</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
webpack.config.js: The import 'script!react-polyfill' needs to be included at the top of this file.
import 'script!react-polyfill';
const path = require('path');
module.exports = {
entry: ['./src/index.js'],
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'main.js'
},
mode: 'development'
};
I am learning React and following integrating other Libraries chapter and tried the same they have suggested but getting below error
TypeError: this.$el.chosen is not a function
Chosen.componentDidMount
src/App.js:18
componentDidMount() {
this.$el = $(this.el);
> this.$el.chosen();
}
react website provides example codepen where they have added the jquery and chosen plugin js in dependencies and I have added jquery and chosen library js file in index.html and also added jquery using npm install jquery --save so that it can be imported in App.js
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">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.6.2/chosen.jquery.min.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>
App.js
import React, { Component } from 'react';
import $ from 'jquery';
class Chosen extends Component {
componentDidMount() {
this.$el = $(this.el);
this.$el.chosen();
}
componentWillUnmount() {
this.$el.chosen('destroy');
}
render() {
return (
<div >
<select className="Chosen-select" ref={el => this.el = el}>
{this.props.children}
</select>
</div>
);
}
}
function Example() {
return (
<Chosen >
<option >vanila</option>
<option >strawberry</option>
<option >chocolate</option>
</Chosen>
);
}
class App extends Component {
render() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h1 className="App-title">Welcome to React</h1>
</header>
<section>
<Example/>
</section>
</div>
);
}
}
export default App;
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));
Why I am getting this error and how to fix it?
Got it to work by following these steps (after creating a project using create-react-app)
npm install jquery --save
npm install chosen-js --save
Add this in line #1 of node_modules/chosen-js/chosen.jquery.js
import jQuery from 'jquery'
As per this answer
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import $ from 'jquery'
import "chosen-js/chosen.css";
import "chosen-js/chosen.jquery.js";
class Chosen extends React.Component {
componentDidMount() {
this.$el = $(this.el);
this.$el.chosen();
this.handleChange = this.handleChange.bind(this);
this.$el.on('change', this.handleChange);
}
componentDidUnmount() {
this.$el.off('change', this.handleChange);
this.$el.chosen('destroy');
}
handleChange(e) {
this.props.onChange(e.target.value);
}
render() {
return (
<div>
<select className="Chosen-select" style={{width: "200px"}} ref={el => this.el = el}>
{this.props.children}
</select>
</div>
);
}
}
function Example() {
return (
<Chosen className="chosen-container chosen-container-single" onChange={value => console.log(value)}>
<option>vanilla</option>
<option>chocolate</option>
<option>strawberry</option>
</Chosen>
);
}
class App extends Component {
render() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h1 className="App-title">Welcome to React</h1>
</header>
<p className="App-intro">
To get started, edit <code>src/App.js</code> and save to reload.
<Example/>
</p>
</div>
);
}
}
export default App;
I have also face the same issue while reading the documentation. But instead of updating the "node_modules/chosen-js/chosen.jquery.js" file, I prefer to Use the ProvidePlugin to inject implicit globals in webpack.config.js
But when we create an application using create-react-app we didn't find the webpack.config.js file.
You will need to eject the react application. But you should first read from the following links before ejecting the application(If you’re a power user and you aren’t happy with the default configuration).
Links:-
https://github.com/satendra02/react-chrome-extension/wiki/What-happens-when-you-eject-Create-React-App
https://medium.com/curated-by-versett/dont-eject-your-create-react-app-b123c5247741
You will need to run the following command to eject the react application as this command will remove the single build dependency from your project and also copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc.) into your project as dependencies in package.json
npm run eject
Install the dependencies
npm install jquery chosen-js --save
Now edit your webpack.config.js file and update the config object as follow
return {
...
module: {
...
},
plugins: [
...
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery"
}),
]
...
}
Chosen.js
import React from 'react';
import $ from "jquery";
import "chosen-js/chosen.css";
import "chosen-js/chosen.jquery.js";
class Chosen extends React.Component {
componentDidMount() {
this.$el = $(this.el);
this.$el.chosen();
this.handleChange = this.handleChange.bind(this);
this.$el.on("change", this.handleChange);
}
componentDidUpdate(prevProps) {
if (prevProps.children !== this.props.children) {
this.$el.trigger("chosen:updated");
}
}
componentWillUnmount() {
this.$el.off("change", this.handleChange);
this.$el.chosen("destroy");
}
handleChange(e) {
this.props.onChange(e.target.value);
}
render() {
return (
<div>
<select className="Chosen-select" ref={(el) => (this.el = el)}>
{this.props.children}
</select>
</div>
);
}
}
It seems like a issue related with dependency.
I notice that you include JQuery and its chosen plugin with CDN which means it is declared globally. But in third line of App.js you import $ from 'jquery'; which may introduce JQuery locally. In my experience, React will refer $ to local JQuery which is not with the plugin.
I suggest that you could try comment out import $ from 'jquery' and try again.
Good luck!
Use
window.$("#infomodal").modal("hide");