Run React application without server

Question

Before asking my question I'd like to tell you that I am very new to react and till now I have learned very basic concepts of react like component, state, prop, router etc. and may be this question is very funny but I need the solution for that. Please correct me if I am wrong somewhere.

So my question is, can we run react based application without running application on server ?. Basically, I want that, I can directly use index.html file path on web browser and my app starts working.

My understanding is that React js is a javascript library and all the code eventually converted into plain javascript files using babel loader(if we are using ES6). So I think it should be possible to do this.

I have discovered that I can use webpack which internally first convert my React based or other js files into normal javascript and make one single bundle file that can be used in Index.html file for further use. I've tried this but only some features are working fine like state, prop but many other features are not working like react-router but when I used npm server all the features start working fine.

Now why I want to do this is because I want to use react js to create Samsung Tizen TV web application where I don't think that I can use npm server and all.

If anybody has any solution on that it would be very helpful. Thanks

Answer 1

I added following to package.json before building:

"homepage": "./", 

Quote of reacts terminal output when building:

The project was built assuming it is hosted at the server root. To override this, specify the homepage in your package.json. For example, add this to build it for GitHub Pages:

"homepage" : "http://myname.github.io/myapp",

Note: I'm pretty sure this will not work in every project.

Answer 2

These few concepts are basically all you need (plus lifecycles methods). That's why React rocks, it's very easy to think and reason about, even if you have huge and complicated app.

---

React does work without server, just add script tags and make sure you use JavaScript that current browsers understand or download React source and use it anywhere that speaks JS and has DOM.

<script src="https://unpkg.com/react@15/dist/react.js"></script> <script src="https://unpkg.com/react-dom@15/dist/react-dom.js"></script> 

For example, Firefox uses React for their new devtools and here's tip that saves you a lot of time: it's very easy to use inline styles with React, I can't think of a better tool to design your email templates.