事前準備 : コンポーネント階層の変更 (STEP 2 : ユーザ認証を行なって、自分だけが読み込めて書き込めるタスク管理アプリを作成する - React + Redux + Firebase チュートリアル)
★前回の記事
認証機能作成の前に、認証用のコンポーネントの作成とタスク関連のコンポーネントに分けます。
現在のコンポーネントツリー
コードを変更します。
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;
コンポーネント階層の変更が完了しました。
★次回の記事
★目次