详细介绍了React中要使用的文件、其用途以及组件的实现

标签中写下了“Hello React”的内容。

为什么会变成居中呢？原因是因为App.css生效了。通过修改其中的描述可以改变显示的内容。

此外，React还内置了热重载功能，只要有任何更改，它就会自动地反映这些更改。

React成为开发的基础，取决于组件。

import './App.css';

function App() {
  return (
  <div className="App">
    <TodoList/>
  </div>
  );
}

export default App;

在App.js文件中，我们创建了一个名为“TodoList”的组件选项卡，将其放置在div标签内。然而，目前还没有定义“TodoList”，因此会返回一个错误。

为了实现组件，创建一个名为“TodoList.jsx”的文件在src目录中。
如果使用VScode，可以使用下方列出的扩展功能来更方便地创建组件。

安装这个扩展，然后在”TodoList.jsx”文件中输入”rafce”并按下转换按钮，它会自动创建组件的框架。

import React from 'react'

const TodoList = () => {
  return (
    <div>TodoList</div>
  )
}

export default TodoList

const TodoList = () => {
  return (
    <div>TodoList</div>
  )
}

这部分是一个组件，当在App.js中调用””时，会返回并显示这段代码。

重要な事項は、”TodoList.jsx”の記述の末尾に”export default TodoList”と記述し、他のいかなるファイルからでも利用できるようにエクスポートする必要があります。逆に、コンポーネントを使用する側は、コードの一番上にインポートの記述を行う必要があります。App.jsで利用するためには、この手順を実行する必要があります。

import TodoList from './TodoList';

只需输入这个，之前的错误就会被解决，”会显示出来。

通过将组件分开，可以将角色添加到选项卡的名称中，使其更易读。此外，每个组件都可以单独创建、管理和修改，因此在工作分配和组件级更改方面非常方便，这在开发过程中非常有用。

相反地，共享变量会变得复杂，因此增加过多的组件是不好的。

开始逐步实现用于创建待办事项应用的功能。

在App.js文件中，

import './App.css';
import TodoList from './TodoList';

function App() {
  return (
  <>
    <TodoList/>
    <input type="text" />
    <button>タスクを追加</button>
    <button>完了したタスクの削除</button>
    <div>残りのタスク:0</div>
  </>
  );
}

export default App;

以以下方式添加。
此外，由于return下方是用JSX编写的，因此无法并列化顶层元素。
因此，如果希望并列化，需要用空标签(React.Fragment)将其括起来进行描述。

为了管理任务，我将使用名为useState()的功能。这是React Hooks的一部分，但我不太了解详细情况，所以接下来会进行调查并做总结。只是粗略地查了一下感觉可能会受伤，所以先不查了。

要使用这个，必须在第一行中导入”useState”。

import React, { useState } from "react";

useState()用于管理和监视变量。
将变量命名为”todos”，并将任务作为元素逐步添加到其中，并存储具有名称(name)、ID(id)、以及是否已完成(completed)等属性的对象。

只有当使用useState()时，在”todos”列表中添加新任务并且变量发生更改时才会进行重新渲染。

然后，”setTodos”用于添加元素到”todos”等情况时启动并重新定义。

const [todos, setTodos] = useState([]);

另外，在名为“todos”的变量数据中，想要在组件中按照”TodoList”来处理。
在那时，在”TodoList”标记内传递数据。我们在左边将这个已命名为todos的变量叫做props。
通过以下描述，意味着请将名为todos的这个变量传递到该组件中。在右边，请输入你想传递的变量名称即可。

<TodoList todos={todos} />

并且，要在TodoList组件中接收props，可以在组件内的第一个括号()内写上想要的props名称（例如，props）。然后，在想要使用该变量的地方，使用”{props.todos}”，即可使用该变量中存储的值。

通过使用大括号来描述，可以用JavaScript来编写JSX。

import React from 'react'

const TodoList = (props) => {
  return (
    <div>{props.todos}</div>
  )
}

export default TodoList

在 App.js 中的 useState() 中指定默认值。将 “[“待办事项1”, “待办事项2″]” 添加为列表并显示在浏览器中。

import React, { useState } from "react";
import TodoList from './TodoList';

function App() {
  const [todos, setTodos] = useState(["Todo1", "Todo2"]);

  return (
  <>
    <TodoList todos={todos} />
    <input type="text" />
    <button>タスクを追加</button>
    <button>完了したタスクの削除</button>
    <div>残りのタスク:0</div>
  </>
  );
}

export default App;

而一般来说，通常使用花括号将{待办事项}传递，并进行使用。这样一来，描述更简洁，更容易理解。

import React from 'react'

const TodoList = ({ todos }) => {
  return (
    <div>{todos}</div>
  )
}

export default TodoList

“TodoList”组件将添加的”Todos”存储为一个列表。换句话说，它是一个组件，用于存储多个”Todo”组件。

因此，需要逐个取出存储在”todos”中的任务，并进行显示。为此，我们将使用map函数来取出”todos”的每个元素，并编写Todo组件。

return todos.map((todo) => (
    <Todo todo={todo}/>
  ));

通过在”TodoList.jsx”文件的返回值中进行类似的描述，可以逐个提取元素，每次启动一个名为”Todo”的组件。同时也要设置props。

然后，在src目录下创建一个名为Todo.jsx的文件，并编写”rafce”以创建一个组件的模板。

在”TodoList.jsx”文件中，导入Todo组件并将接收到的”todo”内容显示出来。

src/todo.jsx 源文件

import React from 'react'

const Todo = ({ todo }) => {
  return (
    <div>{todo}</div>
  )
}

export default Todo

src/TodoList.jsx 可以将其汉译为 “清单.jsx”。

import React from 'react';
import Todo from "./Todo";

const TodoList = ({ todos }) => {
  return todos.map((todo) => (
    <Todo todo={todo}/>
  ));
}

export default TodoList

通过这样做，在浏览器上会得到如下的显示。

由于内容稍微多了一点，所以后半部分明天更新。