How do I use a custom ReactJs component inside my JSX file from ReactJs.Net

Question

I would like to use the following react component ImageLoader but i dont understand how to integrate it into my current Asp.net mvc project. I m currently running my own reactJs components from a separate JSX using the help of ReactJs.net.

Answer 1

You can do it, but it's not a trivial task, because that component is developed using ES6 , or, you could say, a new definition for Javascript (or more exactly, "ECMAscript"). You have two main options:

1) Develop the component yourself. You can access the source code of the component in its Github Page . Even if you are not familiar with ES6, I think the logic behind this component should be easy to figure (I recommend this if you don't want to dig on precompiling and using Npm/Bower/etc).

2) As ES6 is not supported by all browsers at this time (Dec 23, 2015). To make it work properly with your project in Visual Studio, you will need to configure your project to use NPM and GULP and BABEL (look up at the first link for more info) to "pre-compile" the file and be able to use it in your JSX. Using Bower or Npm you should be able to import that component into your project.

You could also copy and paste the code inside a file in your project a look up to precompile it with Babel for MSBuild.

Either way, you are going to need to be more aware about ES6 and/or precopiling javascript files in Visual Studio.