React的基本概述

2 年 ago
文, 翔
2 minutes

首先

初次见面，我是个宅男工程师的Tonosaki！非常感谢你打开了这篇文章！
我已经对React有了一些了解，所以首先我自己总结了一下基本概述！
我身边没有任何React工程师，所以实话说有点寂寞…希望能通过这篇文章让一些人对React产生兴趣，或者能有一些人因为”这个人没有朋友好可怜，我来和他做朋友吧~”而出现。
顺便说一下，这篇文章是我初次投稿，希望你能用温暖的眼光看待。

※在这里，我们以JavaScript（ES6）的语法为基础进行描述。

React 是什么？

React是由Meta公司（前Facebook公司）开发的用于构建用户界面（UI）的JavaScript库。
其特点是通过组件（部件）的方式创建UI，可以灵活地创建复杂的UI。

创建React项目的方法

使用命令提示符或终端，可以创建React项目。执行以下命令（假设您的计算机已安装Node.js）

npx create-react-app ここに新規プロジェクト名を入力

使用以下的启动命令，你可以在本地环境中启动React项目，创建React项目已经完成。

cd ここに先ほど作成したプロジェクト名を入力
npm start
react.png

关于组件

组件是指UI的构成要素（部件）。通过组合这些构成要素（部件），我们可以创建一个页面。举个例子，一个网页可能包括头部、底部、菜单等各种部件。不是将这些部件整合到一个文件中进行构建，而是分别以部件为单位进行构建（通常会把每个部件放在一个文件中）。通过这样的方式，我们可以重用部件（程序），并且能够灵活地创建复杂的UI。

过去常常使用的是基于类定义的类组件，但现在更流行的是基于函数定义的函数组件。

const 関数名 = () => {
    return (
        //ここに処理を書く
    );
};

就像上述所講的那样，在React项目中，我们会把不同的组件按照每个组件分别放在文件中。此外，我们还需要导出它们，以便在其他文件中使用。

export const 関数名 = () => {
    return (
        //ここに処理を書く
    );
};

导出的内容可以通过导入的方式在其他文件中使用。您只需要在要导入的文件开头输入以下代码。

import { 関数名 } from "ファイル名";

顺便提一下，React是JavaScript的库，所以使用.js作为文件扩展名也没有问题，但是由于文件较多而管理起来很麻烦，所以一般情况下将组件文件的扩展名设置为.jsx是常见做法。如果使用.jsx作为扩展名，编辑器将提供便捷的自动补全功能等，非常方便。

※出口有不同的种类

在上述中所提及的是称为”normal export”的情况。
除此之外，还存在一种被称为”default export”的情况。
当使用”default export”时，请按照以下方式进行编写。

const 関数名 = () => {};

export default 関数名;

import 任意の名称 from "ファイル名";

基本上，無論使用哪種方式都沒有問題，如上述程式碼所示，對於默認導出(default export)的情況，可以在導入時給予任意的名稱。然而，需要注意的是，在同一個文件中只能使用一次該任意名稱。

JSX语法和规则

JSX语法

在React中，我们使用一种称为JSX语法的写法。简单地说，就是在JavaScript文件中可以像写HTML标签一样写标记。
在React中，通过将函数名用类似HTML标签的方式包围起来，可以将其作为组件来处理。
例如：</函数名>

JSX规则

在JSX中有一个重要的规则，即return之后必须用一个标签来包围。如果使用以下的写法将会显示错误。

export const App = () => {
    return (
        <h1>今日は俺ガイルを見ました。</h1>
        <p>材木座が面白かったです。</p>
    );
};

所以，你可以将return后面的内容用

或或<>（空标签）包裹起来，这样错误就不会被显示出来了。

/*divタグ*/
export const App = () => {
    return (
        <div>
            <h1>今日は俺ガイルを見ました。</h1>
            <p>材木座が面白かったです。</p>
        </div>
    );
};


/*空タグ*/
export const App = () => {
    return (
        <>
            <h1>今日は俺ガイルを見ました。</h1>
            <p>材木座が面白かったです。</p>
        </>
    );
};

只有在使用的情况下，才需要在文件开头导入以下代码。

import { Fragment } from "react";

export const App = () => {
    return (
        <Fragment>
            <h1>今日は俺ガイルを見ました。</h1>
            <p>材木座が面白かったです。</p>
        </Fragment>
    );
};

与上述的

不同，对于上述的情况，不会生成不必要的DOM，因此如果想要将外部包裹起来以避免错误的情况，这是一种有效的方法。

而JSX的重要规则之一是驼峰命名。驼峰命名是一种将单词连接部分大写的写法，不仅适用于事件，还适用于函数名等。
好的例子）onClick onChage onError onClickButton
不好的例子）onclick onchage onerror onclickbutton

应用CSS样式

在React中，我们通常不使用传统的CSS样式写法，而是以JavaScript对象的形式进行描述。如果想给文本设置颜色，可以按照以下方式编写。
※补充：由于有很多种CSS样式的应用方式，我已在另一篇文章中进行了总结！→【React】CSS的应用方式种类。

export const App = () => {
    return (
        <>
            <h1 style={{ color: "pink" }}>昨日はソードアートオンラインを見ました。</h1>
            <p style={{ color: "blue" }}>キリトと同じく僕もソロです。（友達がいません）</p>
        </>
    );
};
sao.png
export const App = () => {
    //CSSオブジェクト
    const styleColor = {
        color: "blue",
        fontSize: "30px"
    };

    return (
        <>
            <h1 style={{ color: "pink" }}>昨日はソードアートオンラインを見ました。</h1>
            <p style={   styleColor  }>キリトと同じく僕もソロです。（友達がいません）</p>
        </>
    );
};
sao2.png

最后

非常感谢您阅读到这里！我谈到了初级级别内容中的基础知识。实际上，这是我个人输出的一部分，也是我的备忘录。关于React的基础部分，我也想谈到Props和State等内容，但是由于文章的篇幅稍微有些多（也有一些麻烦，但是分隔开会更容易阅读吧），所以我打算在下一篇文章中总结。希望通过阅读这篇文章，React的伙伴们能够稍微增加一点。

bannerAds