React components inside Angular 1.4 application
I have an angular application built using gulp. I want to use React components inside it for different functionalities. Angular application is loading js through script tags and React app have its own store containers etc. and is using React 16.
How can I import my components etc inside angular.
angularjs reactjs
edited Nov 13 '18 at 10:35
georgeawg
33k104968
asked Nov 13 '18 at 9:51
user_newuser_new
14111
add a comment |
I have an angular application built using gulp. I want to use React components inside it for different functionalities. Angular application is loading js through script tags and React app have its own store containers etc. and is using React 16.
How can I import my components etc inside angular.
angularjs reactjs
edited Nov 13 '18 at 10:35
georgeawg
33k104968
asked Nov 13 '18 at 9:51
user_newuser_new
14111
add a comment |
I have an angular application built using gulp. I want to use React components inside it for different functionalities. Angular application is loading js through script tags and React app have its own store containers etc. and is using React 16.
How can I import my components etc inside angular.
angularjs reactjs
edited Nov 13 '18 at 10:35
georgeawg
33k104968
asked Nov 13 '18 at 9:51
user_newuser_new
14111
I have an angular application built using gulp. I want to use React components inside it for different functionalities. Angular application is loading js through script tags and React app have its own store containers etc. and is using React 16.
How can I import my components etc inside angular.
angularjs reactjs
angularjs reactjs
edited Nov 13 '18 at 10:35
georgeawg
33k104968
asked Nov 13 '18 at 9:51
user_newuser_new
14111
edited Nov 13 '18 at 10:35
georgeawg
33k104968
asked Nov 13 '18 at 9:51
user_newuser_new
14111
edited Nov 13 '18 at 10:35
georgeawg
33k104968
edited Nov 13 '18 at 10:35
georgeawg
33k104968
edited Nov 13 '18 at 10:35
georgeawg
33k104968
33k104968
asked Nov 13 '18 at 9:51
user_newuser_new
14111
asked Nov 13 '18 at 9:51
user_newuser_new
14111
asked Nov 13 '18 at 9:51
user_newuser_new
14111
14111
add a comment |
add a comment |
2 Answers
2
active
oldest
votes
Any existing AngularJS/React adapter like react2angular can be used.
All these adapters do is ReactDOM.render in $onInit hook and ReactDOM.unmountComponentAtNode in $onDestroy.
answered Nov 13 '18 at 10:07
estusestus
69.4k21102218
add a comment |
You can use React Component with Angular Directive or use can use it inside
$onInit in angular
var HelloWorld = React.createClass({
displayName:'Hello World',
render:function(){
return React.DOM.div(Test, "Hello, ",this.props.value1);
}
});
$scope.name = 'World!';
app.directive('hello', function(){
return {
restrict:'E',
scope:{
name:'='
},
link:function(scope, el, attrs){
scope.$watch('name', function(newValue, oldValue){
var MyComponent = React.createFactory(HelloWorld);
ReactDOM.render(
MyComponent({value1:newValue}),
el[0]
);
})
}
}
})
edited Nov 13 '18 at 10:41
georgeawg
33k104968
answered Nov 13 '18 at 10:23
Neeraj KaushikNeeraj Kaushik
14
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53278213%2freact-components-inside-angular-1-4-application%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
Any existing AngularJS/React adapter like react2angular can be used.
All these adapters do is ReactDOM.render in $onInit hook and ReactDOM.unmountComponentAtNode in $onDestroy.
answered Nov 13 '18 at 10:07
estusestus
69.4k21102218
add a comment |
Any existing AngularJS/React adapter like react2angular can be used.
All these adapters do is ReactDOM.render in $onInit hook and ReactDOM.unmountComponentAtNode in $onDestroy.
answered Nov 13 '18 at 10:07
estusestus
69.4k21102218
add a comment |
Any existing AngularJS/React adapter like react2angular can be used.
All these adapters do is ReactDOM.render in $onInit hook and ReactDOM.unmountComponentAtNode in $onDestroy.
answered Nov 13 '18 at 10:07
estusestus
69.4k21102218
Any existing AngularJS/React adapter like react2angular can be used.
All these adapters do is ReactDOM.render in $onInit hook and ReactDOM.unmountComponentAtNode in $onDestroy.
answered Nov 13 '18 at 10:07
estusestus
69.4k21102218
answered Nov 13 '18 at 10:07
estusestus
69.4k21102218
answered Nov 13 '18 at 10:07
estusestus
69.4k21102218
answered Nov 13 '18 at 10:07
estusestus
69.4k21102218
69.4k21102218
add a comment |
add a comment |
You can use React Component with Angular Directive or use can use it inside
$onInit in angular
var HelloWorld = React.createClass({
displayName:'Hello World',
render:function(){
return React.DOM.div(Test, "Hello, ",this.props.value1);
}
});
$scope.name = 'World!';
app.directive('hello', function(){
return {
restrict:'E',
scope:{
name:'='
},
link:function(scope, el, attrs){
scope.$watch('name', function(newValue, oldValue){
var MyComponent = React.createFactory(HelloWorld);
ReactDOM.render(
MyComponent({value1:newValue}),
el[0]
);
})
}
}
})
edited Nov 13 '18 at 10:41
georgeawg
33k104968
answered Nov 13 '18 at 10:23
Neeraj KaushikNeeraj Kaushik
14
add a comment |
You can use React Component with Angular Directive or use can use it inside
$onInit in angular
var HelloWorld = React.createClass({
displayName:'Hello World',
render:function(){
return React.DOM.div(Test, "Hello, ",this.props.value1);
}
});
$scope.name = 'World!';
app.directive('hello', function(){
return {
restrict:'E',
scope:{
name:'='
},
link:function(scope, el, attrs){
scope.$watch('name', function(newValue, oldValue){
var MyComponent = React.createFactory(HelloWorld);
ReactDOM.render(
MyComponent({value1:newValue}),
el[0]
);
})
}
}
})
edited Nov 13 '18 at 10:41
georgeawg
33k104968
answered Nov 13 '18 at 10:23
Neeraj KaushikNeeraj Kaushik
14
add a comment |
You can use React Component with Angular Directive or use can use it inside
$onInit in angular
var HelloWorld = React.createClass({
displayName:'Hello World',
render:function(){
return React.DOM.div(Test, "Hello, ",this.props.value1);
}
});
$scope.name = 'World!';
app.directive('hello', function(){
return {
restrict:'E',
scope:{
name:'='
},
link:function(scope, el, attrs){
scope.$watch('name', function(newValue, oldValue){
var MyComponent = React.createFactory(HelloWorld);
ReactDOM.render(
MyComponent({value1:newValue}),
el[0]
);
})
}
}
})
edited Nov 13 '18 at 10:41
georgeawg
33k104968
answered Nov 13 '18 at 10:23
Neeraj KaushikNeeraj Kaushik
14
You can use React Component with Angular Directive or use can use it inside
$onInit in angular
var HelloWorld = React.createClass({
displayName:'Hello World',
render:function(){
return React.DOM.div(Test, "Hello, ",this.props.value1);
}
});
$scope.name = 'World!';
app.directive('hello', function(){
return {
restrict:'E',
scope:{
name:'='
},
link:function(scope, el, attrs){
scope.$watch('name', function(newValue, oldValue){
var MyComponent = React.createFactory(HelloWorld);
ReactDOM.render(
MyComponent({value1:newValue}),
el[0]
);
})
}
}
})
edited Nov 13 '18 at 10:41
georgeawg
33k104968
answered Nov 13 '18 at 10:23
Neeraj KaushikNeeraj Kaushik
14
edited Nov 13 '18 at 10:41
georgeawg
33k104968
edited Nov 13 '18 at 10:41
georgeawg
33k104968
edited Nov 13 '18 at 10:41
georgeawg
33k104968
33k104968
answered Nov 13 '18 at 10:23
Neeraj KaushikNeeraj Kaushik
14
answered Nov 13 '18 at 10:23
Neeraj KaushikNeeraj Kaushik
14
answered Nov 13 '18 at 10:23
Neeraj KaushikNeeraj Kaushik
14
14
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53278213%2freact-components-inside-angular-1-4-application%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
