joppot

The program absolutely runs in copy paste

Software

Develop React in emacs in rjsx-mode

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

Pocket


Abstract

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.

Precondition

You use emacs
You use melpa or el-get

SPONSORED LINK


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{
  constructor(){
    super();
    this.state = {
      txt: 'this is the state text',
    }
  }

  update(e){
    this.setState({
      txt: e.target.value
    })
  }

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

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

Conclusion

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

-Software
-,

執筆者:


comment

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

関連記事

Allocate lo0 IP address using Mac login hook automatically

Abstract Hello everyone it’s me candle. In this time we would like to use the login hook of Mac and automatically allocate the local ip address. You can use the default 127.0.0.1 lolcal IP address on your Mac. However when using it with docker, you need to prepare other local IP address separately. Precondition You use Mac.

How to send pdf from Mac to iphone or ipod using iBooks

English 日本語 Abstract Hello everyone, It’s me candle. In this time, I will show you how to send a pdf file from Mac to iphone or ipod. Sometimes I want to read the pdf document in the train, so I wrote the article about it. Before you send a pdf file to the iphone, you add the pdf to iBooks app. Then you will send the pdf with itunes. Precondition Mac PC iphone or ipod or ipad pdf file

How to add extension to Ungoogled chromium

English 日本語 Abstract Hello everybody, It’s candle. I don’t use Google Chrome so much because I am firefox user, but sometimes I need to use Chrome for extensions. Google Chrome is slow, and there are some personal information protection is loose. Detail is here. https://github.com/Eloston/ungoogled-chromium So, I use ungoogled chromium. The problem of ungoogle chromium is that is not easy to install extensions. In this article, I’ll show you how to install plugins. This article is according to the under link. https://github.com/Eloston/ungoogled-chromium/blob/master/FAQ.md Premise Ungoogled chromium has been installed

Fix emacs powerline character gets corruption(mojibake) on Mac standard terminal or iTerm2

Abstract Hello everyone it’s me candle. In this time I will show you how to fix emacs powerline character corruption(mojibake). I am referring to this site. https://griffio.github.io/utils/2016/01/26/Spacemacs-OSX-Term/ I will explain both iterm2 and mac standard terminal. In my case I launch the Emacs with iterm2, the arrow of powerline gets garbled. Let’s fix. Precondition You use emacs Your emacs was installed powerline. You use emacs with iTerm2 or mac standard terminal.

Build PlantUML environment on Mac using brew

Abstract Hello everybody it’s me candle. In this article, I would like to build a plantUML environment which can make UML easily on Mac. I have been used starUML for making UML. plantUML seems to be much more useful than that. Precondition You already use brew. Check java version I think that java is already installed in your mac pc. PlantUML can be run with mac default java. So you launch terminal app and check the java version with the below command. java -version Probably it can be work in java version around 1.8.x . Install graphviz graphviz is a …

Profile


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.

スポンサードリンク

Archives