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.
Related
I am working to give my Angular 1.5 apps an upgrade with ES6 classes and I've been following Todd Motto's styleguide pretty closely so far. I have been naming component files like so:
|-components/featurename
|---featurename.index.js
|---featurename.component.js
|---featurename.controller.js
|---featurename.service.js
|---featurename.style.css
I have been naming classes like so:
const SomeComponent = {};
export default SomeComponent;
And then importing with the same name:
import SomeComponent from './featurename.component';
I'm wondering if dropping the featurename from all of this is going to cause problems with testing and debugging. It would certainly make creating feature boiler plates easier without a generator. I am proposing something like this:
|-components/featurename
|---index.js
|---component.js
etc..
const Component = {};
export default Component;
import Component from './component';
I believe you are free to orginize the sources in your project in a way you like to see them. The "featurename" prefix is useful for file-searching. I think this is the main point here. Let's imagine, we have 10 features, it means that we have 10 index.js files. Searching for "index" as a filename + "js" as an extension would give us 10+ results... in that case will have to search for feature specific folder. It may depends on the environment you are using for the development, there may be such a setup where it's not an issue.
When renaming a React component, how do you ensure the new name is used everywhere?
E.g. OldComponent -> NewComponent
The IDE I'm currently using (IntelliJ IDEA) only part does the job. For example, it will leave the variables with the old name in import statements:
import OldComponent from 'components/NewComponent.jsx'
...
<OldComponent />
Do people generally avoid refactoring in JS, or are there solutions/tools that can do this? (Or do people just kinda get used to manually refactoring? :D)
I think that Shift + F6 should do the job. It does the renaming for all matching cases. You could also find this in context menu -> Refactor -> Rename...
For me personally, the solution was to use TypeScript.
IntelliJ will automatically update the imports for you (if you use TypeScript).
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
I have gone down a path of using Angular2 but writing ES5 code, which means that the examples and guidance I find usually must be translated from answers relevant to TypeScript.
Can someone help me with an ES5 version of:
Bootstrapping the application. In TypeScript I see it done as:
import {WORKER_APP_PLATFORM, WORKER_APP_APPLICATION} from "angular2/platform/worker_app";
import {platform} from "angular2/core";
platform([WORKER_APP_PLATFORM]).application([WORKER_APP_APPLICATION]).bootstrap(myApp)
Accessing the web_workers component:
import {Component} from 'angular2/web_worker/worker';
#Component({ ... ])
I assumed the latter would be achieved by calling
ng.web_worker.worker.Component({ ... })
But that seems to not be the case: ng.web_worker is undefined.
The problem might be that I seem to not be able to include web_worker/ui.js properly. When I include it instead of bundles/angular2-all.umd.js I only get error messages about require being undefined. When I explicitly include RequireJS in my project I get a bunch of other errors.
Any help will be greatly appreciated!
Can I ask, why do you want to do it with ES5? You can easily use SystemJS and ES6 if you don't like Typescript. Typescript would be almost identical to ES6.
In case you still want to do it with ES5, you need to change the imports to require calls:
var WORKER_APP_PLATFORM = require("angular2/platform/worker_app").WORKER_APP_PLATFORM;
var WORKER_APP_APPLICATION = require("angular2/platform/worker_app").WORKER_APP_APPLICATION;
var platform = require("angular2/core").platform;
platform([WORKER_APP_PLATFORM]).application([WORKER_APP_APPLICATION]).bootstrap(myApp)
Another example:
var Component = require('angular2/web_worker/worker').Component;
You get the idea. You also don't need RequireJS... You can use SystemJS. You should import the main file like this:
System.import("main")
SystemJS will resolve all the require calls async, but in the code, the require calls look sync.
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