React맥에서 입맛에 맞는 에디터 찾기가 쉽지 않습니다. 특히나 맥맹인 저로써는 Visual Studio for Mac도 그리 좋아하지 않습니다. 애초에 텍스트 에디터나 리치 에디터 쪽에는 애플이 별로 신경을 쓰지 않은 것으로 보이네요. 적어도 맥맹인 저에게는 그렇습니다. =_=;;
그나마 마음에 드는 녀석이 바로 WebStorm 이네요. 코딩의 즐거움을 줄이기? 위해서 ReactJS용 템플릿을 만들어 보았습니다. 만든 김에 귀찮아서 package.json, webpack.config.js 템플릿도 만들었습니다. 지우고 다시 설정하면 되도록 계속 조정을 할 생각입니다. ^^
Preferences > Editor > File and Code Templates > + (add)
1. React File (js)
import React, { Component, PropTypes } from 'react';
export default class ${NAME} extends Component {
static propTypes = {
};
constructor(props) {
super(props);
this.state = {
};
}
componentWillMount() {
}
componentDidMount() {
}
componentWillReceiveProps() {
}
componentWillUpdate() {
}
componentDidUpdate() {
}
componentWillUnmount() {
}
render() {
return (
<div>
</div>
);
}
}
2. React Package File (json)
{
"name": "kanbanboard",
"version": "0.1.0",
"private": true,
"dependencies": {
"history": "^4.6.3",
"react": "^15.6.1",
"react-dom": "^15.6.1",
"react-router": "^4.1.1"
},
"devDependencies": {
"babel-core": "^6.25.0",
"babel-loader": "^7.1.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"react-hot-loader": "^1.3.1",
"react-scripts": "1.0.7",
"webpack": "^3.0.0",
"webpack-dev-server": "^2.5.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject",
"dev": "webpack-dev-server --progress --hot"
}
}
3. React Webpack File (js)
var webpack = require('webpack');
module.exports = {
entry: './src/index.js',
output: {
path: __dirname + '/public/',
filename: 'bundle.js'
},
devServer: {
hot: true, // 파일이 수정할때마다 리로드
inline: true,
port: 7777,
contentBase: __dirname + '/public/'
},
module: {
loaders: [
{
test: /\.js$/,
loaders: ['react-hot-loader', 'babel-loader?' + JSON.stringify({
cacheDirectory: true,
presets: ['es2015', 'react']
})],
exclude: /node_modules/
}
]
},
plugins: [
new webpack.HotModuleReplacementPlugin()
]
};