増幅＆反応:アプリを作成する

このチュートリアルでは、完全なスタックアプリケーションを構築する方法について説明します.
我々がするものは、Aをつくるために一歩ずつ行くことですTodos あなたのフロントエンドとあなたのバックエンドのための増幅のための反応を使用してアプリケーション.
あなたが動けなくなるならば、どんな質問か、またはちょうどあなた自身のような他のアンプ開発者にHiを言いたいですDiscord !

目次

ステップ1 -新規ディレクトリの作成

ステップ2 -空白のキャンバスから始まる

ステップ3 -コンポーネントの追加

ステップ4 -それを一緒に置く

ステップ5 -ラップアップ

ステップ1 -新規ディレクトリの作成

create-react-app 私たちのフロントエンドのアプリケーションのための新しいディレクトリを作成するだけでなく、すべてのビルドツールの設定の重いリフティングを処理します.

フロントエンドを含む新しいフォルダーを作成し、最終的にバックエンド、アプリケーションを作成し、新しい端末を開き、コマンドを実行します.

npx create-react-app web

を含む新しく作成されたフォルダでweb/ クリエイトアpackage.json ファイルをコピーしてコピーします.

{
  "scripts": {
    "start": "npm --prefix web start",
    "postinstall": "npm ci --prefix web"
  }
}

その後、.gitignore ファイルをコピーしてコピーします.

/node_modules

最後に端末に戻りコマンドを実行します.

npm run start

次の画面が表示されます.

ステップ2 -空白のキャンバスから始まる

入門アプリケーションは素晴らしいですが、我々は空白のキャンバスで起動する必要があります.

開放するamplication-react ディレクトリを選択します.

開くweb/src/App.css このファイルの内容をすべて削除します.ファイル削除web/src/logo.svg .

オープンweb/src/index.css このファイルの内容を次のように置き換えます.

web/src/index.css

:root {
  --spacing: 4px;
  --font-size: 20px;
  --on-primary: #ffffff;
  --on-secondary: #ffffff;
  --primary: #f44336;
  --secondary: #2196f3;
  --text: #212121;
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
    "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans",
    "Helvetica Neue", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

button {
  border: none;
  background-color: var(--secondary);
  color: var(--on-secondary);
  font-size: var(--font-size);
  height: 60px;
  margin: var(--spacing) 0;
  max-width: 450px;
  width: 100%;
}

button[type="submit"] {
  background-color: var(--primary);
  color: var(--on-primary);
  text-transform: uppercase;
}

button:hover {
  filter: brightness(80%);
}

button:active {
  filter: brightness(120%);
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
    monospace;
}

form {
  align-items: center;
  display: flex;
  flex-direction: column;
  margin: var(--spacing) 0;
  padding: calc(4 * var(--spacing));
}

input {
  background: transparent;
  border: 1px solid var(--text);
  border-radius: 3px;
  line-height: 30px;
  font-size: var(--font-size);
  margin: var(--spacing) 0;
  max-width: 416px;
  padding: calc(4 * var(--spacing));
  width: 100%;
}

input[type="checkbox"] {
  height: 48px;
  margin: var(--spacing);
  width: 48px;
}

li {
  display: flex;
  height: calc(48px + calc(2 * var(--spacing)));
  max-width: 450px;
  width: 100%;
}

li.completed {
  text-decoration: line-through;
}

span {
  flex: 1;
  font-size: var(--font-size);
  line-height: calc(48px + calc(2 * var(--spacing)));
}

ul {
  align-items: center;
  display: flex;
  flex-direction: column;
  list-style-type: none;
  padding: calc(4 * var(--spacing));
}

オープンweb/src/App.js このファイルの内容を以下のように置き換えます.

web/src/App.js

import "./App.css";

function App() {
  return <div></div>;
}

export default App;

ステップ3 -コンポーネントの追加

このToDoリストのアプリを構築するには、いくつかのコンポーネントが必要になります.

タスク

私たちの最初のコンポーネントは、個々のタスクをレンダリングするために使用されます.パラメータとして取り込む

task - タスクオブジェクトそのもの.次のプロパティーがあります.

text - タスク自体の文字列.

completed - タスクが完了した場合に追跡するブール値のプロパティ.

id - タスクを識別するユニークな番号.

toggleCompleted - この関数は、ユーザーがチェックボックス上でタップし、タスクの状態を切り替えます.

次のファイルを作成します.web/src/Task.js

import { useState } from "react";

export default function Task({ task, toggleCompleted }) {
  const [completed, setCompleted] = useState(task.completed);

  return (
    <li className={completed ? "completed" : "incompleted"}>
      <span>{task.text}</span>
      <input
        type="checkbox"
        checked={completed}
        onClick={() => toggleCompleted(task.id)}
        onChange={() => setCompleted(task.completed)}
        readOnly
      />
    </li>
  );
}

タスク

番目のコンポーネントは、タスクのリストをレンダリングするために使用されます.パラメータとして取り込む

tasks - タスクの配列.

toggleCompleted - この関数は、ユーザーがTask コンポーネントは、タスクの状態を切り替えます.

次のファイルを作成します.web/src/Tasks.js

import Task from "./Task";

export default function Tasks({ tasks, toggleCompleted }) {
  return (
    <ul>
      {tasks.map((task) => (
        <Task key={task.id} task={task} toggleCompleted={toggleCompleted} />
      ))}
    </ul>
  );
}

クレタネット

最終的なコンポーネントは、ユーザーが新しいタスクを作成できるようにするフォームです.パラメータとして取り込む

addTask - この関数は、ユーザーが作成したい新しいタスクをフォームに送信すると表示されます.

次のファイルを作成します.web/src/CreateTask.js

import { useState } from "react";

export default function CreateTask({ addTask }) {
  const [task, setTask] = useState("");

  const handleChange = (e) => {
    setTask(e.target.value);
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    addTask(task);
    setTask("");
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        placeholder="TODO"
        value={task}
        onChange={handleChange}
        required
      />
      <button type="submit">Add</button>
    </form>
  );
}

ステップ4 -それを一緒に置く

私たちのさまざまなコンポーネントを作成すると、次に一緒にそれらを置くとどのように動作を参照してください!

開くweb/src/App.js とインポートの反応useState 機能だけでなく、新しく作成CreateTask and Tasks コンポーネント.

+ import { useState } from "react";
import "./App.css";

+ import CreateTask from "./CreateTask";
+ import Tasks from "./Tasks";

にApp 関数は、私たちのタスク配列を作成しますuseState リアクティブ配列を作成するには

function App() {
+ const [tasks, setTasks] = useState([]);

また、タスクの状態を追加したり切り替えたりする方法が必要です.

function App() {
  const [tasks, setTasks] = useState([]);

+ const createTask = (text, id) => ({
+   id,
+   text,
+   completed: false,
+ });
+
+ const addTask = (task) => {
+   const temp = [...tasks];
+   temp.push(createTask(task, tasks.length));
+   setTasks(temp);
+ };
+
+ const toggleCompleted = (id) => {
+   let temp = [...tasks];
+   const i = temp.findIndex((t) => t.id === id);
+   temp[i].completed = !temp[i].completed;
+   setTasks(temp);
+ };

すべてのロジックとコンポーネントの場所で、我々は最終的に我々のコンポーネントをレンダリングします!return文を次のように置き換えます.したがって、タスクリストを表示し、タスクをタスクに追加できます.

return (
  <div>
    <CreateTask addTask={addTask} />
    <Tasks tasks={tasks} toggleCompleted={toggleCompleted} />
  </div>
);

ステップ5 -ラップアップ

前方に移動し、タスクを追加したり、完全としてマークしてみてください.

唯一の問題は、これらのタスクがどこに保存されていないということですので、あなたが行っているページPOOFを更新するとき.次のステップでは、我々のデータベースに我々のタスクを保存できるように増幅を使用してバックエンドを作成します!
次の週にステップ2をチェックしてくださいAmplication docs site 今すぐフルガイド!
この手順の変更を表示するにはvisit here .