★前回の記事
componentのファイルが多くなり、管理しづらくなってきたので、画面パーツごとにディレクトリを分けます。
階層の移動と構成
以下に、src/components
以下のファイルの移動先を示します。
ファイル名 | 移動先 |
---|---|
App.js | App.js (変更なし) |
NoMatch.js | NoMatch.js (変更なし) |
Dashboard.js | dashboard/index.js |
RecentUpdatedTodos.js | dashboard/recentUpdatedTodos/index.js |
UserUpdatedTodo.js | dashboard/recentUpdatedTodos/UserUpdatedTodo.js |
Login.js | login/index.js |
Navbar.js | navbar/index.js |
Footer.js | todos/Footer.js |
Link.js | todos/Link.js |
NoticeForTodo.js | todos/Notice.js |
Todo.js | todos/Todo.js |
TodoList.js | todos/TodoList.js |
TodoComponent.js | todos/index.js |
同様にsrc/containers
も移動します。
ファイル名 | 移動先 |
---|---|
AddTodo.js | todos/AddTodo.js |
FilterLink.js | todos/FilterLink.js |
VisibleTodoList.js | todos/VisibleTodoList.js |
ソースコードの修正
階層を変更したので、ソースコード中のパスも書き換えます。
src/components/App.js
import Login from './login/' import Navbar from './navbar/' import Dashboard from './dashboard/' import TodoComponent from './todos/'
src/components/dashboard/index.js
import RecentUpdatedTodos from './recentUpdatedTodos/'
src/components/login/index.js
import { loginWithGoogle, logout } from '../../actions/authActions'
src/components/todos/Footer.js
import FilterLink from '../../containers/todos/FilterLink' import { VisibilityFilters } from '../../actions/visibilityFilterActions'
src/components/todos/index.js
// 前略 import { locationChangeOnTodos } from '../../actions/todoActions' import Footer from './Footer' import Notice from './Notice' import AddTodo from '../../containers/todos/AddTodo' import VisibleTodoList from '../../containers/todos/VisibleTodoList' class TodoComponent extends React.Component { // 中略 render() { // 中略 return ( <div> {isOwnTodos && <AddTodo uid={uid} />} <Notice /> {/* 変更 */} <VisibleTodoList uid={uid} isOwnTodos={isOwnTodos} /> <Footer /> </div> ) } }
src/containers/todos/AddTodo.js
import { addTodo } from '../../actions/todoActions'
src/containers/todos/FilterLink.js
import { setVisibilityFilter } from '../../actions/visibilityFilterActions' import Link from '../../components/todos/Link'
src/containers/todos/VisibleTodoList.js
import { toggleTodo } from '../../actions/todoActions' import TodoList from '../../components/todos/TodoList'
以上でcomponentsとcontainersの階層化ができました。1つのディレクトリのファイル数が10を超えたらディレクトリ分割を検討するとよいです。
★次回の記事
★目次