Develop React in emacs in rjsx-mode

投稿日:2017年9月3日 更新日:


Hello everyone this is candle.
In this time I would like to introduce rjsx-mode of major-mode for react development of emacs.

The development of “react” has been tried and errored between emacs users, such as using web-mode or js2-jsx-mode of js2-mode.
Also I had been used js2-jsx-mode before rjsx-mode.

Since rjsx-mode is an extension of js2-mode, users of js2-mode can use it without discomfort.
rjsx-mode has auto complete function of jsx. it’s fantastic.


You use emacs
You use melpa or el-get

Installing rjsx-mode

You can install rjsx-mode from melpa or el-get.
I am using el-get, but I will explain both easily.

install with mepla

Lauch emacs and run ” M-x package-list-packages”

Emacs will display the melpa package index. You would search “rjsx-mode” with C-s

Move the cursor to rjsx-mode, type “i”, then type “x” to install.
You are asked whether you want to install it, you can install it by typing “y”.

Installation with melpa is over.

Install with el-get

It is easy to install rjsx-mode with el-get.
At first, you open the emacs conf file. I will open ~/.emacs.d/init.el file

write it.

(el-get-bundle rjsx-mode)

Reload init.el with “M-x eval-buffer and install rjsx-mode from el-get.

You can see that js2-mode is installed if you are looking at the progress.

It’s over.

rjsx-mode configuration

rjsx-mode automatically starts up in major mode for .jsx extension.
On the other hand, since it is not bind with .js extension, it will not launch in majar mode.
All files in which React JSX is written are not only .jsx extensions.
If you want to lauch the rjsx-mode for all of .js files, you set up like this.

(add-to-list 'auto-mode-alist '(".*\.js\'" . rjsx-mode))

As in the official website, if you run rjsx-mode only for the js file under the components or containers folder, do as this.

(add-to-list 'auto-mode-alist '("components\/.*\.js\'" . rjsx-mode))
(add-to-list 'auto-mode-alist '("containers\/.*\.js\'" . rjsx-mode))

Make the App.jsx file and check it good working.

touch App.jsx

Write this.

import React from 'react';

class App extends React.Component{
    this.state = {
      txt: 'this is the state text',


        <p>Text: {this.state.txt}</p>
        <input name="" type="text" onChange={this.update.bind(this)} />

export default App;

You can see that the majar mode is “RJSX”

Well, looking at the above image, warning is displayed because there is no semicolon at the end of the line.
I don’t sure it is from ES6, but the semicolon at the end of the line is no longer mandatory.
Disable this warning to edit configuration file and change to indent width to the 2 spaces.

open ~/.emacs.d/init.el file and write this.

(add-hook 'rjsx-mode-hook
          (lambda ()
            (setq indent-tabs-mode nil) ;;Use space instead of tab
            (setq js-indent-level 2) ;;space width is 2 (default is 4)
            (setq js2-strict-missing-semi-warning nil))) ;;disable the semicolon warning

It seems good.
The basic setting is over.

About JSX autocomplete

The rjsx mode does the autocomplete for jsx tags.
In jsx, typing “<” will automatically expand “/>”.

and enter “button”, delete “/” with “C-d”, the close button tag </button> is created.

It is really convenient


I think that React’s major mode will jostle with js2-jsx-mode, web-mode, rjsx-mode etc for a while.
Among them, I thought rjsx-mode was useful.


If you think this article is good, share it please



  1. Jon Rostran says:

    Hi Joppot. thank you very much for your post. It was very helpful. However, I should bring to your attention that the method to run rjsx-mode only on components/ or containers/ folder does not work.

    (add-to-list ‘auto-mode-alist ‘(“components\/.*\.js\'” . rjsx-mode)) ;; this does not work
    (add-to-list ‘auto-mode-alist ‘(“containers\/.*\.js\'” . rjsx-mode)) ;; this does not work

    The first method did work – running rjsx mode on all my .js files. Do you think you could help me run rjsx-mode only on components/ and containers/ folders? I would very much appreciate it. Thank you.

    • candle says:

      Hi, I’m sorry for the delay in sending feed back you.
      I checked it and yes surely it’s not working.
      So I improved to fix that problem. This configuration will be good working. Please try it.

      (add-to-list ‘auto-mode-alist ‘(“.*/components\\/.*\\.js\\'” . rjsx-mode))
      (add-to-list ‘auto-mode-alist ‘(“.*/containers\\/.*\\.js\\'” . rjsx-mode))


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


In emacs on iTerm2, resolve you can’t enter symbol key binding such as C-; C-: C-> C-< C-. C-,

Abstract Hello eveyone it’s me candle. This time I will show you how to solve the problem that you can’t use symbol keybind on your iTerm2 emacs. Basically, emacs on iTerm2 can’t use key binding of control + symbol. The detail thing is written in this article. (japanese) Acouding to the article Apparently it seems that the range of ASCII that ctrl key can control is decided. This post referred to the below linked article. I tried how to setup symbol key binding a few years ago and I was frustrated. But I solved it by that. it was …

Using vc to manage git on emacs25

Abstract Hello everyone it’s me candle. In this article we would like to use vc(version controll) which is included by deault in emacs. It seems that vc supports to both subversion and git, not git-specific functions. If you want to use git with emacs in earnest, I recommend magit. On the other hand, since vc is installed in by default, it is good for user who want to use it easily. Precondition You use emacs You have a basic git skill. vc-git configuration of emacs Although vc supports to git, ‘git add’ and ‘git reset HEAD’ do not exist. I …

Build flycheck + eslint environment supporting to react + es6 in Emacs.

Abstract Hello everyone it’s me candle. In this time let’s build emacs + eslint. There are many other syntax check packages such as jsHint, jsxHint, etc which check the coding rule of javascript. According to web info, these packages seem to be unable to adapt well with the latest javascript writing format such as React and es6. Nowadays eslint became to be mainstream. It has become used not only in emacs but also everywhere. I’m also emacs user, try it! I’m not a node JS and Elisp professional, it may contains useless writing or wrong writing. Please go easy on …

Limit the number of text characters in wordpress article index by plugin

English 日本語 Abstract Hello everybody, It’s candle. Nowadays, when I used free themes for wordpress at the company, I noticed that. Many free theme use the_content function which expands all the contents of individual articles in the article list, and it is very irritating. However, editing a free theme is troublesome. We use the “Advanced Excerpt” plugin to limit the number of characters displayed in the article list and make it easy to see. We use the free theme “twentyeleven” as a sample. Before After Premise There is a wordpress.

Connect to host mysql from docker container of “docker for Mac”

Abstract Hello everyone it’s me candle. In this post I will show you how to connect to the host mysql from the docker container of mac. For example, you may connect to mysql when running rails, wordpress etc on docker. You may prepare docker of mysql, but it can’t hold data, it is troublesome such as startup time. Then I think that it is very useful if docker can access to the host mysql. Precondition You use docker for mac

I work in the venture company as a CTO. I start to write program in University, first I learned java, C++ and PHP. In the company, I'm developing web services by Rails. I do like to automation.