'template'에 해당하는 글 1건

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()

  ]

};


신고

WRITTEN BY
비트센스
뷰파인더로 보는 프로그래머의 세상 페이스북 @bitsense 트위터 @picory 스카이프 picory MSN drawhalf@dreamwiz.com

받은 트랙백이 없고 , 댓글이 없습니다.
secret