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.
Related
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
I have an old Angular1.5 app, quite a large code base.
I'm now using ngReact to instance React from within an angular directive.
This is all working correctly. My new react 'sub-app' for want of a better phrase is working ok.
But now I need to call an ng-click in part of the old Angular app from React. The Angular ng-click then pops up a modal. The ng-click in the controller is in scope so it's available i.e. it's module is loaded into the browser.
Any ideas how to do this ?
I do have Redux instanced in Angular using ngRedux and available in React, could I dispatch from React and get the controller to respond to this dispatch / action ?
Does this seem ok ?
The answer to my question is yes, I can use Redux and subscribe to the redux state change in the angular controller with something like this
var unsubscribeRedux = $ngRedux.connect(this.mapStateToThis, fireAddTaskEvent )(this);
$scope.$on('$destroy', unsubscribeRedux);
this.mapStateToThis = function(state) {
console.log("fired from react");
return {
value: state.addTasks
};
}
It's crude at the moment, but works
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.
I am trying to mount a react component using jquery to a bootstrap modal body and then open the modal after a successful ajax request, however I cannot seem to get the react component to load. This is what I have so far:
After success I am calling the assignModal function, I am inside a parent react component.
assignModal: function(){
$('.assign-modal-body').html(<Cortex.VulnerabilityList.AssignModal parent={this}/>);
$("#vuln-assign-modal").modal('show');}
And here is the react component
Cortex.VulnerabilityList.AssignModal = React.createClass({
componentDidMount: function() {
console.log("Component mounted")
},
render: function() {
return (
<h1>Hello</h1>
)
}
});
From my experience, you're going to have trouble if you try to use both jQuery and React to manipulate the DOM. If it's at all an option for you, get rid of jQuery and fully embrace React's declarative programming paradigm.
But maybe you have jQuery widgets you want to use. In that case, try and design your app in such a way that jQuery never writes to the DOM within your React tree.
So a few options:
Use jQuery and React, but separately - Have your React app descending from some root <div> and have your modal in a sibling <div>. Then just use jQuery and normal HTML to render your modal without involving React.
Stop using jQuery - Use React to manage your modal. So instead of responding to assignModal by setting the innerHTML of a DOM element with jQuery, simply set some global state to showModal = true and in the render method of the modal if (!showModal) return null or something like that. I wrote a post about this recently.
I want to create a website that uses React JS as the handler for the UI component and Backbone JS for the routing. I don't like to follow the usual routing, for example:
www.domain-name.com/blog1
www.domain-name.com/blog1/post1
www.domain-name.com/blog1/profile
I would like to achieve a routing similar to this:
blog1.domain-name.com
blog1.domain-name.com/post1
blog1.domain-name.com/profile
Can someone advice me where to start because I can't get my footing. If you can give me tutorial or books that can help me, that would be great.
Pardon me if this seemed to be a broad question.
I'm not exactly sure what you're asking, but there is a simple way to use your Backbone Router with React components / views. Just declare your routes like usual in Backbone, and have each route render the proper react component:
In your router:
routes: {
'signup': 'signup',
'posts/new': 'newPost'
....
}
newPost: function() {
reactMount = $('.react-mount')[0]
React.renderComponent(MyNewPostReactComponent, whateverProps, reactMount)
}
Then you just need to have the proper DOM element with .react-mount. You can have this be the empty body, and each of your routes just renders a full react component, for example.