How to convert react JSX files to simple JavaScript file [offline transformation]
I am new to react.js. Just started learning it. So my question may seems to be stupid but please answer it.
I have created a simple .js file with following code:
var Hello=React.createClass({
render: function(){
return (<h1>Hello World</h1>);
}
});
It is in JSX syntax and to convert it to simple JavaScript file I used following command:
babel --preset react JSX_Files --watch --out-dir public/javascripts
Here JSX_Files is my source folder and public/javascripts is the folder where I want my transformed .js files.
But I'm getting following error while transformation:
SyntaxError: JSX_Files/example.js: Unexpected token (3:16)
1 | var Hello=React.createClass({
2 | render: function(){
> 3 | return (<h1>Hello World</h1>);
| ^
4 | }
5 | });
But when I use Babel REPL (http://babeljs.io/repl/) , it converts it without any error.
Now please tell me where I'm doing wrong. Why I'm getting syntax error while offline transformation.
Answer
If you are using babel-cli you need to use a plugin to transform jsx syntax to js syntax that the browser understands. See the following link: http://babeljs.io/docs/plugins/transform-react-jsx/ You'll need to install babel-plugin-transform-react-jsx plugin and use it in a .babelrc file like that:
{
"plugins": ["transform-react-jsx"]
}
Then your babel command should work.
Related Questions
- → How to update data attribute on Ajax complete
- → October CMS - Radio Button Ajax Click Twice in a Row Causes Content to disappear
- → Octobercms Component Unique id (Twig & Javascript)
- → Passing a JS var from AJAX response to Twig
- → Laravel {!! Form::open() !!} doesn't work within AngularJS
- → DropzoneJS & Laravel - Output form validation errors
- → Import statement and Babel
- → Uncaught TypeError: Cannot read property '__SECRET_DOM_DO_NOT_USE_OR_YOU_WILL_BE_FIRED' of undefined
- → React-router: Passing props to children
- → ListView.DataSource looping data for React Native
- → Can't test submit handler in React component
- → React + Flux - How to avoid global variable
- → Webpack, React & Babel, not rendering DOM