Programming with React in Eclipse

React is a JavaScript library for building user interfaces. It is a declarative and component based framework. Applications can be composed of multiple encapsulated components that manage their own state and efficiently update when data changes. React can also be used to power mobile apps with React Native. If you would like to include React in Eclipse, CodeMix is a great solution.

CodeMix is an Eclipse plugin that lets you add Code-compatible extensions directly into Eclipse. CodeMix is compatible with Eclipse-based IDEs and tools—like MyEclipse, Spring Tools Suite, Webclipse and JBoss Tools—so you can continue working in the environment you are accustomed to, while developing with React.

React Highlights

IntelliSense

Intelligent suggestions are provided everywhere—in JavaScript, TypeScript, and even in JSX sections. Suggestions include React specific elements, attributes, fields and methods.

Snippets help produce common bits of code, reducing the time to get started with new classes and components.


Eclipse Oxygen + CodeMix

Extensions

Core React support is available out of the box; however, for the best experience we recommend installing extensions. From the Extension Manager, browse for the React pack to install everything you need for programming with React. 


CodeMix Extension Manager

Navigation

Use hyperlink navigation to easily jump to different sections of your application. Before you actually make the jump, you can see declarations inline as you hover over the element – a huge time saver.


Eclipse Oxygen + CodeMix

React New Project Wizard

Go to File>New>Project>CodeMix and select React Project to create a new React template project. The wizard installs any missing React extensions.


New CodeMix React Project wizard

Validation and Linting

Besides the standard syntax validation you will get for JavaScript and TypeScript, you can use the ESLint React plugin to get React specific linting too.

Incorporate linting into your React programming to ensure your code follows React’s best practices for clean code and to help you avoid common pitfalls.


Eclipse Oxygen + CodeMix + DevStyle + ESLint extension + ESLint-plugin-React

Debugging

Debugging a React application is straightforward – set breakpoints, step through the code, and inspect variables as you normally would when debugging in Eclipse. The Debug Console is very handy when you need to either inspect or change values at runtime.


Eclipse Oxygen + CodeMix + Debugger for Chrome extension