Init

jjingK · Jan 25, 2016 · 33cb27a · 33cb27a
commit 33cb27a
Show file tree

Hide file tree

Showing 14 changed files with 366 additions and 0 deletions.
diff --git a/.babelrc b/.babelrc
@@ -0,0 +1,6 @@
+{
+  "presets": [
+    "es2015",
+    "react"
+  ]
+}
diff --git a/.eslintrc b/.eslintrc
@@ -0,0 +1,60 @@
+{
+    /**
+     * ECMA 요구사항
+     */
+    "ecmaFeatures": {
+        "jsx": true,
+        "modules": true,
+        "experimentalObjectRestSpread": true
+    },
+
+    /**
+     * 환경
+     */
+    "env": {
+        // ES6 문법 사용
+        "es6": true,
+        // Node.js에서 사용
+        "node": true,
+        // 브라우저에서 사용
+        "browser": true
+    },
+
+    /**
+     * 확장
+     */
+    "extends": ["standard", "airbnb"],
+
+    /**
+     * 글로벌 변수
+     */
+    "globals": {
+        "$": true
+    },
+
+    /**
+     * 파서
+     */
+    "parser": "babel-eslint",
+
+    /**
+     * 플러그인
+     */
+    "plugins": ["standard", "react"],
+
+    /**
+     * 사용자화
+     */
+    "rules": {
+        "comma-dangle": [2, "never"],
+        "default-case": 0,
+        "func-names": 0,
+        "new-cap": [2, { "newIsCap": true, "capIsNew": false }],
+        "no-console": 0,
+        "object-curly-spacing": [2, "never"],
+        "react/prop-types": 0,
+        "react/sort-comp": 0,
+        "space-before-function-paren": [2, "never"],
+        "strict": 0
+    }
+}
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,8 @@
+# Include your project-specific ignores in this file
+# Read about how to use .gitignore: https://help.github.com/articles/ignoring-files
+
+build
+dist
+node_modules
+ncp-debug.log
+npm-debug.log
diff --git a/README.md b/README.md
@@ -0,0 +1 @@
+# React Study
diff --git a/index.html b/index.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Firejune's React Study Example</title>
+  </head>
+  <body>
+    <div id="main"></div>
+    <script>
+      if (!!window.require) {
+        // install babel hooks in the main process
+        require('babel-core/register')();
+        require('./src');
+      } else {
+        document.write('<script src="\/bundle.js"><\/script>');
+      }
+    </script>
+  </body>
+</html>
diff --git a/main.js b/main.js
@@ -0,0 +1,22 @@
+'use strict';
+
+const electron = require('electron');
+const app = electron.app;
+const BrowserWindow = electron.BrowserWindow;
+
+// 실행 준비를 마치면 브라우저 창 생성
+app.on('ready', () => {
+  // 브라우저 생성
+  const mainWindow = new BrowserWindow({width: 800, height: 600});
+
+  // 브라우저에서 처음으로 그려질 페이지
+  mainWindow.loadURL(`file://${__dirname}/index.html`);
+
+  // 브라우저의 개발자 도구 열기
+  mainWindow.webContents.openDevTools();
+
+  // 창이 닫히면 프로세스 종료
+  mainWindow.on('closed', () => {
+    app.quit();
+  });
+});
diff --git a/package.json b/package.json
@@ -0,0 +1,48 @@
+{
+  "name": "ReactStudy",
+  "author": "Joon Kyoung",
+  "version": "0.2.1",
+  "description": "React Study Example",
+  "license": "MIT",
+  "main": "main.js",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/firejune/react-study.git"
+  },
+  "dependencies": {
+    "jquery": "^2.2.0",
+    "jquery-ui": "^1.10.5",
+    "react": "^0.14.3",
+    "react-dom": "^0.14.3"
+  },
+  "devDependencies": {
+    "babel-core": "^6.4.5",
+    "babel-eslint": "^5.0.0-beta6",
+    "babel-loader": "^6.2.1",
+    "babel-preset-es2015": "^6.3.13",
+    "babel-preset-react": "^6.3.13",
+    "babel-preset-stage-0": "^6.3.13",
+    "electron-prebuilt": "^0.36.4",
+    "eslint": "^1.10.3",
+    "eslint-config-airbnb": "^3.1.0",
+    "eslint-config-standard": "^4.4.0",
+    "eslint-plugin-react": "^3.15.0",
+    "eslint-plugin-standard": "^1.3.1",
+    "jest-cli": "^0.8.2",
+    "react-addons-test-utils": "^0.14.6",
+    "webpack": "^1.12.11",
+    "webpack-dev-server": "^1.12.0"
+  },
+  "jest": {
+    "rootDir": "./src",
+    "scriptPreprocessor": "../scripts/test.js",
+    "unmockedModulePathPatterns": ["fbjs", "react"]
+  },
+  "scripts": {
+    "start": "electron .",
+    "lint": "eslint src",
+    "test": "eslint src && jest",
+    "build": "eslint src && jest && webpack --config ./scripts/package.js --release",
+    "server": "webpack-dev-server --config ./scripts/package.js --colors --inline --port 3000"
+  }
+}
diff --git a/scripts/package.js b/scripts/package.js
@@ -0,0 +1,32 @@
+const webpack = require('webpack');
+const RELEASE = process.argv.indexOf('--release') !== -1;
+
+module.exports = {
+  entry: './src/index.js',
+
+  output: {
+    path: './dist',
+    filename: 'bundle.js',
+    publicPath: '/'
+  },
+
+  devServer: {
+    contentBase: './'
+  },
+
+  devtool: 'source-map',
+
+  module: {
+    loaders: [
+      {
+        test: /\.(js)$/,
+        exclude: /node_modules/,
+        loader: 'babel-loader'
+      }
+    ]
+  },
+
+  plugins: RELEASE ? [
+    new webpack.optimize.UglifyJsPlugin()
+  ] : []
+};
diff --git a/scripts/test.js b/scripts/test.js
@@ -0,0 +1,17 @@
+'use strict';
+
+const babel = require('babel-core');
+
+module.exports = {
+  process: (src, filename) => {
+    // Ignore files other than .js, .es, .jsx or .es6
+    if (!babel.canCompile(filename)) {
+      return '';
+    }
+    // Ignore all files within node_modules
+    if (filename.indexOf('node_modules') === -1) {
+      return babel.transform(src, {filename: filename}).code;
+    }
+    return src;
+  }
+};
diff --git a/src/components/Content.js b/src/components/Content.js
@@ -0,0 +1,11 @@
+import React from 'react';
+
+module.exports = class extends React.Component {
+  render() {
+    return (
+      <section>
+        {this.props.data}
+      </section>
+    );
+  }
+};
diff --git a/src/components/Footer.js b/src/components/Footer.js
@@ -0,0 +1,11 @@
+import React from 'react';
+
+module.exports = class extends React.Component {
+  render() {
+    return (
+      <footer>
+        Footer
+      </footer>
+    );
+  }
+};
diff --git a/src/components/Header.js b/src/components/Header.js
@@ -0,0 +1,42 @@
+import React from 'react';
+import HeaderNavItem from './HeaderNavItem';
+
+module.exports = class extends React.Component {
+  constructor(props) {
+    super(props);
+    this.handleChangeNaveItem = this.handleChangeNaveItem.bind(this);
+  }
+
+  handleChangeNaveItem(idx) {
+    this.props.onChangeNav(idx);
+
+    this.props.nav.forEach((item, i) => {
+      this.refs[`item${i}`].setState({selected: i === idx});
+    });
+  }
+
+  componentDidMount() {
+    $(this.refs.test).sortable();
+    this.refs.item0.setState({selected: true});
+  }
+
+  render() {
+    return (
+      <header>
+        <ul ref="test">
+        {
+          this.props.nav.map((item, idx) => (
+              <HeaderNavItem
+                ref={`item${idx}`}
+                key={idx}
+                idx={idx}
+                title={item}
+                onChangeNav={this.handleChangeNaveItem}
+              />
+          ))
+        }
+        </ul>
+      </header>
+    );
+  }
+};
diff --git a/src/components/HeaderNavItem.js b/src/components/HeaderNavItem.js
@@ -0,0 +1,37 @@
+'use strict';
+
+const React = require('react');
+
+class HeaderNavItem extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      selected: false
+    };
+
+    this.handleClickNavItem = this.handleClickNavItem.bind(this);
+  }
+
+  handleClickNavItem() {
+    this.props.onChangeNav(this.props.idx);
+  }
+
+  render() {
+    const selectedStyle = {
+      backgroundColor: '#000',
+      color: '#fff'
+    };
+
+    return (
+      <li
+        style={this.state.selected ? selectedStyle : {}}
+        onClick={this.handleClickNavItem}
+      >
+        {this.props.title}
+      </li>
+    );
+  }
+};
+
+module.exports = HeaderNavItem;
diff --git a/src/index.js b/src/index.js
@@ -0,0 +1,53 @@
+import jQuery from 'jquery';
+
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+import Header from './components/Header';
+import Content from './components/Content';
+import Footer from './components/Footer';
+
+/*
+- Root
+ - Header
+   - HeaderNavItem
+ - Content
+ - Footer
+*/
+
+class Root extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      nav: 'Home'
+    };
+
+    this.handleChangeNave = this.handleChangeNave.bind(this);
+  }
+
+  handleChangeNave(idx) {
+    this.setState({
+      nav: this.props.nav[idx]
+    });
+  }
+
+  render() {
+    return (
+      <div>
+        <Header
+          nav={this.props.nav}
+          onChangeNav={this.handleChangeNave}
+        />
+        <Content data={this.state.nav} />
+        <Footer />
+      </div>
+    );
+  }
+}
+
+global.$ = jQuery;
+require('jquery-ui/sortable');
+
+const nav = ['Home', 'About', 'Feature', 'Help'];
+ReactDOM.render(<Root nav={nav} />, document.getElementById('main'));