序章
React は、アプリケーションのインタラクティブなユーザーインターフェイスを作成するために使用できるフロントエンドJavaScriptライブラリです。
このチュートリアルでは、ToDoアプリケーションを作成します。 アプリケーションは、タスクを表示し、新しいタスクを追加し、タスクを完了としてマークし、タスクを削除する必要があります。 これらのアクションは、 CRUD(作成、読み取り、更新、および削除)アプリケーションの4つの側面に触れます。
このタイプのプロジェクトは、多くの場合、クラスコンポーネントを使用して実行されますが、このアプリケーションは、代わりに ReactHooksを統合します。 React Hooksを使用すると、機能コンポーネントに状態を持たせ、ライフサイクルメソッドを使用できるため、Classコンポーネントの使用を回避し、よりモジュール化された読みやすいコードを使用できます。
完成したプロジェクトはCodeSandboxでチェックアウトできます。
前提条件
このチュートリアルを完了するには、次のものが必要です。
- Node.jsはローカルにインストールされます。これは、Node.jsのインストール方法とローカル開発環境の作成に従って実行できます。
- Reactにある程度精通していると有益ですが、必須ではありません。 React.jsシリーズのコーディング方法をご覧ください。
ステップ1—Reactアプリを起動する
まず、新しいアプリを作成する必要があります。 ターミナルウィンドウで、新しいアプリケーションを配置する場所に移動し、次のように入力します。
- npx create-react-app react-to-do
注: React 16.8より前は、Reactフックを利用するにはReact16.7のアルファビルドをインストールする必要がありました。 この記事の執筆時点で、 Create React App は、フックをサポートする最新の安定バージョンのReact(16.13.1)をインストールします。
次に、新しいプロジェクトディレクトリに移動します。
- cd react-to-do
次に、プロジェクトを実行します。
- npm start
案内する localhost:3000
ブラウザで回転するReactロゴを確認してください。
これでアプリケーションがセットアップされ、アプリの残りの部分の作成を続行できます。
ステップ2—アプリケーションのスタイリング
スタイリングはこのチュートリアルの焦点ではありませんが、やることタスクを表示するのに役立ちます。
開ける App.css
コードエディタで:
- nano src/App.css
このファイルの内容を、アプリ全体で使用する3つのクラスに置き換えます。
.app {
background: #209cee;
height: 100vh;
padding: 30px;
}
.todo-list {
background: #e8e8e8;
border-radius: 4px;
max-width: 400px;
padding: 5px;
}
.todo {
align-items: center;
background: #fff;
border-radius: 3px;
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.15);
display: flex;
font-size: 12px;
justify-content: space-between;
margin-bottom: 6px;
padding: 3px 10px;
}
これにより、次のCSSクラスが作成されます app
, todo-list
、 と todo
. それはを利用します vh
(ビューポートの高さ)単位と flexbox
プロパティ (align-items
と justify-content
).
スタイリングが完了しました。 これで、CRUDの側面を実装できます。
ステップ3—やること項目を読む
CRUDのReadの部分から始めましょう。 リストを読んで表示できるように、リストを作成する必要があります。
クラスを使用するToDoアプリケーションは、次のようになります。
class App extends Component {
state = {
todos: [
{ text: "Learn about React" },
{ text: "Meet friend for lunch" },
{ text: "Build really cool todo app" }
]
}
setTodos = todos => this.setState({ todos });
render() {
return <div></div>
}
}
React Hooksを使用するため、クラスを使用した場合とは状態が少し異なります。
開ける App.js
:
- nano src/App.js
このファイルを変更して、次の行コードをに追加します App
成分:
import React from 'react';
import logo from './logo.svg';
import './App.css';
function App() {
const [todos, setTodos] = React.useState([
{ text: "Learn about React" },
{ text: "Meet friend for lunch" },
{ text: "Build really cool todo app" }
]);
return (
// ...
);
}
export default App;
コンポーネントは機能コンポーネントです。 以前のバージョンのReactでは、機能コンポーネントは状態を処理できませんでしたが、現在はフックを使用することで処理できます。
- 最初のパラメータ、
todos
、はあなたがあなたの州に名前を付けようとしているものです。 - 2番目のパラメーター、
setTodos
は、状態を設定するために使用するものです。
のフック useState
Reactがコンポーネントの状態またはライフサイクルにフックするために使用するものです。 次に、オブジェクトの配列を作成し、状態の始まりを取得します。
後で使用できるコンポーネントを作成する必要があります return
メインの App
成分。 あなたはそれを呼ぶでしょう Todo
そしてそれは通過します todo
と表示 text
ToDoの一部(todo.text
).
再訪 App.js
新しいを追加します Todo
前のコンポーネント App
成分:
import React from 'react';
import logo from './logo.svg';
import './App.css';
function Todo({ todo }) {
return (
<div className="todo">
{todo.text}
</div>
);
};
function App() {
// ...
}
export default App;
アイテムのリストを作成しましょう。
再訪 App.js
の内容を置き換えます return
これらの新しいコード行で:
function App() {
// ...
return (
<div className="app">
<div className="todo-list">
{todos.map((todo, index) => (
<Todo
key={index}
index={index}
todo={todo}
/>
))}
</div>
</div>
);
}
JavaScriptメソッドmap()を使用すると、マッピングして新しいアイテムの配列を作成できます。 todo
状態からのアイテムとインデックスによるそれらの表示。
これにより、 <div>
為に app
、 <div>
為に todo-list
、およびの地図 todos
に Todo
コンポーネント。
この時点で、を削除することも可能です logo.svg
使用されなくなるため。
全体 src/App.js
これまでのところ、ファイルは次のようになります。
import React from "react";
import "./App.css";
function Todo({ todo }) {
return (
<div className="todo">
{todo.text}
</div>
);
};
function App() {
const [todos, setTodos] = React.useState([
{ text: "Learn about React" },
{ text: "Meet friend for lunch" },
{ text: "Build really cool todo app" }
]);
return (
<div className="app">
<div className="todo-list">
{todos.map((todo, index) => (
<Todo
key={index}
index={index}
todo={todo}
/>
))}
</div>
</div>
);
}
export default App;
Webブラウザでアプリケーションを開きます。 3つのやること項目が表示されます。
これでデータを読み取っており、CRUDの他の側面に進むことができます。
ステップ4—ToDoアイテムの作成
それでは、アプリケーションにToDoアプリの新しいアイテムを作成する権限を与えましょう。
にいる間 App.js
ファイルには、いくつか追加する必要があります。
まず、という別のコンポーネントを追加します TodoForm
. このコンポーネントでは、次のことを行います。
- 入力フィールドの空の状態から開始します。
- 状態を設定することでフォームを更新できます。
- 送信を処理します。
状態を設定するには、次のように記述します。
const [value, setValue] = React.useState("");
1つ目は「値」で、2つ目は状態の設定方法です。 状態は空から始まり、状態に物事を追加すると、やること項目のリストに追加されます。
追加する必要があります handleSubmit
あなたを扱うことができる変数 addTodo
関数を実行し、アイテムをリストに追加します。 入力ボックスに何も入っておらず、ユーザーがを押した場合 ENTER
、空のアイテムをリストに追加しないようにします。
入力ボックスのあるフォームに機能を追加します。
// ...
function TodoForm({ addTodo }) {
const [value, setValue] = React.useState("");
const handleSubmit = e => {
e.preventDefault();
if (!value) return;
addTodo(value);
setValue("");
};
return (
<form onSubmit={handleSubmit}>
<input
type="text"
className="input"
value={value}
onChange={e => setValue(e.target.value)}
/>
</form>
);
}
function App() {
// ...
}
// ...
この新しいを追加します TodoForm
あなたのコンポーネント App
成分:
function App() {
// ...
return (
<div className="app">
<div className="todo-list">
{todos.map((todo, index) => (
<Todo
key={index}
index={index}
todo={todo}
/>
))}
<TodoForm addTodo={addTodo} />
</div>
</div>
);
}
を構築しましょう addTodo
今機能します。
内にとどまる App.js
、の状態で App
コンポーネントの場合、関数は既存のアイテムのリストを取得し、新しいアイテムを追加して、その新しいリストを表示することができます。
function App() {
// ...
const addTodo = text => {
const newTodos = [...todos, { text }];
setTodos(newTodos);
};
return(
// ...
);
}
ないことに注意してください this.state
. 新しいReactフックを使用すると、 this.state
新しいフックは、それが特定の場所で暗示されることを理解しているからです。
コードにもスプレッド演算子があります。 前の3つのドット todos
リストをコピーして、新しいToDoアイテムを追加できるようにします。 次に、前に設定したキーワードを使用して、状態を次のように設定します。 setTodos
.
Webブラウザでアプリケーションを開きます。 3つのやること項目が表示されているはずです。 新しいやること項目を追加するためのフィールドもあるはずです。
これでデータを作成し、CRUDの他の側面に進むことができます。
ステップ5—ToDoアイテムの更新
完了したら、やることリストの項目を消す機能を追加しましょう。
あなたの状態 App
「完了」ステータスを変更できるようにするには、コンポーネントに少し余分なものが必要です。 オブジェクトのリストに別のキーと値のペアを追加します。
追加することにより isCompleted: false
値、あなたはそれをに設定します false
まず、プロンプトが表示されたら、次のように変更します true
.
再訪 App.js
と追加 isCompleted
あなたの州へ:
function App() {
const [todos, setTodos] = React.useState([
{
text: "Learn about React",
isCompleted: false
},
{
text: "Meet friend for lunch",
isCompleted: false
},
{
text: "Build really cool todo app",
isCompleted: false
}
]);
// ...
}
あなたはのような機能が必要になります addTodo
機能しますが、これはアイテムを「完了」としてマークすることができます。 あなたはあなたがしたのと同じようなことをするでしょう addTodo
、スプレッド演算子を使用して現在のアイテムのリストを取得するようなものです。 この関数では、を変更します isCompleted
ステータス true
それが完了したことを知るためです。 次に、状態を更新し、状態をに設定します newTodos
.
次のコードを更新します。
function App() {
// ...
const completeTodo = index => {
const newTodos = [...todos];
newTodos[index].isCompleted = true;
setTodos(newTodos);
};
return (
// ...
)
}
を使用して completeTodo
の中に Todo
機能、あなたはその機能を使用することができます。 完了ボタンをクリックすると、 textDecoration: line-through
スタイリングとアイテムを取り消します。
三項演算子を使用して、アイテムを完成させ、リストを更新します。
function Todo({ todo, index, completeTodo }) {
return (
<div
className="todo"
style={{ textDecoration: todo.isCompleted ? "line-through" : "" }}
>
{todo.text}
<div>
<button onClick={() => completeTodo(index)}>Complete</button>
</div>
</div>
);
}
追加 completeTodo
の中に Todo
返品の一部 App
成分:
function App() {
// ...
return (
<div className="app">
<div className="todo-list">
{todos.map((todo, index) => (
<Todo
key={index}
index={index}
todo={todo}
completeTodo={completeTodo}
/>
))}
<TodoForm addTodo={addTodo} />
</div>
</div>
);
}
Webブラウザでアプリケーションを開きます。 3つのやること項目が表示されます。 やること項目を完了としてマークするための完了ボタンもあります。
これでデータが更新され、CRUDの最後の側面に進むことができます。
ステップ6—ToDoアイテムの削除
やることリストの項目が削除されたときに削除する機能を追加しましょう。
ビルドします removeTodo
X をクリックしてアイテムを削除すると、そのアイテムが削除されるように機能します。 その機能は、状態の下にある他の人によって配置されます App
成分;
function App() {
// ...
const removeTodo = index => {
const newTodos = [...todos];
newTodos.splice(index, 1);
setTodos(newTodos);
};
return (
// ...
)
}
これで removeTodo
関数の場合、再びspread演算子を使用しますが、現在のリストを取得すると、アイテムの配列から選択したインデックスをスプライシングします。 それが削除されたら、次のように設定して新しい状態に戻ります setTodos
することが newTodos
.
あなたの中で Todo
関数の場合、やること項目を削除するためのボタンを追加する必要があります。
function Todo({ todo, index, completeTodo, removeTodo }) {
return (
<div
className="todo"
style={{ textDecoration: todo.isCompleted ? "line-through" : "" }}
>
{todo.text}
<div>
<button onClick={() => completeTodo(index)}>Complete</button>
<button onClick={() => removeTodo(index)}>x</button>
</div>
</div>
);
}
追加 removeTodo
の中に Todo
返品の一部 App
成分:
function App() {
// ...
return (
<div className="app">
<div className="todo-list">
{todos.map((todo, index) => (
<Todo
key={index}
index={index}
todo={todo}
completeTodo={completeTodo}
removeTodo={removeTodo}
/>
))}
<TodoForm addTodo={addTodo} />
</div>
</div>
);
}
Webブラウザでアプリケーションを開きます。 3つのやること項目が表示されます。 やること項目を削除するためのXボタンもあります。
これでデータが削除され、CRUDの4つの側面すべてが実装されました。
ステップ7—アプリを完成させる
あなたがまとめた後 Todo
コンポーネント、 TodoForm
コンポーネント、および App
コンポーネント、あなたの App.js
ファイルは次のようになります。
import React from "react";
import "./App.css";
function Todo({ todo, index, completeTodo, removeTodo }) {
return (
<div
className="todo"
style={{ textDecoration: todo.isCompleted ? "line-through" : "" }}
>
{todo.text}
<div>
<button onClick={() => completeTodo(index)}>Complete</button>
<button onClick={() => removeTodo(index)}>x</button>
</div>
</div>
);
}
function TodoForm({ addTodo }) {
const [value, setValue] = React.useState("");
const handleSubmit = e => {
e.preventDefault();
if (!value) return;
addTodo(value);
setValue("");
};
return (
<form onSubmit={handleSubmit}>
<input
type="text"
className="input"
value={value}
onChange={e => setValue(e.target.value)}
/>
</form>
);
}
function App() {
const [todos, setTodos] = React.useState([
{
text: "Learn about React",
isCompleted: false
},
{
text: "Meet friend for lunch",
isCompleted: false
},
{
text: "Build really cool todo app",
isCompleted: false
}
]);
const addTodo = text => {
const newTodos = [...todos, { text }];
setTodos(newTodos);
};
const completeTodo = index => {
const newTodos = [...todos];
newTodos[index].isCompleted = true;
setTodos(newTodos);
};
const removeTodo = index => {
const newTodos = [...todos];
newTodos.splice(index, 1);
setTodos(newTodos);
};
return (
<div className="app">
<div className="todo-list">
{todos.map((todo, index) => (
<Todo
key={index}
index={index}
todo={todo}
completeTodo={completeTodo}
removeTodo={removeTodo}
/>
))}
<TodoForm addTodo={addTodo} />
</div>
</div>
);
}
export default App;
これで、CRUDの4つの側面すべてに対応するアプリケーションができました。 To Doアイテムの作成、To Doアイテムの読み取り、To Doアイテムの更新、およびToDoアイテムの削除。
結論
To Doアプリは、Web開発におけるCRUDに関して、優れたリマインダーまたは出発点になる可能性があります。 情報の読み取り、新しい情報の作成、既存の情報の更新、および情報の削除ができることは、どのアプリケーションでも強力です。
このチュートリアルでは、 React Hooksを使用してCRUDTo-Doリストアプリを作成しました。これにより、コードを明確、簡潔、わかりやすくすることができます。
Reactの詳細については、Reactトピックページで演習とプログラミングプロジェクトを確認してください。