Q:

Cant import/export React components in visual studio

I'm trying something that I thought would be very basic but for some reason its just not working at all!
I'm simply trying to create 2 simple react components in 2 different jsx files and import one of them to the parent file and then use and render the child component in the parent one.
I have created a simple mvc site that simply goes to the index page that imports the selected jsx file which the first component is in. Reactjs is installed via nuget package manager. I'm still learning reactjs so I'm probably doing something glaringly wrong for this to not work.
I have tried using requires and es6 import/export but neither seem to work for me.
specifically using the import/export methods throws a syntax error even though I have both node.js and typescript installed in visual studio!
Any help would be great.
Please see code below:
Component1.jsx:
import Component2 from "./Component2.jsx"

class Component1 extends React.Component {
    constructor(props) {
        super(props);
    }
    render() {
        return (
            <div>
                <div>hello</div>
            </div>
        );
    }
}

ReactDOM.render(
    <Component1 />,
    document.getElementById('test')
);

Component2.jsx:
class Component2 extends React.Component {
    constructor(props) {
        super(props);
    }
    render() {
        return (
            <div>test</div>
        );
    }
}

export default Component2;

A:

Checkout this tutorial for setting up ReactJS in Visual Studio ASP.NET. Scroll down to the Transpilation section and make sure that you follow all of the steps for getting your es6 code transpiled.

