I have been trying to refactor Some existing React-Reflux code to ES-6 syntax,
I have 3 Stores for people, Projects and events. They Do basically the same thing but call different apis to fetch results.
so I tried to do the following :
class ResultStore extends Reflux.Store {
constructor(resultsAPI){
super();
//initializations
}
}
class PeopleResultStore extends ResultStore {
constructor(){
super('peopleBySkill');
}
}
But this started throwing error "Super expression must either be null or a function, not undefined" at random places (mostly at Export statements of totally unrelated stores) in the code base. I'm using version 0.14.3 of React and 0.3.0 of Reflux
Reflux.Store and Reflux.Component for ES6 usage are just now newly implemented features that can be used in Reflux. The page you previously mention was just someone mentioning they want a feature like that. It had not been implemented at the time, and the things discussed on that page are not necessarily reflective of exactly how it was implemented.
The documentation of how they are currently implemented is here: https://github.com/reflux/refluxjs#react-es6-usage
Related
I've a simple web component following the latest web components v1 class syntax, it works great in Chrome and Firefox/Edge (with a polyfill) but I'd like it to run in IE11 so I need to transpile the class. However running it through babel produces code that no longer works in any browser.
Is there any way to generate backwardly compatible web components with the class syntax or is there a preferred way to write web components for maximum compatibility?
Example code -
class TestElement extends HTMLElement {
connectedCallback(){
this.innerHTML = "<div>Testing</div>"
}
}
customElements.define('test-element', TestElement)
Error message when using transpiled code is -
Uncaught TypeError: Failed to construct 'HTMLElement': Please use the 'new' operator, this DOM object constructor cannot be called as a function.
To compile Custom Element classes with Babel, you can use this plugin from Github.
It will use Reflect.construct() instead of new, which is not permitted with HTMLElement objects.
One solution is to use the native-shim available with this polyfill
https://github.com/webcomponents/custom-elements
It's not perfect though, would like to find a cleaner solution.
I'm very new to this, so please bear with me everyone. I have studied React where a component is created like,
var app = React.createClass({ ... });
Just like here.
However, after installing react in my mac, I see that the syntax is a bit different from what I'm used to. i.e.,
class Application extends React.Component { ... }
Just like here.
Now, I did understand the code due my prior knowledge in Java. But I just wanted to know the difference. This is proving to be a problem for me because when I wrote the syntax like React.createClass(), it didn't work.
If you look at the second link in codepen you'll see that Babel is written beside JS. So, does react use Babel by default?
I think you get the picture. Thanks!
Your first example uses the React.createClass() helper function, while the second one uses the ES6 class syntax to define a React component.
Both are valid approaches to defining components. Note however, that you will need to transpile your ES6 code to ES5 before shipping it to make it cross-browser-compatible.
More info on ES6-style component definitions.
I am exporting a object as below:
//apiEndpoints.ts
import {CONSTANTS} from './constants';
let remote = CONSTANTS.API_ENDPOINT;
export const ENDPOINT = {
signup: remote + 'auth/signup',
checkusername: remote + 'auth/checkUsername/${username}'
};
Upon importing this module, ENDPOINT is not imported.
see attached error
You are using a transpiler. In the actual output code, there is no variable called ENDPOINT because the transpiler has renamed it. You are getting an error when you type that in the debugger console because it doesn't exist with that name. You can see in the scope inspector in the sidebar, the name you'd actually have to type is
apiEndpoints_1.ENDPOINT
where the name of the object is based off of the filename of the module being imported, and the property is the exported key. The renaming is done in this case to make sure that the code behaves properly to take ES6 live import bindings into account.
This is an Ionic v2 project. Ionic v2 uses the typescript transpiler.
The majority of the features that the transpiler works on are ECMAScript 2015 related.
The error I am referring to is about the module implementation in ECMAScript 2015. To learn more see
http://exploringjs.com/es6/ch_modules.html
Hence, in an ideal world, I should be able to export constants, variables, functions and classes. However for some reason when I attempt to export variables and objects .. it fails.
It does not fail on classes.
#loganfsmyth is right. It is importing the module, but renaming it and hence rendering it unusable.
I had to rethink the implementation and am using a different approach for now until I figure out a solution to this issue.
Thanks all who tried.
So, let's say that I am building a single-page app in JavaScript. For now I do not have a persistence layer in my app but I still need to write the code.
class App {
handleClick(event) {
User.saveToFile(event.target.value);
}
render() {
return 'Some template...';
}
}
So, I create my concrete user class. But for now just save it to the local storage.
class User {
constructor(localStorageHelper) {
this.localStorageHelper = localStorageHelper;
}
save(name) {
this.localStorageHelper.users.save({
name
});
}
}
When the database is ready, I need to switch to the database. If I was in an object-oriented language I can simply create an interface and use polymorphism or repository pattern to solve this problem.
I was wondering what if I create an app container to contain all of the concrete implementations. For example I can create a bindings.js file like the following:
import UserPersister from './Repos/Db/User'
import PostPersister from './Repos/File/Post'
const Bindings = {
'UserPersister': UserPersister,
'PostPersister': PostPersister
};
So now in my App.js file. I can do something like:
let User = Container.make('UserPersister');
class App {
handleClick(event) {
User.saveToFile(event.target.value);
}
render() {
return 'Some template...';
}
}
Now I can easily switch between different implementations by just changing them in bindings.js. If you've worked a little bit with Laravel this should seem familiar (except for the service providers of course).
This sounds OK to me but I am not sure if it is ACTUALLY OK to do this sort of thing in JavaScript. What advice would you give based on your experience with JavaScript?
If you want to reproduce laravel's pattern - that can be hard - but I can suggest you two technologies that can helps you with it. When you combained them you can easily implement quite similar code conception.
1 TypeScript
In fact you're using it in above code. It's a kind of JavaScript wrapper in which you can write a code similar to Java solutions. You have access here to polymorphism, inheritance and encapsulation like in typical PHP OOP. This can speed up your work a bit and it's pure and it's uses ECMAScript 2015.
2 AngularJS
The large JS Framework which is very strong and have big community. This one privides you for example injection service (like Laravel's IoC) which will automaticcly resolve all your dependencies. You can create easily repositories using $resources which is ajax wrapper for REST API requests. There are service providers that works greate on application load. And the best is that - yo can build one-page-application with Angular. It have many other advanteges. There is stable version 1 and unstable verison 2 which is developed in TypeScript.
With these two tools you can build awesome stuff for the frontend (client side). If you want more tools here it is:
PuppetJS - server side generating client side JS scripts (one implementation fort both sides!).
React - great library based on components
I'm unfamiliar with es6 and would like to use react-wavesurfer in my project. the documentation is here: https://github.com/mspae/react-wavesurfer but the example use is in es6 and I'm not sure how I would do it in more vanilla js. IE var WaveSurfer = React.createClass etc... any help on how I would embed this in my rails project would be greatly appreciated!!
I've put together an example of how to do this: http://codepen.io/mspae/pen/XdaRZL
(Click on the Settings button on the top right and then on JavaScript to see which javascript files I included. The order is important if you're not using a module loader)
Note that in most React examples these days – apart from the basic es6 transformation (which brings lots of basic language features) – there is also the JSX transformation (Which translates html style tags into calls to React.createElement(...). With the go-to transpiler at the moment – babel – supporting both this is almost always done together, but the two things work independently.
For the difference between the es6 class MyComponent extends React.Component syntax and the es5 (read: non-transpiled javascript) React.createClass({... API this article is quite informative: https://toddmotto.com/react-create-class-versus-component/
And for information how to use React without JSX I recommend this article: https://www.packtpub.com/books/content/using-reactjs-without-jsx