Coding JSX in Eclipse

Setup Eclipse for JSX

We use Eclipse in our dev environment because that's officially what our Demandware UX Studio supports. As we migrate our jQuery to React.js, coding JSX in Eclipse required a few setup.

Associate *.jsx to the JavaScript Editor as 'default' editor.

Associate the content type to the file type.

Bonus: Webpack

We use webpack to package our file and running Eclipse in the background to automatically upload our cartridge to our Demandware sandbox. In order for Eclipse to detect a change and trigger an upload automatically, there is one more setting we need to change - Refresh using native hooks or polling.

Coding in JSX - How to Comment and if-else statement

Coding in JSX

Dealing with JSX is almost vanilla-html-like but sometimes still a little tricky, so I documented the 2 that I have encountered while I was working with React and JSX.

How to Comment in JSX

I was trying to comment out some of the html inside my jsx and it looked weird and didn't render properly.

render() {
  return (
    <div>
      <div>Hello World<div>
      <!-- This doesn't work! 
        <div>Hidden note</div>
        -->
    <div>
  )
}

What I really needed is this. A 'java' style rather than 'html' style.

render() {
  return (
    <div>
      <div>Hello World<div>
        {/* My Comments...
          <div>Hidden note</div>
          */}
    <div>
  )
}

if-else in JSX

render() {
  return (
    <div>
      <div>Hello World<div>
      { if true }
        <div>true</div>
      { else }
        <div>false</div>
    <div>
  )
}

A normal if else statement cannot be compiled. However, jsx accepts shorthand notation

render() {
  return (
    <div>
      <div>Hello World<div>
      { true ? <div>true</div> : <div>false</div> }
    <div>
  )
}