I'm new to react js and am learning it as part of OJT. Please excuse going forward if i end up using few terms incorrectly.
I'm trying to override few methods of our core module related to logging.
However, in react js overriding is only limited to React.Component classes it seems.
i looked up few posts associated with overriding the methods as per our requirement
is there a way to override normal classes in react js? does ES6 support such a scenario and if so, is it recommended to make it work like java.
Related
On a React app, a client needs to customize some pages for some specific needs.
Is it possible to inject some custom JS / React component and "override" the behavior of an other component?
I don't want to keep the custom component on the bundle all the time and do some control because other clients may customize other features as well ...
Basically, I'm trying to inject a custom JS with a custom component inside and use it.
Anyone had to do samething like this?
In my company we had kind of the same problem and it can get very messy. You can use window.eval() if you import an external js code to make it run in your project but I would not recommend it at all as it gave us a lot of headaches...
That would be for JS code which are instructions and not components.
If your client has their own components maybe you can suggest them to create a node library so you can import their comps.
I'm pretty new to React, and I would essentially have a service (one single instance) that I could somehow inject and use in multiple React components.
So far, the options I've come across by googling were:
Using React's context, but it's not recommended, because it is an undocumented API.
Passing the object along in the props, from component to component, but it feels a bit inelegant and tedious
Using an IoC container, such as inversifyJS, who looks great, only it relies on typescript, and I don't wish to write my React app in typescript.
Now, Inversify can apparently be used in vanilla JS, with inversify-vanillajs-helpers, but when I tried using it in React to resolve a component (my App component), it kept throwing an exception stating
"Missing required #injectable annotation in: ReactComponent"
So, I'm trying to figure out a way to get an instance of my service (the same instance shared across the few components that use it), either by making inversify work with React but without typescript, or a new approach I haven't explored yet.
Any ideas ?
There are a few things that you can do if you don't like TypeScript:
First, you are going to need the inversify.decorate method.
Second, this method is probably going to be too verbose for you. We created a helper called inversify-vanillajs-helpers for that reason.
And third, React doesn't play nicely with constructor injection so we created a helper to facilitate lazy property injection called inversify-inject-decorators.
Those three tools should lead yo to the desired result :)
Noob Question: Is the intention of the cSS API to make it possible to use the components as normal HTML without the need for any additional React code? Does the usage of only the CSS API therefore require the inclusion of the React JS package or can the Blueprint JS package alone work ?
As an author of Blueprint, I can confirm that it is in fact possible to use some of the Blueprint components via CSS only. Components that describe a CSS API in the documentation can be used without React, but usually with caveats (the biggest being that you must write the markup correctly). The CSS API is presented as an alternative to the JavaScript (React) API, and CSS modifiers are supported by the JS APIs through the className prop.
As Blueprint is a React-based UI toolkit, the best experience will be had by using React, primarily because you no longer have to write the markup correctly.
It is not possible to use the components as normal HTML, without ReactJS. Blueprint is a ReactJS UI toolkit for the web.
Their pre-made (React) components are customizable via a JavaScript API or a CSS API (or both).
The idea behind the CSS API, that some of the components have, is to provide additional options for style customization.
Let's use an example. See the Menu component. Its CSS API allows us to modify Menu's style. One example is that we can add icons to menu items, read in their docs:
Add icons to menu items the same way you would to buttons: simply add the appropriate pt-icon-<name> class*.
PS: I'd recommend you to head over the ReactJS docs, understand how ReactJS components work, get deeper knowledge about the core ReactJS concepts (or complete a fundamentals course) and only then - try to implement BlueprintJS.
If Cycle uses virtual dom and so does React, then why can I not use React Components inside a Cycle.js app?
Would it be possible to use wrap existing React Components into Cycle.js components ?
This question relates to : Higher order FRP with React - why is it not happening?
Because React's support for Web Components is lacking. See https://github.com/facebook/react/issues/7901 and http://staltz.com/react-could-love-web-components.html
It is technically possible to build React support in Cycle.js, but then you may also start asking whether other frameworks like Ember or Angular or Aurelia should start doing the same out of the box. Then, the question could be expanded even further by asking Aurelia components to be supported in Ember. So building support for "Foo" components in "Bar" framework is counter-productive. Web Components are the sane way to handle this.
Cycle.js is generic enough to be used along other frameworks/libraries. In fact there's redux-cycle-middleware which allows you to use React/Redux along with Cycle.js. With this middleware you wouldn't be using Cycle to handle DOM side-effects; instead you'd use React. Then when you need to handle other side-effects (HTTP, WebSockets, anything that isn't DOM...) you can use Cycle.js.
I am browsing the reactfire github and they use mixins.
I thought they were deprecated? Am I behind the times?
You might want to take a look to this brief answer: https://www.quora.com/Is-it-possible-to-use-Firebase-with-ES6-on-React
The problem with ReactFire is because it uses Mixins, it's not compatible with ES6 classes. After chatting with Jacob Turner, we wanted to create a way to allow the one way binding of ReactFire with ES6 classes along some more features like two way data binding and listening to Firebase endpoints without actually binding a state property to them. Thus, re-base was built.
So, here's a Relay inspired library for building React.js + Firebase applications: https://github.com/tylermcginnis/re-base
This was helpful to me, I hope it'll be the same with you.
Apart from re-base, also have a look at react-redux-firebase as mentioned in this reactfire discussion:
react-redux-firebase
Redux bindings for Firebase. Includes Higher Order Component for use with React.
http://react-redux-firebase.com
https://github.com/prescottprue/react-redux-firebase