React手把手体验工作坊

2 年 ago

宇, 华

3 minutes

Reactハンズオン – 中文简洁版

React实战 hands-on 练习

首先

在这篇文章中，你可以通过实践学习React的基础知识。如果你了解JavaScript并能够基本阅读，那么会更容易理解。

培训的步骤

Reactでカウントアプリ／タスク管理アプリを作ってみる

React 是什么？

React是JavaScript的库。通过使用React，可以使用自定义语法轻松地创建WEB页面。

你不用HTML或CSS来制作吗？

学习创建网页时，首先会学习使用HTML和CSS进行制作。当使用React创建网页时，最终会根据React的代码生成包括HTML和CSS文件在内的文件。具体来说，执行npm run build命令会生成一个build文件夹，其中包含了index.html和其他各种文件。换句话说，将build文件夹放在服务器上即可发布网站。

React的特点

コンポーネント単位でページを作成することができる

组件是指网页上的各个部分。例如，头部、按钮等等。

コンポーネントを再利用することで簡潔なコードになる

React的环境配置

假设已经安装了Node.js。

npm install -g create-react-app

现在React的开发环境已经准备好了。

试着用React制作计数应用／任务管理应用

创建并展示React应用程序

npm start

当您运行此命令后，服务器将启动。请打开浏览器，输入localhost:3000，您应该能够看到网站显示出来。

React应用程序的配置

在这里，我们来看一下my-app的构成是怎样的。请用编辑器打开my-app。

在文件夹中有几个文件和文件夹，但首先需要知道的是public和src这两个。

src：Reactのソースコードやそれに関連するデータを置いておくフォルダ

让我们尝试打印HelloWorld

让我们尝试显示一个只包含“HelloWorld”文字的页面，代替当前显示的页面。
1. 删除src/App.js中的

…

。
2. 取而代之，写入

HelloWorld

。

当您检查浏览器时，我认为您会看到”HelloWorld”的显示。这样，如果要更改显示的内容，需要更改返回部分。在这里，您可以使用HTML语法进行编写。

严格来说，它是一种名为JSX的语法。几乎没有和HTML之间的差异。强行说的话，唯一的区别是在JSX中，标签必须要有闭合，所以必须写成或者。

表达处理的流程

我刚刚编辑了App.js，但是修改的数据会以什么样的流程进行处理并显示出来呢？简而言之，刚刚修改的App.js数据会传递给同一层级下的index.js后，通过ReactDOM.render函数将其作为public/index.html中的

的子元素添加进去。

尝试制作一个计数应用程序

理解流程之后，让我们实际上创建一个计数应用程序。这次创建的计数应用程序是一个简单的应用程序，当按下按钮时，显示的数字会+1。

删除函数App() { … }，然后粘贴以下代码。

class App extends React.Component {
  render() {
    return (
      <div>
        <h2>タイトル</h2>
        <div>0</div>
        <button>COUNT UP</button>
      </div>
    );
  }
}

在开头部分添加import React from ‘react’;。

请检查浏览器中是否显示了计数应用程序页面。在这里，我们将 function App() { … } 删除，并将其替换为 class App extends React.Component { … }，但无论哪种方式，在 return 内部编写的元素都会显示相同的结果。我们将在稍后解释为什么要进行替换以及具体的区别。

现在，显示的页面上有标题、计数和按钮。目前，即使按下按钮，计数也不会改变。现在让我们使用React语法来添加功能。
首先，我们将更改标题。
在render() { … }上方添加以下内容

constructor(props) {
  super(props);
  this.title = "カウントアプリ";
}

将标题替换为{ this.title }

当您确认浏览器时，可能会发现标题已经变成了计数应用程序。这是因为原来{this.title}中的this.title已被替换为计数应用程序。this.title是在构造函数内定义的。

在React中，如果您在{}中写入JavaScript变量，React将会将其渲染为HTML元素。

在JavaScript的class中，可以使用{/* 注释文 */}来进行注释。

构造函数(props) { … }和super(props);的写法是JavaScript class的用法。如果你感兴趣，可以尝试搜索”javascript class 書き方”等等。另外，在React中，constructor和super的参数应传入props。一开始，你可以认为这是一种普遍的写法，不用担心。

使用State

接下来，将添加一个功能，当按下按钮时，它会进行计数增加。

在super(props)的下方添加以下内容。

this.state = {
  count: 0
};

在render()函数上方添加以下方法。

countUp() {
  this.setState({count: this.state.count + 1 });
}

替换为

{ this.state.count }

。
将替换为。

请返回到浏览器，并尝试点击按钮。我认为计数会增加。在这里，我们使用了 React 的 State 功能来管理 count 的值。State 可以被视为变量的管理位置。

用法如下。

this.setState({ 変数名: 新しい値 })で値を変更

为了增加count的值，需要执行setState方法。在这个应用中，当按下按钮时，会执行countUp方法，并在countUp方法中调用setState方法。

如果想在按钮被按下时执行函数，可以将onClick={ 実行したい関数 }添加为属性。这次我们将其设为onClick={ () => { this.countUp() } }。

创建计数应用程序到此为止，但是您还可以创建类似countDown的函数，并将其分配给按钮的onClick属性，以实现倒计时功能。

尝试创建任务管理应用

接下来，让我们来创建一个任务管理应用。这个要创建的任务管理应用将具备显示任务列表和添加任务的功能。

将以下的class App extends React.Component { … }替换为：

class App extends React.Component {
  render() {
    return (
      <div>
        <h2>タスク管理アプリ</h2>
        <input />
        <button>追加</button>
        <div>1. 本を買う</div>
        <div>2. ランニングする</div>
      </div>
    );
  }
}

请确认在浏览器中显示了任务管理应用。当前显示的任务是手动输入的，因此未实现列表功能和添加功能。

我们来添加一项列表功能。首先，我们将使用State来管理任务内容的数组。

在`render()`函数之上添加以下内容。

constructor(props) {
  super(props);
  this.state = {
    tasks: [
      "本を買う",
      "ランニングする",
      "牛乳を買う"
    ]
  }
}

使用中国普通话，将以下代码进行释义：

<div>1. 本を買う</div>
<div>2. ランニングする</div>

请用中文改写如下。

{
  this.state.tasks.map( (task, index) => {
    return <div>{ index + 1 }. { task }</div>
  })
}

当你检查浏览器时，你会发现已经显示了在State的tasks中管理的任务。下面我将按照顺序解释经过重写的内容。

2.で、tasks配列の中身を取り出して表示。

在中国，以下是对该句的一种翻译：
这个句子有点复杂，但是如果分解开来考虑，其实并不那么难。

重点是，
注意事项是，
要点是，

returnの値

以下是三个选项。

箭头函数表示法

首先是箭头函数的表示法，它是一种简洁表示传统函数的方法。

// 従来
function sayHi(name) {
  const msg = "hi " + name;
  console.log(msg);
}
sayHi("Bob"); // hi Bob

// アロー関数表記
const sayHi = (name) => {
  const msg = "hi " + name;
  console.log(msg);
};
sayHi("Bob"); // hi Bob

只要熟悉了，就不会难。现在只要你能知道有这种写法就可以了。

map方法

map方法是一个用于对数组的每个元素进行处理的方法，
可以通过数组.map(处理函数)这样的形式来调用。
例如，如果想要得到一个由数组array1的每个元素乘以2得到的新数组array2，可以按照以下方式写作。

const array1 = [2, 4, 5, 8];
const array2 = array1.map( (value) => {
  return value * 2;
});
console.log(array2); // [ 4, 8, 10, 16 ]

map方法的第一个参数是一个函数，它接收数组的元素作为其参数。如果提供了第二个参数，可以获取提取元素的索引。

返回值 zhí)

关于返回值的最后一点。在React中，可以将HTML元素视为一个值。例如，

const element = <h2>タスク管理アプリ</h2>

可以处理类似的情况。

在考虑以上因素之后，再来看一下经过2步骤替换的部分。

{
  this.state.tasks.map( (task, index) => {
    return <div>{index + 1}. {task}</div>
  })
}

我们可以看到对tasks数组使用了map方法，并在map方法的参数中使用了箭头函数来处理所需内容。在map方法的返回值中，返回了HTML元素。

接下来，我想要实现任务的添加功能。

在render() { … }的上方添加以下代码。

addTask() {
  let tasks = this.state.tasks;
  tasks.push(this.state.taskContent);
  this.setState({tasks: tasks});
  this.state.taskContent = "";
}

请在浏览器中，将适当的任务内容输入到文本框中，然后点击添加按钮。您会看到任务已经被添加了。

如果按照追記的內容來進行說明的話，

2.では、

taskContentの値をテキストフィールドに表示
テキストフィールドに入力された値をtaskContentに反映

3.でボタンをクリックした時にaddTask関数を実行するように指定
4.でaddTask関数を定義

通过addTask函数将taskContent的值添加到State的tasks数组中。

组件和属性

到目前为止，我们已经实现了列表功能和添加功能。现在，让我们引入组件化的设计思想，将任务的显示部分进行组件化。通过组件化，我们可以用更简洁的代码进行描述。

在Task.js中粘贴以下内容。

import React from 'react';

class Task extends React.Component {
  constructor(props) {
    super(props);
    this.number = props.number;
    this.task = props.task;
  }
  render() {
    return (
      <div>
        { this.number }. { this.task }
      </div>
    );
  }
}

export default Task;

将map方法返回值中的

…

替换为。

请确认您的浏览器是否正常，并确认页面是否正确显示。

逐步解說步驟。 bù)

としてクラス内の変数に渡されていることが分かります。このようにコンポーネントに渡されたprops の値は、props.props名とすることでコンポーネント内で使用することができます。

或许在本次的例子中，你可能没有太多地感受到组件化的好处，但当开发规模稍微大一些时，从代码的可读性、管理的便利性以及可重用性的角度来看，组件化的好处就会变得更加明显。

以上就完成了两个应用的实施！

函数组件是什么

在React中，组件有两种类型：类组件和函数组件。
到目前为止，我们所写的组件都是类组件。

class コンポーネント名 extends React.component {
  render() {
    return (
      <div>
        表示内容
      </div>
    );
  }
}

一种是函数组件的书写方式如下。

// アロー関数表記で書かれることもある
function コンポーネント名() {
  return (
    <div>
      表示内容
    </div>
  );
}

函数组件相较于类组件在书写上更加简洁。虽然基本上函数组件可以实现类组件能做的事情，但是由于需要使用稍微复杂的语法，所以我认为在熟悉类组件之后再尝试使用函数组件会更容易理解。

首先，将函数App()的定义删除，并替换为类组件是因为以下原因。

Reactハンズオンはここまでです。お疲れさまでした。

我介绍不完的事情

Redux