How to edit React jsx scripts in Eclipse?

I was about to use React in a new project when I hit a development PITA. How do you edit the JSX scripts within a page using Eclipse?

In React, you can use JSX files or JSX script embedded in the page. The JSX transformer converts these to standard JavaScript at compile or in the browser.
Note: Embedding JSX scripts in a page is most likely a very bad thing to do. Maybe justified for learning React, demos, or quick examples.

Eclipse allows the use of shortcut key bindings for various views and content types.

From the React docs, below is a sample jsx script. When this is embedded in an HTML file within Eclipse, such as index.html, there is no way to edit the script using the normal Editing key bindings. Even indentation of highlighted lines fails. Weird, I even tried to create a new key binding for TAB or ctrl+i, to no avail.

<script type="text/jsx">
	var HelloWorld = React.createClass({
	  render: function() {
		return (
			Hello, <input type="text" placeholder="Your name here" />!
			It is {}

	setInterval(function() {
		<HelloWorld date={new Date()} />,
	}, 500);

If I discover how to get around this, I’ll post here. Of course, you can put your jsx code into an external js file, that Eclipse has no problem with.


  1. Mar 1, 2016: Working on a new React/Redux app. Now in Eclipse, when editing js files and add a line by entering return at the end of a line, Eclipse adds + ” at the new line break. Oh veah. Creating runtime errors.
  2. June 6, 2018: I now use Visual Studio Code (vsc) to develop React apps.


2 thoughts on “How to edit React jsx scripts in Eclipse?”

  1. Is there any any extra configurations required to run React Js code in eclipse .
    If Yes, can you please suggest how can we.

    Thank you.

Leave a Reply

Your email address will not be published. Required fields are marked *