事前準備 : コンポーネント階層の変更 (STEP 2 : ユーザ認証を行なって、自分だけが読み込めて書き込めるタスク管理アプリを作成する - React + Redux + Firebase チュートリアル)

★前回の記事

yucatio.hatenablog.com

認証機能作成の前に、認証用のコンポーネントの作成とタスク関連のコンポーネントに分けます。

現在のコンポーネントツリー

新しいコンポーネントツリー(緑色が新規コンポーネント)

コードを変更します。

src/components/App.js

import React from 'react'
import Login from './Login'
import TodoComponent from './TodoComponent'

const App = () => (
  <div>
    <Login />
    <TodoComponent />
  </div>
)

export default App;

src/components/TodoComponent.jsを新規作成します。

import React from 'react'
import Footer from './Footer'
import NoticeForTodo from './NoticeForTodo'
import AddTodo from '../containers/AddTodo'
import VisibleTodoList from '../containers/VisibleTodoList'

const TodoComponent = () => (
  <div>
    <AddTodo />
    <NoticeForTodo />
    <VisibleTodoList />
    <Footer />
  </div>
)

export default TodoComponent;

空の文字列を返すLoginコンポーネントを用意します。

src/components/Login.js

import React from 'react'

const Login = () => (
  ''
)

export default Login;

コンポーネント階層の変更が完了しました。

★次回の記事

yucatio.hatenablog.com

★目次

yucatio.hatenablog.com