How do I get JSX to work on HyperDrive? Consider the following example from the react docs.
var myDivElement = <div className="foo" />; ReactDOM.render(myDivElement, document.getElementById('app'));
I get the following error since the JSX is not being translated.
client.js:1 Uncaught SyntaxError: Unexpected token
Be sure to include all the files react needs to render:
For example:
react.js, react-dom.js, browser.min.js, jquery.min.js, marked.min.js
I would advise you to have a look at the tuttorial, there you have a index.html to get you started:
Tried myself, and it is rendering just fine.
How about running webpack/babel on save though to bundle js?
Here’s a Hello World JSX example you can remix - https://hyperdev.com/#!/project/glaze-dagger. There’s also a recreation of the React tutorial in our Getting Started projects: https://hyperdev.com/community/#getting-started
in other threads it has been noted that no files can be created by a build step (npm run myscript) or server-side code. the jsx transform middleware just compiles the jsx into js at the time of the request, correct? I was able to do something similar with browserify once I saw the file permissions were strict. Performance-wise this is not ideal. Do you think that the memory available would be enough to cache a compiled resource so that it can be served immediately? Has anyone tried? I’m not complaining by any means here, I’m just curious about a work-around that could yield decent page-load times if this were to become a production hosting solution for me.
update: I’m thinking rollup is going to work well for this (assuming memory is enough): https://github.com/rollup/rollup/wiki/JavaScript-API
going to try saving the bundle in a var at startup. just need to trigger a save on the server to rebundle. seems legit
Make sure to include babel(https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js) in your index.html and add the type=“text/babel” to your script tag where you include the .js file with JSX or where you write your JSX code. There is no need to make use of webpack or any other thirdparty. It is explained in the react tutorial https://facebook.github.io/react/docs/tutorial.html
this doesn’t help with page load performance. for a fast-loading website, I need a single, minified, gzipped js bundle.
it seems like this is the best option for now since it allows caching and would not hurt performance in production. babel and uglify could also be introduced via a transform: https://www.npmjs.com/package/browserify-middleware
I think browserify-middleware is a good choice. You should also be able to write to /tmp in your containers and can configure some modules to use that directory as a file cache.
Let me know what you figure out!
I’m super unfamiliar with anything beyond static sites and playing with javascript in a sandbox. I’m using the facebook tutorial to get my feet wet with react and JSX and the readme says “Just add it to your package.json” what does that mean? I havent found any documentation anywhere about how to work with package.json.
How do I get it to render? Do I add all of the files from the starter pack to my HyperDev VM? Do I just type in some voodoo to package.json?
I’ve created a quick React JSX example ‘Hello World’ project ( https://hyperdev.com/#!/project/glaze-dagger ) that you can take a look at.
There’s some useful background about what a package.json file does on the npm site ( https://docs.npmjs.com/getting-started/using-a-package.json ), but it essentially allows you to specify what packages you want to use in your project, amongst other things.
In the case of the React JSX example, if you look at the package.json file you can see we’re including express and the express jsx transform packages in the dependencies section. So if you’re told to add it to your package.json, typically they just mean to add whatever package they’re referring to there. We make it easy to do that in HyperDev by embedding npm. So if you search for the package you want from the ‘Add package’ drop-down at the top of the editor window when viewing the package.json file, it’ll automatically add the required line to your package file.
We also have an implementation of the main React tutorial project that you might want to follow to understand some of the core concepts about how React works: https://hyperdev.com/#!/project/shade-king. If you remix it, then you can play around with it for yourself.
Thanks this is working fine after including the missing dependency “react-tool” that “express-jsxtransform” is using
Here is a simple boilerplate for React + Webpack 2 https://gomix.com/#!/project/react-webpack-boilerate