&gt; Is this actually part of the specification?

No. How module identifiers (`&#39;./reducers&#39;` in your case) are resolved to the actual modules is left to the implementation of the module loader/bundler, it&#39;s not specificed by ES6. And it doesn&#39;t seem to be specified in [CommonJs](http://wiki.commonjs.org/wiki/Modules) either.

This is just how node does it - when requiring a directory, it&#39;s `index.js` file will be used. Bundlers like [browserify](https://github.com/substack/node-browserify#packagejson) or [webpack](https://webpack.github.io/docs/resolving.html#resolving-an-absolute-path) followed this convention (for compat reasons).

I can&#39;t seem to find this question yet, but what is the simplest, most-idiomatic way of opening/creating a file, writing to it, and then closing it? Looking at the [kotlin.io](https://kotlinlang.org/api/latest/jvm/stdlib/kotlin.io/index.html) reference and the Java documentation I managed to get this:

    fun write() {
        val writer = PrintWriter(&quot;file.txt&quot;)  // java.io.PrintWriter

        for ((member, originalInput) in history) {  // history: Map&lt;Member, String&gt;
            writer.append(&quot;$member, $originalInput\n&quot;)
        }

        writer.close()
    }

This works, but I was wondering if there was a &quot;proper&quot; Kotlin way of doing this?

How do I write to a file in Kotlin?

Using angular 2 beta, I cannot seem to get an `&lt;input type=&quot;file&quot;&gt;` to work.

Using diagnostic, I can see two-way binding for other `type`s such as `text`.

    &lt;form&gt;
        {{diagnostic}}
        &lt;div class=&quot;form-group&quot;&gt;
            &lt;label for=&quot;fileupload&quot;&gt;Upload&lt;/label&gt;
            &lt;input type=&quot;file&quot; class=&quot;form-control&quot; [(ngModel)]=&quot;model.fileupload&quot;&gt;
        &lt;/div&gt;
    &lt;/form&gt;

In my TypeScript file, I have the following diagnostic line:

    get diagnostic() { return JSON.stringify(this.model); }

Could it be that it is the issue of not being JSON? The value is `null`.

I cannot really verify the value of the `input`. Уven though the text next to &quot;Choose file ...&quot; updates, I cannot see differences in the DOM for some reason.

File upload from &lt;input type=&quot;file&quot;&gt;

I&#39;ve noticed a few cases where I&#39;ve seen something like the following:


    // /reducers/reducer1.js
    export default function reducer1(state = {}, action){
      // etc...
    }
      
    // /reducers/reducer2.js
    export default function reducer2(state = {}, action){
      // etc...
    }

    // /reducers/index.js
    import { combineReducers } from &#39;redux&#39;;
    import reducer1 from &#39;./reducer1&#39;;
    import reducer2 from &#39;./reducer2&#39;;

    export default combineReducers({
      reducer1,
      reducer2
    })
      
    // /store.js
    import masterReducer from &#39;./reducers&#39;;

    export default function makeStore(){
      // etc...
    }

Notice the last &quot;file&quot; where we call `import masterReducer from &#39;./reducers&#39;` - A few people seem to believe this should import the `default export` from the index.js file.

Is this actually part of the specification? - my interpretation/question is that this is the result of many folks using WebPack v1 which translates `import` statements into CommonJS-style `requires` statements? Or will this break in WebPack v2 with &quot;official&quot; `import`/`export` support?

javascript import from &#39;/folder&#39; with index.js

I've noticed a few cases where I've seen something like the following:
<pre><code class="hljs language-javascript">// /reducers/reducer1.js
export default function reducer1(state = {}, action){
 // etc...
}
 
// /reducers/reducer2.js
export default function reducer2(state = {}, action){
 // etc...
}

// /reducers/index.js
import { combineReducers } from 'redux';
import reducer1 from './reducer1';
import reducer2 from './reducer2';

export default combineReducers({
 reducer1,
 reducer2
})
 
// /store.js
import masterReducer from './reducers';

export default function makeStore(){
 // etc...
}
</code></pre>
Notice the last "file" where we call <code>import masterReducer from './reducers'</code> - A few people seem to believe this should import the <code>default export</code> from the index.js file.
Is this actually part of the specification? - my interpretation/question is that this is the result of many folks using WebPack v1 which translates <code>import</code> statements into CommonJS-style <code>requires</code> statements? Or will this break in WebPack v2 with "official" <code>import</code>/<code>export</code> support?

I am a javascript/redux/react beginner building an small application with redux, react-redux, &amp; react. For some reason when using mapDispatchToProps function in tandem with connect (react-redux binding) I receive a TypeError indicating that dispatch is not a function when I try to execute the resulting prop. When I call dispatch as a prop however (see the setAddr function in the provided code) it works. 

   I&#39;m curious as to why this is, in the example TODO app in the redux docs the mapDispatchToProps method is setup the same way. When I console.log(dispatch) inside the function it says dispatch is type object. I could continue to use dispatch this way but I would feel better knowing why this is happening before I continue any further with redux. I am using webpack with babel-loaders to compile.

My Code:


    import React, { PropTypes, Component } from &#39;react&#39;;
    import { connect } from &#39;react-redux&#39;;
    import { setAddresses } from &#39;../actions.js&#39;;
    import GeoCode from &#39;./geoCode.js&#39;;
    import FlatButton from &#39;material-ui/lib/flat-button&#39;;

    const Start = React.createClass({
	    propTypes: {
		    onSubmit: PropTypes.func.isRequired
	    },

	    setAddr: function(){
		    this.props.dispatch(
			    setAddresses({
				    pickup: this.refs.pickup.state.address,
				    dropoff: this.refs.dropoff.state.address
			    })
		    )   

	    },

	    render: function() {
		    return (
		   	    &lt;div&gt;
				    &lt;div className=&quot;row&quot;&gt;
					    &lt;div className=&quot;col-xs-6&quot;&gt;
						    &lt;GeoCode ref=&#39;pickup&#39; /&gt;
					    &lt;/div&gt;
					    &lt;div className=&quot;col-xs-6&quot;&gt;
						    &lt;GeoCode ref=&#39;dropoff&#39; /&gt;
					    &lt;/div&gt;
				    &lt;/div&gt;
				    &lt;div className=&quot;row&quot;&gt;
					    &lt;div className=&quot;col-xs-6&quot;&gt;
						    &lt;FlatButton 
							    label=&#39;Does Not Work&#39;
							    onClick={this.props.onSubmit({
                                    pickup: this.refs.pickup.state.address,
				                    dropoff: this.refs.dropoff.state.address
                                })} 
							    /&gt;
					    &lt;/div&gt;
					    &lt;div className=&quot;col-xs-6&quot;&gt;
						    &lt;FlatButton 
							    label=&#39;Works&#39;
							    onClick={this.setAddr} 
							    /&gt;
					    &lt;/div&gt;
				    &lt;/div&gt;
			    &lt;/div&gt;
		    );
	    }
    })

    const mapDispatchToProps = (dispatch) =&gt; {
	    return {
		    onSubmit: (data) =&gt; {
			    dispatch(setAddresses(data))
		    }
	    }
    }

    const StartContainer = connect(mapDispatchToProps)(Start)

    export default StartContainer
    
Cheers.

&#39;dispatch&#39; is not a function when argument to mapToDispatchToProps() in Redux

I need to find the latest entry in a table. What is the best way to do this? The table has Sequelize&#39;s default `createdAt` field.

Sequelize findOne latest entry

I&#39;m trying to pass both date strings to `new Date(t)`.

I expect both strings represent the same time, after all, if I omit the time, shouldn&#39;t it be midnight of that day?

But while,

    new Date(&quot;2016-02-16 00:00&quot;)

returns 2016-02-16, midnight, local time as expected,

    new Date(&quot;2016-02-16&quot;)

returns 2016-02-16, midnight UTC, which is wrong, or at least not what I expected given what the other string parses as.

I would understand it if they would both have the same behavior, whether it is to return the time as local time, or as UTC, but it seems very inconsistent why they return different things like this.

As a workaround, whenever I encounter a date that has no corresponding timestamp I can append &quot; 00:00&quot; to get consistent behavior, but it seems like this is rather fragile.

I am getting this value from an INPUT element, of type &#39;datetime-local&#39; so it seems especially inconsistent that I have to work around a value returned by a page element.

Am I doing something wrong, or should I be doing something differently?

Why isn&#39;t &quot;2016-02-16&quot; equal to &quot;2016-02-16 00:00&quot;?

I&#39;m new to React/Redux. I use a fetch api middleware in Redux app to process the APIs. It&#39;s ([redux-api-middleware][1]). I think it&#39;s the good way to process async api actions. But I find some cases which can&#39;t be resolve by myself.

As the homepage ([Lifecycle][2]) say, a fetch API lifecycle begins with dispatching a CALL_API action ends with dispatching a FSA action.

So my first case is showing/hiding a preloader when fetching APIs. The middleware will dispatch a FSA action at the beginning and dispatch a FSA action at the end. Both the actions are received by reducers which should be only doing some normal data processing. No UI operations, no more operations. Maybe I should save the processing status in state then render them when store updating.

But how to do this? A react component flow over the whole page? what happen with store updating from other actions? I mean they are more like events than state!

Even a worse case, what should I do when I have to use the native confirm dialog or alert dialog in redux/react apps? Where should they be put, actions or reducers?

Best wishes! Wish for replying.


  [1]: https://github.com/agraboso/redux-api-middleware
  [2]: https://github.com/agraboso/redux-api-middleware#lifecycle

How to show a loading indicator in React Redux app while fetching the data?

Is it possible to detect whether the current version of React is development or production at runtime? I&#39;d like to do something like this:

    if (React.isDevelopment) {
      // Development thing
    } else {
      // Real thing
    }

Detecting production vs. development React at runtime

Since ES6 classes are just a *syntactical sugar over JavaScript&#39;s existing prototype-based inheritance* [\[1\]][1] it would (IMO) make sense to hoist it&#39;s definition:

    var foo = new Foo(1, 2); //this works

    function Foo(x, y) {
       this.x = x;
       this.y = y;
    }

But the following won&#39;t work:

    var foo = new Foo(1, 2); //ReferenceError

    class Foo {
       constructor(x, y) {
          this.x = x;
          this.y = y;
       }
    }

Why are ES6 classes not hoisted?


  [1]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes

Why are ES6 classes not hoisted?

I want to transform this code:

    var formatQuoteAmount = function (tx) {
        return Currency.toSmallestSubunit(tx.usd, &#39;USD&#39;);
    };
    var quoteAmounts = res.transactions.map(formatQuoteAmount);


into an anonymous arrow function. I&#39;ve written this:
    
    var quoteAmounts = res.transactions.map(tx =&gt; Currency.toSmallestSubunit(tx.usd, &#39;USD&#39;));

I get `expression expected` syntax error at the arrow. I looked up [the default syntax here][1] and seems like the syntax of my code is correct. Any ideas what the problem might be?

I have it working with this syntax:
    
        var quoteAmounts = res.transactions.map(function (tx) {
            return Currency.toSmallestSubunit(tx.usd, &#39;USD&#39;)
        });

but I want to make it a one-liner, with an arrow-function.

Running on `node v5.3.0`

  [1]: https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Functions/Arrow_functions#Shorter_functions

Arrow function &quot;expression expected&quot; syntax error

I&#39;ve tried searching the internet for the execution order of imported modules. For instance, let&#39;s say I have the following code:

    import &quot;one&quot;
    import &quot;two&quot;
    console.log(&quot;three&quot;);

Where `one.js` and `two.js` are defined as follows:

    // one.js
    console.log(&quot;one&quot;);
    
    // two.js
    console.log(&quot;two&quot;);

Is the console output guaranteed to be:

    one
    two
    three

Or is it undefined?

What is the defined execution order of ES6 imports?

As far as I understand, in ES7/ES2016 putting multiple `await`&#39;s in code will work similar to chaining `.then()` with promises, meaning that they will execute one after the other rather than in parallel. So, for example, we have this code:

    await someCall();
    await anotherCall();

Do I understand it correctly that `anotherCall()` will be called only when `someCall()` is completed? What is the most elegant way of calling them in parallel?

I want to use it in Node, so maybe there&#39;s a solution with async library?

EDIT: I&#39;m not satisfied with the solution provided in this question: https://stackoverflow.com/questions/24193595/slowdown-due-to-non-parallel-awaiting-of-promises-in-async-generators, because it uses generators and I&#39;m asking about a more general use case.

Call async/await functions in parallel

As of ES6, JavaScript has a proper Map object. I don&#39;t see a way to use a literal notation though, as you could with an Array or an Object. Am I missing it, or does it not exist?

Array: `var arr = [&quot;Foo&quot;, &quot;Bar&quot;];`

Object: `var obj = { foo: &quot;Foo&quot;, bar: &quot;Bar&quot; };`

Map: ???

Does JavaScript have a Map literal notation?

`Error: Missing class properties transform`

`Test.js`:

    export class Test extends Component {
      constructor (props) {
        super(props)
      }
    
      static contextTypes = {
        router: React.PropTypes.object.isRequired
      }


`.babelrc`:

    {
      &quot;presets&quot;: [&quot;es2015&quot;, &quot;react&quot;, &quot;stage-0&quot;],
      &quot;plugins&quot;: [&quot;transform-class-properties&quot;]
    }

`package.json`:

    &quot;babel-core&quot;: &quot;^6.5.1&quot;,
    &quot;babel-eslint&quot;: &quot;^4.1.8&quot;,
    &quot;babel-loader&quot;: &quot;^6.2.2&quot;,
    &quot;babel-plugin-react-transform&quot;: &quot;^2.0.0&quot;,
    &quot;babel-plugin-transform-class-properties&quot;: &quot;^6.5.2&quot;,
    &quot;babel-preset-es2015&quot;: &quot;^6.5.0&quot;,
    &quot;babel-preset-react&quot;: &quot;^6.5.0&quot;,
    &quot;babel-preset-stage-0&quot;: &quot;^6.5.0&quot;,
    &quot;babel-register&quot;: &quot;^6.5.2&quot;,

I have scoured the web and all fixes revolve around: Upgrading to babel6, switching the order of &quot;stage-0&quot; to be after &quot;es2015&quot;. All of which I have done.

Error: Missing class properties transform

I have a basic HTML page with a button:

    &lt;!DOCTYPE html&gt;
    &lt;html lang=&quot;en&quot;&gt;
    &lt;head&gt;
      ...
    &lt;/head&gt;
    &lt;body&gt;
        &lt;button id=&quot;button&quot; onclick=&quot;uclicked()&quot;&gt;Click me&lt;/button&gt;
        &lt;script src=&quot;./bundle.js&quot;&gt;&lt;/script&gt;
    &lt;/body&gt;
    &lt;/html&gt;

and an `app.js`:

    //(function(){
        console.log(&#39;started up&#39;)
        function uclicked(){
            console.log(&#39;You clicked&#39;);
        }
    //})();

webpack is installed and `webpack --watch` succeeds. The webpack.config.js is:

    module.exports={
        entry: &#39;./app.js&#39;,
        output: {
            path: __dirname,
            filename: &#39;bundle.js&#39;
        }
    }

When I load the page `console.log` is working but when I push the button I get `Uncaught ReferenceError: uclicked is not defined`.

If I replace `&lt;script src=&quot;./bundle.js&quot;&gt;&lt;/script&gt;` with `&lt;script src=&quot;./app.js&quot;&gt;&lt;/script&gt;` and bypass webpack the button clicks fine. Why doesn&#39;t this basic webpack setup work?

Basic webpack not working for button click function - Uncaught Reference error: undefined

I am Learning React.js and i am using windows 8 OS.i have navigate to my root folder

    1.Created the package.json file by npm init
    2. install webpack by npm install -S webpack.now webpack has been downloaded to my modules folder
    3. install webpack globally by typing npm install webpack -g
    4. i am also having a webpack.config.js in my root folder which contains the source and ouput directory
    5. when i type the webpack command i am getting the below error.
**webpack is not recognized as a internal or external command,operable program or batch file**

webpack is not recognized as a internal or external command,operable program or batch file

Does anyone know how to create multiple output paths in a webpack.config.js file? I&#39;m using bootstrap-sass which comes with a few different font files, etc. For webpack to process these i&#39;ve included file-loader which is working correctly, however the files it outputs are being saved to the output path i specified for the rest of my files: 

&lt;!-- language: lang-js --&gt;

        output: {
          path: __dirname + &quot;/js&quot;,
          filename: &quot;scripts.min.js&quot;
        }

I&#39;d like to achieve something where I can maybe look at the extension types for whatever webpack is outputting and for things ending in .woff .eot, etc, have them diverted to a different output path. Is this possible? 

I did a little googling and came across this *issue on github where a couple of solutions are offered, **edit:** 

but it looks as if you need to know the entry point in able to specify an output using the hash method 
eg: 

&lt;!-- language: lang-js --&gt;

    var entryPointsPathPrefix = &#39;./src/javascripts/pages&#39;;
    var WebpackConfig = {
      entry : {
        a: entryPointsPathPrefix + &#39;/a.jsx&#39;,
        b: entryPointsPathPrefix + &#39;/b.jsx&#39;,
        c: entryPointsPathPrefix + &#39;/c.jsx&#39;,
        d: entryPointsPathPrefix + &#39;/d.jsx&#39;
      },
    
      // send to distribution
      output: {
        path: &#39;./dist/js&#39;,
        filename: &#39;[name].js&#39;
      }
    }


*https://github.com/webpack/webpack/issues/1189

however in my case, as far as the font files are concerned, the input process is kind of abstracted away and all i know is the output. in the case of my other files undergoing transformations, there&#39;s a known point where i&#39;m requiring them in to be then handled by my loaders. if there was a way of finding out where this step was happening, i could then use the hash method to customize output paths, but i don&#39;t know where these files are being required in. 

How to create multiple output paths in Webpack config

For this project, I&#39;m just learning and practicing Angular 2. I have no server-side and am making API requests to 
[barchart ondemand api][1] .

I&#39;m wondering if it is possible to bypass the cors issue. I&#39;m still fairly new to all this, so baby-step instructions are really appreciated! I&#39;m using `http://localhost:8080`.

Error message: (api key commented out) 

`XMLHttpRequest cannot load http://marketdata.websol.barchart.com/getHistory.json?key=MY_API_KEY&amp;symbol=GOOG&amp;type=daily&amp;startDate=20150311000000. Response to preflight request doesn&#39;t pass access control check: No &#39;Access-Control-Allow-Origin&#39; header is present on the requested resource. Origin &#39;http://localhost:8080&#39; is therefore not allowed access.`



StockInformationService:

    import {Injectable} from &#39;angular2/core&#39;;
    import {Http, Headers} from &#39;angular2/http&#39;;
    import {Observable} from &#39;rxjs/Rx&#39;;
    
    @Injectable()
    export class StockInformationService {
        private apiRoot = &quot;http://marketdata.websol.barchart.com/getHistory.json?key=MY_API_KEY&amp;&quot;;
    
        constructor (private _http: Http) {}
    
        getData(symbol: string): Observable&lt;any&gt; {
            // Tried adding headers with no luck
            const headers = new Headers();
            headers.append(&#39;Access-Control-Allow-Headers&#39;, &#39;Content-Type&#39;);
            headers.append(&#39;Access-Control-Allow-Methods&#39;, &#39;GET&#39;);
            headers.append(&#39;Access-Control-Allow-Origin&#39;, &#39;*&#39;);
    
            return this._http.get(this.apiRoot + &quot;symbol=&quot; + symbol + &quot;&amp;type=daily&amp;startDate=20150311000000&quot;, {headers: headers})
                .map(response =&gt; response.json());
        }
    }


App Component:

    import {Component} from &quot;angular2/core&quot;;
    import {VolumeComponent} from &#39;../../components/volume/volume&#39;;
    import {StockInformationService} from &#39;../../core/stock-information.service&#39;;
    
    @Component({
        selector: &#39;app-shell&#39;,
        template: require(&#39;./app-shell.html&#39;),
        directives: [VolumeComponent],
        providers: [StockInformationService]
    })
    export class AppShell {
        constructor(private _stockInformationService: StockInformationService) {}

        // In my template, on button click, make api request
        requestData(symbol: string) {
            this._stockInformationService.getData(symbol)
                .subscribe(
                    data =&gt; {
                        console.log(data)
                    },
                    error =&gt; console.log(&quot;Error: &quot; + error)
                )}
        }
    
    }


In my console, the requestData Error:
`Error: [object Object]`


  [1]: http://www.barchartondemand.com/api.php

Content Type	Original Author	Original Content on Stackoverflow
Question	Jordan	View Question on Stackoverflow
Solution 1 - Javascript	Bergi	View Answer on Stackoverflow

javascript import from '/folder' with index.js

Javascript Problem Overview

Javascript Solutions

Solution 1 - Javascript

File upload from <input type="file">

How do I write to a file in Kotlin?

Attributions