CODEWITHSUNDEEP
javascriptreactjsecmascript-6babeljs
Thomas Charlesworth
Thomas Charlesworth

Reputation: 1839

Run JSX Preprocessor and use ES6 Syntax

I followed this guide here

https://reactjs.org/docs/add-react-to-a-website.html

And am currently using this command to compile my jsx

npx babel --watch src --out-dir . --presets react-app/prod

Unfortunately, I am unable to use ES6 syntax such as

import MyComponent from 'MyComponent';

It is not converting this to ES5 syntax and thus I get "Uncaught SyntaxError: Unexpected identifier "

Upvotes: 2

Views: 1912

Answers (1)

yigitusta
yigitusta

Reputation: 316

Babel is a transpiler converting your JSX and ESNext (ES6 and above) to ES5 which makes even old browsers understand your code. However, it does not have bundling capability, meaning it does not get contents of the file imported and ship all your code in one file. For that, you need to use a bundler like Webpack.

Configuring Webpack might be tedious, I suggest you to use create-react-app to use Webpack and Babel pre-configured.

When you are done building your app, in order to ship it to your current website, you can simply replace root with the id of the element in your website inside index.js.

ReactDOM.render(<App />, document.getElementById('root'));

Then run npm run build to create files for deployment inside build folder. From there, simply copy bundle.js and include it in your website.

I hope this helps!

Upvotes: 3

Related Questions