React Tutorial: Create and Debug an App in Eclipse with CodeMix

Making React run properly in Eclipse can be a really big headache…or an amazingly cool experience with CodeMix! CodeMix integrates the best of the VS Code world into Eclipse, such as support to create and debug React applications. Follow this React tutorial to quickly create and debug an app in Eclipse with CodeMix:

Create Your App 

1. Make sure you have NodeJS and NPM installed; for this cookbook, I am using NodeJS v8.11.2 and npm 5.6.0 on Windows 10 64-bit.
2. Install CodeMix into your Eclipse v4.7.3a (Oxygen 3a):
   http://www.genuitec.com/products/codemix/download/
   
   Personally, I also installed the free DevStyle plugin to have the cool Darkest Dark theme in Eclipse, along with other power-ups.
3. Now you can create a new React project inside Eclipse! Just go to File > New > Other > CodeMix > React Project, and then provide a name for your project, and CodeMix creates it for you.
4. By default, React opens your OS default browser at startup time, which can be quite annoying if you are debugging in a different browser. To tell React not to open your OS default browser, right-click on your React project’s name and choose Show in Local Terminal > Terminal; then, from the prompt-line enter:
   SET BROWSER=none
5. Now build and run your project by entering commands:
   npm install --global react-scripts
npm install
react-scripts start
   
   Tip: You can also use the command palette in CodeMix to execute npm commands. Just press Ctrl/Cmd+Shift+P and start typing.
   

Debug Your App

1. Establish a breakpoint — let’s say at line 4 ReactDOM.render() in the src/index.js file.
2. Right-click on your React project and choose Debug As > Debug Configurations, and then right-click on CodeMix and select New.
3. In the New CodeMix Launch Configuration dialog, select your React project’s name and then click OK.
4. A new `.vscode/launch.json` configuration file will be opened in the Eclipse editor; enter these debugging settings to connect your React project with your Chrome browser, and then save the file:
   
   

   {
   	"version": "0.2.0",
   	"configurations": [
       	{
           	"name": "Chrome",
           	"type": "chrome",
           	"request": "launch",
           	"url": "http://localhost:3000",
           	"webRoot": "${workspaceRoot}"
       	}
   	]
   }
   

5. Right-click on your React project and choose Debug As > Debug Configurations, and then double-click on your new Chrome debug configuration. 
   
   
   
   A new Chrome window opens pointing to your React app at http://localhost:3000/.

6. To start the debugging between Chrome and Eclipse, refresh that window with F5 (a workaround that the Chrome-Debugger extension developers may improve in the future). You will see something like this in your browser:
   
   

After completing this React tutorial, you’ll probably love CodeMix like I do and you will want to unlock your CodeMix 45-day trial period: in Eclipse, go to Help > Update License and click on the Login or register link.