Babel transpile required to run JSX code (ReactJS)?

Question

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?

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?

Sagiv b.g · Accepted Answer · 2018-09-29 15:11:31Z

1

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(" "))
);

answered Sep 29, 2018 at 15:11

Sagiv b.g

31.1k10 gold badges72 silver badges106 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user1837293 Over a year ago

Thanks, good to know! Since I was pretty sure I didn't use babel transpilation for this before I searched a bit further and found that back then I opened the app in the browser with command npm start (which runs command 'react-scripts start' due to entry in package.json) and that opens the app in the browser (on 'localhost:3000). Apparently the react-scripts package also somehow deals with JSX code.

Collectives™ on Stack Overflow

Babel transpile required to run JSX code (ReactJS)?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related