Maksim Maksim - 8 months ago 68
React JSX Question

Why does my jsx code compile in js when I use npm start?

can you help me please. I use React and build my app by npm. Can you tell me why when I use "npm start" my jsx code transforms to js code in browser. But when I use "npm run build" it remains in the jsx format. It is not comfortable to debug my application using transform code. And I think that it's must be conversely when I build my app the code must be transformed.

My package.json is:

"name": "kb_frontend",
"version": "0.1.0",
"private": true,
"devDependencies": {
"react-scripts": "0.7.0"
"dependencies": {
"react": "^15.4.1",
"react-dom": "^15.4.1",
"semantic-ui-css": "^2.2.4",
"semantic-ui-react": "^0.61.4"
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"

After answers below, I understand that I need to attach sourcemap to my "npm start" config. How can I do this?

Thank you for helping.

Answer Source

JSX will always need transpiling to native JS be understood by current browsers. I guess what's happening when you run the build is that although it's still transpiled, a sourcemap is created which lets you see the 'original' or near-original in your browser.

Looks like your using create-react-app (great choice!).