Am very new to react js and aurelia js, my requirement is use react for view and aurelia for model/routing and all. I refered this doc for installation, it works well. Done like this,here my view is in react js, while clicking the details in the table(doted icons),needs to call a function which should be in aurelia.
I followed the above mentioned doc for coding, instead of list in the my-react-element.jsx i changed into table style like in the pic.
Yeah, i got it. just understand passing value to components (custome-component in aurelia, component in react). In both, aurelia and react it works nearly same(like call-back function).
Code :
react-example.js Just declare a function, which you want to execute.
myfun(){
alert('Hi, am in aurelia..');
}
react-example.html use bind to set the declared function to custome-component.
<react-element myfun.bind = "myfun"></react-element>
react-example.js
#bindable('myfun')
<MyReactElement data={this.data} myfun={this.myfun}/>,
my-react-element.jsx
<p onClick = {this.try.bind(this)} >click </p>
try() {
this.props.myfun(); }
Note : Basic knowledge of react and aurelia required and compare the doc to fix.
Related
Is it possible to render AngularJS component inside React component which is rendered from an AngularJS component.
I have a specific scenario where:
<angularjs-component-1>
<react-component>
<angularjs-component-2>
</angularjs-component-2>
</react-component>
</angularjs-component-1>
Inside of AngularJS app I have access to a library of react components which are in separate repo where they are exported and assigned to a window object so that they can be consumed inside of AngularJS app.
Inside of the angularjs-component-1 I have an access to a ref of react-component where I have to inject my angularjs-component-2.
I can append text to react-component from angularjs-component-1, but not sure how to inject another angularjs component/directive inside of it.
I don't have much experience with AngularJS and I am not sure if I am able to access angularjs-component-2 from angularjs-component-1 in order to pass it to the react component.
I don't think I can use angular2react since my react components are in separate repo, exported and assigned to window object so that they can be consumed in angularjs.
UPDATE: Solution found
<angularjs-component-1> has method which is passed to <react-component> that method is called from react and it passes ref to a div in which <angularjs-component-2> will be placed. Logic inside of that method is something like this:
function sendRef(ref) {
var $angularComponent2 = angular.element('<angularjs-
component-2 ng-model="propName"></angularjs-component-2>');
var reactComponent = angular.element(ref.current);
reactComponent.append($angularComponent2);
reactComponent.injector().invoke(function($compile) {
var scope = angular.element($angularComponent2).scope();
// if you need to assign some values to angular-component-2 scope
// this is the place to do it
scope.propName = $scope.someValue;
$compile($angularComponent2)(scope);
});
}
Hope this helps someone.
I tried to understand how to use toast, but I couldn't and that's why I'm looking for help here.
Is there a reason why to use react-bootstrap over regular bootstrap? I start to think that I cannot use all functionalities from regular bootstrap in react
You can use all the plain bootstrap utilities in React, but it is not reccomended.
This is because to enable interactive functionality, Bootstrap uses JQuery and other DOM-altering Javascript, which doesn't always play that well with React, which likes to "own" the DOM and any alterations.
If you check out the Usage section of the Bootstrap Toasts docs (here), you can see that it toasts need to be initialised with Jquery/JS:
Initialize toasts via JavaScript:
$('.toast').toast(option)
This can be messy to place within React, there are ways of calling it inside a useEffect() block but I've had trouble with similar things in the past.
This is why react-bootstrap is great, it can give you pre-made components with all this functionality baked in, which you can just drop into your codebase.
See the react-bootstrap docs for toasts here, fullly funcitonal toasts can be added with just:
<Toast>
<Toast.Header>
<strong className="mr-auto">Bootstrap</strong>
</Toast.Header>
<Toast.Body>Hello, world! This is a toast message.</Toast.Body>
</Toast>
It depends on which version of Bootstrap you're using. Bootstrap 5 no longer uses jQuery so Bootstrap components like the Toast can be used without the need for a 3rd party library like react-bootstrap or reactstrap.
First import the desired components...
import { Toast } from 'bootstrap';
Then, instantiate and use as needed...
const { Toast } = bootstrap;
var toastEl = document.getElementById('myToast');
const bsToast = new Toast(toastEl);
bsToast.show();
Bootstrap 5 Toast with React
Hi I am quite new to reactjs but I started to understand few things. But this one giving me a headache, I have a small reactjs component that will be added in an existing site. The problem is inside my component I wanted to use a function in a JS file that is declared masterpage of the site. The name of the function I want to access is "SPClientPeoplePicker_InitStandaloneControlWrapper", so whenever I build my component I get the following error :
'SPClientPeoplePicker_InitStandaloneControlWrapper' is not defined no-undef
I tried using windom.SPClientPeoplePicker_InitStandaloneControlWrapper but the problem is in window "SPClientPeoplePicker_InitStandaloneControlWrapper" is giving me a different function. It would be nice if that library can be scoped inside my component
I tried calling library using import but it didnt work
import clientforms from "https://standardsSite.com/_layouts/15/clienttemplates.js";
I solve the problem I use loadjs its very handy.
loadjs(
[
"https://mysharepointsite.com/_layouts/15/clienttemplates.js",
"https://mysharepointsite.com/_layouts/15/clientforms.js",
"https://mysharepointsite.com/_layouts/15/clientpeoplepicker.js",
"https://mysharepointsite.com/_layouts/15/autofill.js"
],
"SPLibrary"
);
let self = this;
loadjs.ready("SPLibrary", function() {
self.handleSubmit(self.props.name);
});
I see this a lot...
this.function = this.function.bind(this)
Is there a good video that explains what's happening here?
Thanks!
I'm assuming you are already using babel to compile your code, why not use the class properties feature and then you define your class method as an arrow function and don't have to bind it in the constructor. https://medium.com/#joshblack/writing-a-react-component-in-es2015-a0b27e1ed50a#.igcom8sgv gives step by step how to set it up then you write your class methods like such : myFunction = () => { // do stuff } and the arrow function binds this appropriately.
WebStorm is most powerfull IDE for React: understand JSX Harmony, Components, props, state, etc. Has code auto formatting, understand npm scriptsm etc.
for free..
I always used Brackets, but when I started working with React I had to switch to a different editor due to the complete lack of support by Brackets.
I'm now using Atom with ton of plugins to work with React and be comfortable, these are the ones needed to work with React:
language-babel by gandm
linter-eslint by AtomLinter
react by orktes
the latter, especially, has an awesome support for React and JSX stuff.
So I've just started learning React and Redux, so I apologize if this is a very noobish question. But I've emptied my Google quote, and can't find anything that helps me.
My problem is: I work on a site with React, Redux, and Foundation 6. One of my React components have a link, that when clicked, should open a Modal with a specific warning for that link. So I've created a component with my modal markup:
ComponentModal.js:
import React, { PropTypes } from 'react';
const Modal = () => (
<div className="reveal" id="exampleModal1" data-reveal>
<h1>Awesome. I Have It.</h1>
</div>
);
export default Modal;
The component with a link renders some stuff, but basically have a
<a data-open="exampleModal1">Click me for a modal</a>
tag in it's render.
And although inspecting the page confirms that the markup for the modal exists, nothing happens when i click the link.
If I move the popup from the component, and into the DOM, the link works.
Some trial and error shows me, that if i manually run $(document).foundation(); in the console when ComponentModal is rendered, the popup works as intended.
So my question is kinda two questions:
1. How do I, in Redux, run $(document).foundation(); when my ComponentModal is done rendering? Maybe I'm wrong, but I don't have the componentDidMount() method available to me, where it might make sense to make that call?
2. Is this a totally wrong way to go about it?
Hope it's not too confusing and not too dumb a question :)
FYI, this question/solution has nothing to do with REDUX!
The problem is that you're trying to use React AND Jquery to make your page do cool things.
You should really choose one or the other.
$(document).foundation() is a Jquery library.
Instead you should use something like React Foundation which removes the jquery dependency and gives you foundation components built with react.
You can do $(document).foundation() in React inside componentDidMount of the component that has the reval modal or better yet You can do this inside componentDidMount of the top most partent in your app.
componentDidMount in React runs once after all the DOM nodes related to that component is mounted. What $(document).foundation() does, if it runs inside componentDidMount, is that it binds event handlers on the elements that have foundation realated attributes like data-dropdown or data-reveal.
componentDidMount() {
$(document).foundation();
}