I need help with this problem. My objective is to put a website inside a ReactJs web app. I tried using the iframe of ReactJs, it does not work.
Is there a way to use React Native WebView component inside a ReactJs web app?
Or is there a Webview Component in ReactJs
I do want the end-user to jump to another tab in order to use the website. I want them to continue to stay in the ReactJs web app and use the website.
The website that I am putting is a .Net website and I am doing a ReactJs project, not a React Native Project
simply using iframe should work as this exemple (source below)
since your giving an url to this iframe langage doesn't matter if it can be served in http(s)
import React from "react";
import ReactDOM from "react-dom";
class App extends React.Component {
render() {
return <iframe src="https://<website>/" />;
}
}
ReactDOM.render(<App />, document.getElementById("container"));
As said in source the src url should be embeddable to be used inside an iframe if not you can use a reverse proxy to serve this url and change headers
source:
https://blog.bitsrc.io/best-practices-in-using-iframes-with-react-6193feaa1e08
Related
I am new Dynamics CRM. My project includes form submissions and validations. I am planning to build a product using a React with Redux frontend and a service from CRM.
What will be the best practice in CRM on Building CRM Web Resources
Can anyone guide me?
https://github.com/sonomapartners/web-resources-with-react
import 'babel-polyfill';
import React from 'react';
import ReactDOM from 'react-dom';
import CaseSummary from './components/CaseSummary.jsx';
window.addEventListener('load', function onLoad() {
ReactDOM.render( <CaseSummary />,
document.getElementById("container") );
});
Get context:
Add ClientGlobalContext.js.aspx in the in the index.html:
<script type="text/javascript" src="ClientGlobalContext.js.aspx">. ClientGlobalContext is the offical hook to Dynamics form context.
In the React componentDidMount life cycle, Add const context = GetGlobalContext(); to get the context object.
if you send data to the WebResource with the OpenWebResource(webResourceName, windowOptions, data), you can get the data in this way: JSON.parse(context.getQueryStringParameters().Data);
Intellisense: if you are using TypeScript use the d.ts (definition) file: ///<reference path=Xrm.V9.d.ts/>. you can get it here.
Uplaod: WebRersource can't be jsx or tsx type. After you compile your project you should only upload the bundled file (bundle.js).
Debug: If you want to debug your jsx/tsx file, you will need to use fiddler's AutoResponder to use the source map file. Here is an explanation.
I started working with React about 6 months ago and I have one website in html and one application in react. Now I want to make together and run on react default port. when react start I want to open website and then click on one link in website open the react app.
I am trying many ways but unable to figured out solutions.
Somebody could tell me any way to do this?
Try this, worked for me.
Let's consider home.html as Static HTML Page (not reactjs) and index.htmlas ReactJS APP.
On Link/Login press from home.html, I want to render reactjs app.
Link to URL /#/login (login button on home.html) as I'm using HashRouter (react-router v3).
<li>
<a class="page-scroll" href="/#/login">Login</a>
</li>
Now in index.html in public folder of Reactjs. Indicated that if URL is just / render home.html.
<script>
var url = window.location.href;
if (!url.replace(/.*#\//, '')) {
location.href = 'home.html'
}
</script>
I put both index.html and home.html inside same directory/.
we have a CMS build on PHP, which uses custom modules.
Each module is rendered as HTML document and can be included(hooked) on every single page and has its own, dynamic aund unique ID in the html.
Now I would like to create a JavaScript Template System for this modules where the React appliaction could be rendered on each module.
For example I have created my react bundle. And I also have my single page with module which generates the modules with module html where react should be rendered. And I would like my react bundle to render on this id instead of:
ReactDOM.render(<App />, document.getElementById('root'));
The ID mod-123416-name is automatically created, so that I want with some code for example RenderReactOn("mod-123516-name") on the client side to render one react bundle on each module with this id.
So I can render the same react code on n different modules on the client side:
RenderReactOn("mod-123516-name");
RenderReactOn("mod-252141-name");
RenderReactOn("mod-453467-name");
Is this possible with react, or what are the best practices in such cases. Maybe I should take Knockout.js instead of react?
Thanks in advice
Tony
This is not a problem at all, I'd do it this way:
Bundle your Components (React Apps) in a single File:
import React from 'react';
import { render } from 'ReactDOM'
import ReactAppOne from 'ReactAppOne'
import ReactAppTwo from 'ReactAppTwo'
const Apps = {
ReactAppOne,
ReactAppTwo,
}
function renderAppIn(elementId, appId) {
const APP = Apps[appId]
if (!APP) return;
render(<APP />, document.getElementById(id))
}
// simply assign that function to the window
window.renderAppIn = renderAppIn;
In your rendered html:
<div id="some-app-123"></div>
<div id="some-app-xyz"></div>
<script src="/js/bundle.js"></script>
<!-- Render your Render Stamements -->
<script>
renderAppIn('some-app-123', 'ReactAppOne')
renderAppIn('some-app-123', 'ReactAppTwo')
// render the same app in another div
renderAppIn('some-other-div', 'ReactAppTwo')
</script>
I am building an application using angular and redux (ngRedux). Now i want to use react instead of angular for improvement in performance. It is a huge application so it is not possible to build it from scratch. So i want to use the routing of angularJS (angular-ui-router) and as any "abc" state become active then the react component become load and this react component should use the pure redux against every single event.
How can i maintain my application accordingly that a single module is build in react-redux and connected to angular only through routing state. Keep in mind that the other modules of application should also not be disturbed.
Well to render React components into Angular is quite easy. But I just assume you use directiveor component from angular already.
So in the case of directive you could skip the whole templating "none sense" and let React handle that for you
module.directive("reactTest",function() {
return {
link:function(scope,element,attr) {
class App extends React.Component {
constructor(props) { super(props) }
render <div></div>
}
element.replace(App);
}
}
});
So this how you would get React into Angular. Redux ist basically the same. You simple use the connect function of redux and off you go.
I am working with this flask react template project here and I am running into an issue
https://github.com/bonniee/react-flask
When rendering index.html, I want to pass back some data from flask
#app.route('/')
def hello_world():
return render_template('index.html', somedata="YOOOO")
And use it in the react components
render() {
this.loadDataFromServer();
return <h1>sup? {{somedata}}</h1>;
}
});
Is there a clean way to do it in this project format?
In your template, you could include a script tag that sets window.somedata to the value you want. You could then access that directly in render, or preferably if you've got flux or redux you could dispatch an action with that data during mounting of the react components.