npm install -g create-react-app

  cd file-explorer-handson
  npm install --save redux react-redux
  npm install --save-dev redux-devtools

  npm run build

  npm install --save electron

  public/favicon.ico
  src/App.css, App.js, App.test.js, registerServiceWorker.js
      index.css, index.js, logo.svg (記事作成時点ではsrcフォルダ以下すべて不要です)

mkdir .\src\actions
mkdir .\src\components
mkdir .\src\containers
mkdir .\src\reducers
echo //main.js> .\src\main.js
echo //index.js> .\src\index.js
echo //index.js> .\src\actions\index.js
echo //App.js> .\src\components\App.jsx
echo //FolderTreeItem.jsx> .\src\components\FolderTreeItem.jsx
echo //PathItemList.jsx> .\src\components\PathItemList.jsx
echo //AddressBarPanel.js> .\src\containers\AddressBarPanel.js
echo //FolderTreePanel.js> .\src\containers\FolderTreePanel.js
echo //PathListPanel.js> .\src\containers\PathListPanel.js
echo //index.js> .\src\reducers\index.js
echo //folderTreeItem.js>.\src\reducers\folderTreeItem.js
echo //pathItemList.js>.\src\reducers\pathItemList.js

const {app, BrowserWindow} = require('electron')
const path = require('path')
const url = require('url')

let win
function createWindow () {
  win = new BrowserWindow({width: 800, height: 600})
  win.loadURL(url.format({
    //react-scrpitでビルドされるファイルをロードする
    pathname: path.join(__dirname, '/../build/index.html'),
    protocol: 'file:',
    slashes: true
  }))
  // デバッグツールはデフォルトOFF.
  //win.webContents.openDevTools()
  win.on('closed', () => {
    win = null
  })
}

app.on('ready', createWindow)
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})
app.on('activate', () => {
  if (win === null) {
    createWindow()
  }
})

 <title>Retro Explorer HandsOn</title>

  "homepage" : ".",
  "main" : "./src/main.js",

src                     ... ソースのルートフォルダ
│  index.js                 ... アプリケーションを表すファイル（状態と画面の接続）
│  main.js                  ... Electronのエントリーポイント（QuickStartからコピー）
│
├─actions               ... イベントの定義
│      index.js
│
├─components            ... 画面の部品（アイテム）
│      App.jsx              ... アプリケーションを表す　src/index.jsで使う
│      FolderTreeItem.jsx   ... フォルダツリーのノードのアイテム
│      PathItemList.jsx     ... パス一覧の行と全体のリスト
│
├─containers            ... 画面の単位（パネル）
│      AddressBarPanel.js   ... アドレスを入力し開くするパネル
│      FolderTreePanel.js   ... フォルダツリーを表示するパネル
│      PathListPanel.js     ... パス一覧を表示するパネル
│
└─reducers              ... reducers（状態遷移のロジック）
        index.js            ... reducerの結合を行う
        folderTreeItem.js   ... フォルダツリーの状態
        pathItemList.js     ... パス一覧の状態

import React from 'react'
import AddressBarPanel from '../containers/AddressBarPanel'
import FolderTreePanel from '../containers/FolderTreePanel'
import PathListPanel from '../containers/PathListPanel'
/* アプリケーション画面の定義 */
const App = () => (
  <div>
    <AddressBarPanel />
    <hr/>
    <FolderTreePanel />
    <hr/>
    <PathListPanel />
  </div>
)
export default App

import { combineReducers } from 'redux'
import folderTreeItem from './folderTreeItem'
import pathItemList from './pathItemList'
/* 分割した状態遷移の関数群(reducers)の結合(combineReducers呼び出し) */
const explorerApp = combineReducers({
  folderTreeItem,
  pathItemList,
})

export default explorerApp

import { connect } from 'react-redux'
import PathItemList from '../components/PathItemList'
/* パスアイテムリストの状態の切り出し */
const mapStateToProps = (state)=> {
  return {
    pathItemList: state.pathItemList
  }
}
/* パスアイテムリストの状態と画面(コンテナ)の接続(connect呼び出し) */
const PathItemListPanel = connect(
  mapStateToProps
)(PathItemList)

export default PathItemListPanel

import React from 'react'
import { connect } from 'react-redux'
import { openButtonClickEvent } from '../actions'

const inputStyle = {"width":"300px"}
/* アドレスバーの画面とイベント発行 
   dispatch後、reducers(folderTreeItem)が呼び出される。*/
const AddressBar = ({ dispatch }) => {
  let folderPath
  return (
    <div>
      <form onSubmit={e => {
        e.preventDefault()
        if (!folderPath.value.trim()) {
          return
        }
        console.log('==> イベント発行(コンテナ) openButtonClickEvent rootPath=' + folderPath.value)
        dispatch(openButtonClickEvent(folderPath.value))
       }}>
        <input style={inputStyle} ref={node => {
          folderPath = node
        }} />
        <button type="submit">
          開く
        </button>
      </form>
    </div>
  )
}
/* フォルダツリーアイテムの状態の切り出し */
const mapStateToPorps = (state) => {
  return {
    folderTreeItem : state.folderTreeItem, 
  }
}
/* フォルダツリーアイテムの状態と画面(コンテナ)の接続(connect呼び出し) */
const AddressBarPanel = connect(
  mapStateToPorps
)(AddressBar)

export default AddressBarPanel

import { connect } from 'react-redux'
import { folderTreeItemClickEvent, toggleExpandClickEvent } from '../actions'
import FolderTreeItem from '../components/FolderTreeItem'
/* フォルダツリーのアイテムの状態の切り出し */
const mapStateToProps = (state) => ({
  folderTreeItem: state.folderTreeItem,
})
/* イベントハンドラ関数とイベント(action)のマッピング
   dispatch後、reducers(folderTreeItem)が呼び出される。*/
const mapDispatchToProps = (dispatch) => ({
   onFolderClick: (fullpath) => {
     console.log('==> イベント発行(コンテナ) folderTreeItemClickEvent fullpath=' + fullpath)
     dispatch(folderTreeItemClickEvent(fullpath))
   },
   onExpandClick: (fullpath, isExpanded) => {
     console.log('==> イベント発行(コンテナ) toggleExpandClickEvent fullpath=' + fullpath)
     dispatch(toggleExpandClickEvent(fullpath, isExpanded))
   },
})
/* フォルダアイテムの状態＋イベントマッピングと画面(コンテナ)の接続(connect呼び出し) */
const FolderTreePanel = connect(
  mapStateToProps,
  mapDispatchToProps
)(FolderTreeItem)

export default FolderTreePanel

import React from 'react'
import PropTypes from 'prop-types'
/* パスアイテムリストの描画 */
const PathItemList = ({pathItemList = []}) => (
  <table>
    <tr>
      <th>Name</th>
      <th>Modified</th>
    </tr>
    { 
      pathItemList.map(pathItem =>
      <PathItem
        {...pathItem} // パスアイテムの描画を呼び出す
      />
      )
    }
  </table>
)
/* パスアイテムリストの型の定義*/
PathItemList.propTypes = {
  pathItemList: PropTypes.arrayOf(PropTypes.shape({
    name: PropTypes.string.isRequired,
    modified: PropTypes.string.isRequired,
    isDirectory: PropTypes.bool.isRequired
  }).isRequired).isRequired,
}
/* パスアイテムの描画 */
const PathItem = ({ name, modified, isDirectory }) => (
  <tr>
    <td>
      {/* 名前 */name}{/*ディレクトリなら[/]を付ける*/isDirectory ? "/" : ""}
    </td>
    <td>
      {/* 更新日 */modified}
    </td>
  </tr>
)
/* パスアイテムの型の定義 */
PathItem.propTypes = {
  name: PropTypes.string.isRequired,
  modified: PropTypes.string.isRequired,
  isDirectory: PropTypes.bool.isRequired
}

export default PathItemList

import React from 'react'
import PropTypes from 'prop-types'

const divStyle = { "list-style": "none" }
/* フォルダツリーアイテムの描画 */
const FolderTreeItem = React.createClass({
  /* フォルダ展開/折畳イベントのハンドラ */
  onExpandClick: function(fullpath, isExpanded) {
    this.props.onExpandClick(fullpath, isExpanded);
  },
  /* パスリスト表示イベントのハンドラ */
  onFolderClick: function(fullpath) {
    this.props.onFolderClick(fullpath);
  },
  /* フォルダツリーアイテムの描画処理 */
  render : function() {
    let folderTreeItem = this.props.folderTreeItem
    return <div style={divStyle}>
     <li>
       <a onClick={() => { // 展開/折畳イベントの実行（bubblingさせないようbindする）
         this.onExpandClick.bind(this, folderTreeItem.fullpath, folderTreeItem.isExpanded)
         this.onExpandClick(folderTreeItem.fullpath, folderTreeItem.isExpanded)
        }}>
         {/* (+), (-)表示 */ 
           folderTreeItem.isExpanded ? <font color='red'>(-)</font> : <font color='blue'>(+)</font>
         }
        </a>
        &nbsp;
        <a onClick={()=>{ // パス一覧表示イベントの実行（bubblingさせないようbindする）
          this.onFolderClick.bind(this, folderTreeItem.fullpath)
          this.onFolderClick(folderTreeItem.fullpath)
         }}>
          {/* フォルダ名 */folderTreeItem.name} 
        </a>
        <ul>
        { // 子フォルダツリーアイテムの再帰描画
          folderTreeItem.children.map(child =>
            <FolderTreeItem 
              folderTreeItem={child} 
              onExpandClick={this.props.onExpandClick} 
              onFolderClick={this.props.onFolderClick} />
          )
        }
        </ul>
      </li>
    </div>
  }
})
/* フォルダツリーアイテムの型の定義*/
FolderTreeItem.propTypes = {
  folderTreeItem: PropTypes.object.isRequired,
  onFolderClick: PropTypes.func.isRequired,
  onExpandedClick: PropTypes.func.isRequired,
}

export default FolderTreeItem

export const EXPAND_ROOT   = 'ルートフォルダの展開イベント'
export const TOGGLE_EXPAND = 'フォルダの展開/折畳イベント'
export const SHOW_PATHLIST = 'フォルダの一覧表示イベント'
/* ルートフォルダの展開イベント(action) */
export const openButtonClickEvent = (rootpath) => ({
  type: EXPAND_ROOT,
  rootpath,
})
/* フォルダの展開/折畳イベント(action) */
export const toggleExpandClickEvent = (fullpath, isExpanded) => ({
  type: TOGGLE_EXPAND,
  fullpath,
  isExpanded,
})
/* フォルダの一覧表示イベント(action) */
export const folderTreeItemClickEvent = (fullpath) => ({
  type: SHOW_PATHLIST,
  fullpath,
})

import {SHOW_PATHLIST} from '../actions'
/* パスリストの初期値 */
const initialState = []
/* パスリストの状態の更新 */
const pathItemList = (state = initialState, action) => {
  console.log("--イベント(action)の内容---")
  console.log(JSON.stringify(action))
  console.log("--------------------------")
  console.log("--変更前の状態(state)------")
  console.log(state)
  console.log("--------------------------")
  switch (action.type) {
    case SHOW_PATHLIST: // 'フォルダの一覧表示イベント'
      let fullpath = action.fullpath
      console.log('* 表示するフォルダパス=' + fullpath)
      const fs = window.require('fs')
      const path = window.require('path')
      let names = fs.readdirSync(fullpath)
      let pathItemList = []
      names.map(name => {
        let stat = fs.statSync(path.join(fullpath, name))
        let modified = toLocaleTimeString(stat.mtime)
        let isDirectory = stat.isDirectory()
        pathItemList.push(createPathItem(name,modified,isDirectory))
      })
      console.log("* 表示するパス一覧の数=" + pathItemList.length)
      return pathItemList
    default:
      return state
  }
}
/* パスアイテムの作成 */
const createPathItem = (name, modified, isDirectory) => {
  return {
    name: name,
    modified: modified,
    isDirectory: isDirectory,
  }
}
/* 時刻の文字列変換 */
const toLocaleTimeString = ( date ) => {
  return [
      date.getFullYear(),
      date.getMonth() + 1,
      date.getDate()
      ].join( '/' ) + ' '
      + date.toLocaleTimeString();
}

export default pathItemList

import {EXPAND_ROOT, TOGGLE_EXPAND} from '../actions'
/* フォルダアイテムの初期値 */
const initialState = {
  name:'アドレスバーにフォルダパスを貼り付けて「開く」を押してください', 
  fullpath:'', 
  children:[],
  isExpanded: false,
}
/* フォルダアイテムの状態更新 */
const folderTreeItem = (state = initialState, action) => {
  console.log("--イベント(action)の内容---")
  console.log(JSON.stringify(action))
  console.log("--------------------------")
  console.log("--変更前の状態(state)------")
  console.log(state)
  console.log("--------------------------")
  switch (action.type) {
    case EXPAND_ROOT: // 'ルートフォルダの展開イベント'
      const path = window.require('path')
      let name = path.basename(action.rootpath)
      let folderTreeItem = createFolderTreeItem(name, action.rootpath)
      return folderTreeItem
    case TOGGLE_EXPAND: // 'フォルダの展開/折畳イベント'
      if( action.fullpath === '')
        return state
      console.log('* 対象のフォルダパス=' + action.fullpath)
      console.log('* フォルダの展開状態=' + action.isExpanded)
      if(action.isExpanded === false) {
        let children = getChildFolderTreeItemList(action.fullpath)
        console.log("* 展開する 子の数=" + children.length)
        return toggleExpandChildren(state, action.fullpath, true, children)
      }
      else {
        console.log("* 折り畳む")
        return toggleExpandChildren(state, action.fullpath, false, [])
      }
    default:
      return state
  }
}
/* フォルダアイテムの作成 */
const createFolderTreeItem = (name, fullpath, children = []) => {
  return {
    name: name,
    fullpath: fullpath,
    children: children,
    isExpanded: false,
  }
}
/* 子のフォルダアイテム一覧の取得 */
const getChildFolderTreeItemList = (folderPath) => {
  const fs = window.require('fs')
  const path = window.require('path')
  let names = fs.readdirSync(folderPath)
  let children = []
  names.map(name => {
    let fullpath = path.join(folderPath, name)
    let stat = fs.statSync(fullpath)
    if(stat.isDirectory()) {
        children.push(createFolderTreeItem(name,fullpath))
    }
  })
  return children
}
/* サブフォルダと展開状態の入れ替え */
const toggleExpandChildren = (state, fullpath, isNewExpanded, children) => {
  let newState = Object.assign({}, state)
  seekAndUpdateChildren(newState, fullpath, isNewExpanded, children)
  return newState
}
/* 子のフォルダツリーアイテムの検索と更新(再帰検索) */
const seekAndUpdateChildren = (folderTreeItem, fullpath, isNewExpanded, children) => {
  if( folderTreeItem.fullpath === fullpath ) {
     folderTreeItem.children = children
     folderTreeItem.isExpanded = isNewExpanded
     return true
  }
  folderTreeItem.children.map( child => {
     if( seekAndUpdateChildren(child, fullpath, isNewExpanded, children) )
       return true
  })
  return false
}

export default folderTreeItem

import React from 'react'
import { render } from 'react-dom'
import { createStore } from 'redux'
import { Provider } from 'react-redux'
import App from './components/App'
import explorerApp from './reducers'
/* 状態遷移(reducers)をstoreとして取得 */
const store = createStore(explorerApp)
/* アプリケーションをstoreを指定して描画 */
render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
)

  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }