CODEWITHSUNDEEP
reactjsbabeljsasp.net5
Thanasis Ioannidis
Thanasis Ioannidis

Reputation: 3231

How to render simple React component in MVC6 application, for dummies

I have a simple mvc6 site solution in Visual Studio 2015.

In one of my pages, I have

<script type="text/jsx">
    ReactDOM.render(<h1>Hello, world!</h1>, document.getElementById('react-app-mount'));
</script>

But the component does not render. What scripts do I have to include in the page to make it render? I am a total newbie to react.

Trying to figure it out on my own I got extremely confused with the gazillion of terms like 'npm, bower, babel' but nowhere I can find a decent from-scratch example on how to use those things in Visual Studio 2015. Moreover, I find suggestions that just don't work.

For instance, I read something like "you should run npm install babel", but nobody gives information on where in visual studio I should execute this command. Others speak about a package.json file that is supposed to exist somewhere in my solution, but it is just not there.

I really don't understand why things are so extremely complicated. In the old days, when you wanted to use a library, you just put a <script> element on the beginning or end of your page and you could just use it.

Upvotes: 1

Views: 304

Answers (2)

Lojka
Lojka

Reputation: 167

the right way, using ASP.NET MVC is:

  1. bundle all react components & scipts using webpack to one file: bundle.js

    1.2. you need entry point for your scripts, first script that will ReactDOM.render your root component, and alsi it will import this component: import { App} from "./Components/App";

    1.3. Your App component will import other components and so on

  2. include bundle.js in your view layout

  3. don't forget to include root node in your view file ("

Upvotes: 0

Sumit R
Sumit R

Reputation: 106

The scripts that you have to import are:

<script src="https://unpkg.com/react@latest/dist/react.js"></script>
<script src="https://unpkg.com/react-dom@latest/dist/react-dom.js"></script>
<script src="https://unpkg.com/[email protected]/babel.min.js"></script>

But this is not the right way to do, It is for getting a demo of React.

If you want to get started with react, This might help you. https://github.com/facebookincubator/create-react-app

Upvotes: 0

Related Questions