Is there a stand-alone transpiler for converting JSX to JavaScript (i.e. just <foo … /> → createElement("foo", …), nothing else)?
I know I could just use Babel with the transform-react-jsx plugin, but would not want to prescribe an ES6 transpiler.
I think your best bet is going to be using Babel, since the other standalone packages are not being updated/maintained.
I'm not sure why you have an aversion to using Babel, but you can pick the transformations that are applied, you can use it programmatically, and you can even use a standalone version that works in the browser, so I think it should suit your needs.
This may be interested: https://github.com/RReverser/acorn-jsx
Finally two older projects that could still be useful for you:
https://github.com/facebookarchive/jstransform
https://github.com/alexmingoia/jsx-transform
Related
I'm developing a react project. I use postcss-nested plugin to support css nested rule, and use babel-plugin-react-css-modules to support css modules in react. Finally, the css styles can work well so I'm sure there is no problem with these 2 plugins. But it seems that the vscode can't regonize the css nested rules. It display an underline to give an warning, like this:
Now vscode can't give tips when coding. I have to type the css property names completely. Is there any idea about my problem?
I've also ran into this issue while utilizing nesting. Because nesting is not officially apart of vanilla css VS code is automatically spitting out errors. The best way to fix this issue is to install the VS Code plugin https://marketplace.visualstudio.com/items?itemName=csstools.postcss. this will fix up those nasty little errors. Let me know if that helps you out.
I was reading the docs on React.lazy() and it wasn't clear to me whether using that API requires me to use a module bundler that supports that syntax.
What if I am not using any bundler and just using <script type="module" src="example.mjs"></script> to provide modules, will React.lazy() still work and does it even make sense to do so?
Without bundler React.lazy will not work because it depends on dynamic imports.
Dynamic imports it is not a feature that browsers support for now(it is ecmascript proposal), but bundlers do.
So answer is yes. Read more about dynamic imports in webpack.
I installed all recommended extensions, still VSCode won't recognize any React syntax.
What must i do to make VSCode play nice with React (js / jsx) syntax?
The plugin that was causing issues for me here actually Babel ES6/ES7 as mentioned in another comment.
Once removing that plugin and reloading, it all worked well
VS Code has built-in support for JSX and TSX. You do not need to install any extensions unless you want additional functionality
As the OP noted, the problem was one of their extensions was inserting spaces around the tags. I suspect it was the js css html formatter extensions since this has caused problem for people in the past
1.Delete all html-js-css formatters.
2.If you want to work with this formatters,
install prettier.
Right click and select format document with and then select prettier. Repeat this every saving.
This happens because you use some HTML formatter, so first go to your react native or js extension settings(simple click the bottom bar language mod), and check the HTML fomatter in that setting page.
"[html]": {
"editor.defaultFormatter": "apility.beautify-blade"
}
remove this, and you are good to go.
Afaik, vscode does not understand JSX by default. Installing jsx plugin should help there.
Install Babel ES6/ES7 extension from here.
Works like charm.
I'm using Notepad++ and I just started to learn React js and the JSX syntax extension but not having the styling makes it difficult to read. I'm not sure If I could implement the styles into Notepad++ or even if it's possible to import a JSX pre-processor or plugin. I was looking into installing Babel but I would also have to install NPM and Node js ect. and I'm not sure if that would be the best approach. Or is there a different IDE I should be using?
I was able to find the answer to my own problem. I was viewing the code in the html language because the js was included in a .html file. When I switch the language to Javascript the styles looked perfectly fine. The first <h2> tag in JSX threw off the rest of the code styles. Beginner's mistake.
I searched for a package to auto-indent and beautify my React/babel code. I just tried atom-beautify which seems to have good feeback on Atom.
But the result on an usual babel file is not good enough: "HTML tag" doesn't indent as wanted. Has anyone tried to use atom-beautify with babel?
I currently use the plugins language-babel, react, and autoclose-html to handle this for me with no issues.
https://atom.io/packages/autoclose-html
https://atom.io/packages/language-babel
https://atom.io/packages/react
Hope this helps!
Atom beautify did not support jsx at that time. it does now :)
I already faced the same problem and ended using prettier-atom . It works really nice with HTML tags.
I use Prettier (https://prettier.io/) to re-write my code into best practices, so all the team can write code as if only one person has written it all. Supports JSX, and recently, even TypeScript, CSS, SCSS, ..
I use miniprettier, it's listed on Prettier official site as a recommended package.
It's like prettier-atom but without all the dependencies. I love it! It works very well on JSX. I use atom-beautify for other filetypes (e.g. JSON, pure HTML, JS).