CODEWITHSUNDEEP
javascriptreactjsjsxbabeljs
user1837293
user1837293

Reputation: 1676

Babel transpile required to run JSX code (ReactJS)?

I'm having a look at some code I wrote a year ago and for all projects I get error on running index.js (in Atom, using 'script' package). I totally forgot how I ran those projects back then and haven't done any programming (with React) since then. Was it required to transpile this code with babel in order to run any JSX code?

enter image description here

index.js in /src: 

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';

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

package.json:

{
  "name": "jammming",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^15.6.1",
    "react-dom": "^15.6.1",
    "react-scripts": "1.0.11"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}

Why is this and how to solve?

Upvotes: 1

Views: 261

Answers (1)

Sagiv b.g
Sagiv b.g

Reputation: 31024

Yeah as JSX is not standard syntax, it is a syntactic sugar for React.createElement.
You can use babel-plugin-transform-react-jsx

In

var profile = <div>
  <img src="avatar.png" className="profile" />
  <h3>{[user.firstName, user.lastName].join(' ')}</h3>
</div>;

Out

var profile = React.createElement("div", null,
  React.createElement("img", { src: "avatar.png", className: "profile" }),
  React.createElement("h3", null, [user.firstName, user.lastName].join(" "))
);

Upvotes: 1

Related Questions