挑战重新开始的React时代

1 年 ago
清, 扬
3 minutes

重新挑战令和时代的React。

首先

在过去的文章中我写了一些关于Vue的内容，但实际上在开始学习SPA时，由于挑战React时遇到了一些困难，所以我选择了用Vue进行学习。
这次是因为令和时代的到来，所以我想再次尝试一下React。

我打算写给以下的方向。

    • Reactの初学者

 

    • javascriptは書いたことがある

 

    webアプリを作りたい

首先，什么是React？

当查看React的官方网站时，可以看到以下的表述：
“为构建用户界面的JavaScript库”

我们考虑将在浏览器上显示的内容分解为组件，提供一种非常便捷的开发体系来实现这些组件。这个库也可以被视为一种更注重用户界面的开发思路。

启动 React

我希望您在PC上安装npm或yarn命令才能启动React。
这次我将使用yarn作为工具。
使用以下命令将创建名为react-test的目录，该目录包含一整套的文件。

yarn create react-app react-test

输入这个命令会创建许多文件。让我们先试着运行一下。试试启动dev服务器。

yarn run start

假如这样做，我认为会出现这样的画面。这样就可以在浏览器中确认使用React编写的程序了。我们将从这里开始。

スクリーンショット 2022-10-10 22.33.05.png

更简洁的文件结构

為了不讓自己在這次學習React時感到挫折，我打算在這裡刪除大部分的文件，並讓它更簡單地運作。

另外，由于使用常规的Node进行开发时，package.json，yarn.lock以及node_modules没有太大区别，我想忽略它们。这里的目标是src和public文件夹中的文件。为了创建最小的组件，暂时删除其他文件和样式表，并创建一个组件专用的文件夹。

cd src
rm App.css App.test.js index.css logo.svg reportWebVitals.js setupTests.js
mkdir components

以下是一种简洁的中文表达方式：“我想制作的是这次。”

组件 -> index.js

只需要这样就足够了。
因为在这里我们将以jsx格式而不是js格式编写代码，所以要改变文件扩展名。基础是App.js，并最终将删除App.js。

cp App.js components/Greeting.jsx
cp App.js components/Introduce.jsx
cp App.js components/Coin.jsx
rm App.js

我认为到这里以下将会形成目录结构。

pwd 
/react-test/src

tree .

.
├── components
│   ├── Coin.jsx
│   ├── Greeting.jsx
│   └── Introduce.jsx
└── index.js

1 directory, 4 files

我想做的是，在components文件夹下创建上述的三个组件，并在index.js将这些文件加载到html文件中进行呈现。

JSX的解释

这是一个非常简单的东西，但它允许在JavaScript中编写HTML格式。这是React官方JSX的解释。

从这些中选择摘录以下内容

const element = <h1>Hello, world!</h1>;

これは JSX と呼ばれる JavaScript の構文の拡張です。
UI がどのような見た目かを記述するために、React とともに JSX を使用することを私たちはお勧めしています。
JSX はテンプレート言語を連想させるでしょうが、JavaScript の機能を全て備えたものです。

JSX は React “要素” を生成します。
次の章で React 要素を DOM に変換する方法について見ていきます。
以下では、JSX を使い始めるのに必要な基礎を学ぶことができます。

以下是一种将html的值赋给js变量的写法，而这种写法是由jsx的特点允许的。

创建一个问候组件

将index.js文件按照以下方式修改。

import React from 'react';
import ReactDOM from 'react-dom/client';
import { Greeting } from './components/Greeting.jsx';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
	<React.StrictMode>
		<Greeting />
	</React.StrictMode>
);

我們將開始製作組件。

import React from 'react';

export const Greeting = () => {
	const greet = 'Hello, world';
	return(
		<h1>{ greet }</h1>
	);
}

如果你通过访问 http://localhost:3000 ，并且看到了以下的情况，那就表示成功了。

スクリーンショット 2022-10-10 22.51.42.png

创建一个名为Greeting的组件，并通过index.js渲染到HTML中（实际上，通过阅读index.js的代码，我们可以看到它首先获取根元素的id，然后将组件渲染到那个地方）。

关于Greeting.jsx的代码进行解释说明

当我早先尝试使用react时，我记得是以类的形式编写的，但现在似乎也有这种函数组件的写法。我希望在这里使用这种写法。请将文件扩展名保存为jsx。

回应：函数组件和类组件之间的区别。

通过把它作为一个函数来编写，我觉得它与Vue等写法相比更直观和简洁。在这段代码中，我们使用了箭头函数。基于JavaScript的基础上，我们使用const等变量声明，并利用jsx的特权在返回值中返回了HTML。

创建Introduce组件。

通过使用基本的React来创建组件，我们可以使用Greeting组件进行。下一步是尝试传递值的props。这也是Vue中的一个机制，简单来说，就是从调用父组件向子组件传递值，并将该值反映到显示中。

我将编辑index.js。我已经添加了对Introduce.jsx的引入。

import React from 'react';
import ReactDOM from 'react-dom/client';
import { Greeting } from './components/Greeting.jsx';
import { Introduce } from './components/Introduce.jsx';


const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
	<React.StrictMode>
		<Introduce name="qiita" age="20" />
		<Greeting />
	</React.StrictMode>
);

我将编辑Introduce.jsx。

import React from 'react';


export const Introduce = props => {
	return(
		<h1>I am {props.name}, {props.age} years old </h1>
	);
}

如果在这里重新在浏览器中显示，将会如下所示。

スクリーンショット 2022-10-10 23.08.30.png

我们可以通过父组件向子组件传递Props属性来获取值。

//---------------------------------------------------------------------//

//渡す側 index.js (親コンポーネント内)
		<Introduce name="qiita" age="20" />

//---------------------------------------------------------------------//

//受け取る側 Introduce.jsx (子コンポーネント内)

export const Introduce = props => {
	return(
		<h1>I am {props.name}, {props.age} years old </h1>
	);
}

//---------------------------------------------------------------------//

创建Coin组件

，我們接下來要嘗試使用 React Hooks。我找到了一個非常易懂的網站，我們將以該網站為基礎進行解釋。

首先从组件开始。我们进一步简化了上述网站的测试代码。为了将State作为函数处理，我们使用了Hooks。

import React, { useState } from 'react';

export const Coin = () => {
    // isVisible：stateを宣言する。
    // setVisibility：stateを更新する関数を宣言する。
    // useStateの引数はisVisibleの初期値を指定する。
    const [isVisible, setVisibility] = useState(true);
    // isVisibleを反転する関数を定義する。
    const updateVisibility = () => {
        setVisibility(!isVisible);
    };

    return(
        <React.Fragment>
            <button onClick={updateVisibility}>
                反転ボタン
            </button>
            <div>
                {isVisible
                    ?
                    <div>
                        <p>オモテです</p>
                    </div>
                    :
                    <div>
                        <p>ウラです</p>
                    </div>
                }
            </div>
        </React.Fragment>
    );
}

在组件中执行以下处理。

    • stateを宣言する。

 

    • stateを更新する関数を宣言する。

 

    • useStateの引数はisVisibleの初期値を指定する。

 

    • stateを更新する関数をラップする関数を作成する。

 

    実際に呼び出す（今回はボタンアクションonClickに対して上のラッパー関数を呼び出しています）

另外，在返回多个元素时，使用了覆盖return的方式。

当更改硬币的正反面时，会进行判定并改变显示内容，这是通过if语句来实现的。

                {isVisible
                    ?
                    <div>
                        <p>オモテです</p>
                    </div>
                    :
                    <div>
                        <p>ウラです</p>
                    </div>
                }

コンポーネントの作成が終わったので、index.jsでCoin.jsxを読み込むように編集します。

import React from 'react';
import ReactDOM from 'react-dom/client';
import { Greeting } from './components/Greeting.jsx';
import { Introduce } from './components/Introduce.jsx';
import { Coin } from './components/Coin.jsx';


const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
	<React.StrictMode>
		<Introduce name="taro" age="10" />
		<Greeting />
		<Coin />
	</React.StrictMode>
);

在这之前，我们已经写好了代码并进行了浏览器确认，接下来会以以下方式显示。当按下翻转按钮时，正面和背面将会反转。

スクリーンショット 2022-10-10 23.41.06.png

最后

这次我们创建了一个非常简单的React应用程序。通过使用简单的文件结构，我认为可以顺利学习React的核心部分而无需感到沮丧。

我们考虑在接下来的文章中继续推进以下内容。

    • Hooksの他の関数

 

    • Contextの利用

 

    • プロジェクトのTypeScript化/CSS

 

    Reduxの利用
✖
广告
将在 9 秒后关闭
bannerAds