Oh, well, I see.
I get it from `e.nativeEvent.offsetX`. Is it right approach?

I have found that evt.nativeEvent.offsetX was causing me problems with my component flashing a lot and being sort of weird, I haven&#39;t fully debugged it, but I switched to using

React.createRef or React.useRef on the parent container, and then using event.clientX - ref.current.getBoundingClientRect().left and found this works better for me

I&#39;ve some 
In asp vnext I can define 3 Types of runtime

* dnxCore
* dnx451
* dotnet

In Project.json it looks like this:

    &quot;frameworks&quot;: 
    {
        &quot;dotnet&quot;: { },
        &quot;dnx451&quot;: { },
        &quot;dnxcore50&quot;: { }
    }^

and the ui shors this

![enter image description here][1]

I assume the following:

**dnxCore** is the new .net Core Framework.

**dotnet** is the previous runtime

**dnx451:**
What is different when defining &quot;dotnet&quot; or &quot;dnx451&quot; in the project.json?  

Shouldn&#39;t both run with the .net execution runtime?

Also depending on which project template i choose ( vNext ClassLib or vNext Console Lib) default contains one or the other.


  [1]: http://i.stack.imgur.com/O5qhk.png

Project.json definition dnx451 vs .dotnet ( 4.51)

I know of these two questions about `__init__.py` and `__main__.py`:

https://stackoverflow.com/questions/448271

https://stackoverflow.com/questions/4042905

But I don&#39;t really understand the difference between them. Or I could say I don&#39;t understand how they interact together.

What is the difference between __init__.py and __main__.py?

I try get position of click relative to element, but event doesn&#39;t have offsetX.

    onClick(e) {
      console.log(e.offsetX) // returns undefined
      console.log(e.target.offsetX) // returns undefined
    }

    render() {
      return &lt;img src=&#39;http://placehold.it/1000x500&#39; onClick={this.onClick} /&gt;
    }

How I can get position of click in element?

React&#39;s mouseEvent doesn&#39;t have offsetX/offsetY

I try get position of click relative to element, but event doesn't have offsetX.
<pre><code class="hljs language-javascript">onClick(e) {
 console.log(e.offsetX) // returns undefined
 console.log(e.target.offsetX) // returns undefined
}

render() {
 return &#x3C;img src='http://placehold.it/1000x500' onClick={this.onClick} />
}
</code></pre>
How I can get position of click in element?

I am hearing the term &quot;mount&quot; too many times while learning ReactJS. And there seem to be lifecycle methods and errors regarding this term. What exactly does React mean by mounting?

Examples: `componentDidMount() and componentWillMount()`

What is &quot;Mounting&quot; in React js?

I am rendering a list of posts. For each post I would like to render an anchor tag with the post id as part of the href string.


    render: function(){
		return (
			&lt;ul&gt;
				{
					this.props.posts.map(function(post){
						return &lt;li key={post.id}&gt;&lt;a href=&#39;/posts/&#39;{post.id}&gt;{post.title}&lt;/a&gt;&lt;/li&gt;
					})
				}
			&lt;/ul&gt;
		);

How do I do it so that each post has href&#39;s of `/posts/1`, `/posts/2` etc?

How to create dynamic href in react render function?

I am using `webpack-dev-server v1.10.1` to boost up my Redux project and I have the options below:

    contentBase: `http://${config.HOST}:${config.PORT}`,
    quiet: false,
    noInfo: true,
    hot: true,
    inline: true,
    lazy: false,
    publicPath: configWebpack.output.publicPath,
    headers: {&quot;Access-Control-Allow-Origin&quot;: &quot;*&quot;},
    stats: {colors: true}


In the JS, I am using `request` from `superagent` to generate a HTTP GET call

    request
		      .get(config.APIHost + apiUrl)
		      .set(&#39;Accept&#39;, &#39;application/json&#39;)
		      .withCredentials()
		      .end(function (err, res) {
					if (!err &amp;&amp; res.body) {
						disptach(() =&gt; {
							return {
								type: actionType || GET_DATA,
								payload: {
									response: res.body
								}
							}
						});
					}
		      });

But I got the CORS error:

    XMLHttpRequest cannot load http://localhost:8000/api/getContentByType?category=all. No &#39;Access-Control-Allow-Origin&#39; header is present on the requested resource. Origin &#39;http://localhost:5050&#39; is therefore not allowed access


Any suggestion to resolve this? Thanks a lot

webpack dev server CORS issue

I want to call a method exposed by a React component from the instance of a React Element.

For example, in this [jsfiddle][1].  I want to call the `alertMessage` method from the `HelloElement` reference.

Is there a way to achieve this without having to write additional wrappers?


___Edit___ (copied code from JSFiddle)

&lt;!-- language: lang-html --&gt;

    &lt;div id=&quot;container&quot;&gt;&lt;/div&gt;
    &lt;button onclick=&quot;onButtonClick()&quot;&gt;Click me!&lt;/button&gt;


&lt;!-- language: lang-js --&gt;

    var onButtonClick = function () {
    
        //call alertMessage method from the reference of a React Element! Something like HelloElement.alertMessage()
        console.log(&quot;clicked!&quot;);
    }
    
    var Hello = React.createClass({displayName: &#39;Hello&#39;,
        
        alertMessage: function() {
            alert(this.props.name);                             
        },
                                   
        render: function() {
            return React.createElement(&quot;div&quot;, null, &quot;Hello &quot;, this.props.name);
        }
    });
    
    var HelloElement = React.createElement(Hello, {name: &quot;World&quot;});
     
    React.render(
        HelloElement,
        document.getElementById(&#39;container&#39;)
    );


  [1]: https://jsfiddle.net/r6r8cp3z/

Call a React component method from outside

I have a React component and I want to load in my JSON data from a file. The console log currently doesn&#39;t work, even though I&#39;m creating the variable **data** as a global

    &#39;use strict&#39;;

    var React = require(&#39;react/addons&#39;);

    // load in JSON data from file
    var data;

    var oReq = new XMLHttpRequest();
    oReq.onload = reqListener;
    oReq.open(&quot;get&quot;, &quot;data.json&quot;, true);
    oReq.send();

    function reqListener(e) {
        data = JSON.parse(this.responseText);
    }
    console.log(data);

    var List = React.createClass({
      getInitialState: function() {
        return {data: this.props.data};    
      },
      render: function() {
        var listItems = this.state.data.map(function(item) {
            var eachItem = item.works.work;        

            var photo = eachItem.map(function(url) {
                return (
                    &lt;td&gt;{url.urls}&lt;/td&gt; 
                )
            });
        });
        return &lt;ul&gt;{listItems}&lt;/ul&gt;
      }
    });

    var redBubble = React.createClass({
        render: function() {
          return (
            &lt;div&gt;
              &lt;List data={data}/&gt;          
            &lt;/div&gt;
          );
        }
      });

    module.exports = redBubble;

Ideally, I would prefer to do it something like this, but it&#39;s not working - it tries to add **&quot;.js&quot;** onto the end of the filename.

    var data = require(&#39;./data.json&#39;);

Any advice on the best way, preferably the &quot;React&quot; way, would be much appreciated!

Content Type	Original Author	Original Content on Stackoverflow
Question	Evgeny Rodionov	View Question on Stackoverflow
Solution 1 - Reactjs	Evgeny Rodionov	View Answer on Stackoverflow
Solution 2 - Reactjs	Colin D	View Answer on Stackoverflow

React's mouseEvent doesn't have offsetX/offsetY

Reactjs Problem Overview

Reactjs Solutions

Solution 1 - Reactjs

Solution 2 - Reactjs

What is the difference between init.py and main.py?

Project.json definition dnx451 vs .dotnet ( 4.51)

Attributions