我想开始React的学习

1 年 ago
文, 翔
3 minutes

Windows10
React@17.0.1
AWS Amplify@3.3.14

制作项目

使用npx进行创建 (官方)

npx create-react-app sukina-project-name

启动

cd sukina-project-name
npm start

创作图像(元素)

可以用一个部件创建一个屏幕，但是将其制作得更小并组合起来更具可重复利用性和智能化。

与创建项目时的App.js中一样，定义一个返回渲染屏幕的函数。

// functionで描く
export default function Welcome() {
  return <h1>Hello World</h1>;
}

创建一个类并在render函数中返回

import React from "react";

//class.renderで描く
export default class Welcome extends React.Component {
  render() {
    return <h1>Hello World</h1>;
  }
}

（Formula）

export default可以放在下面也可以。

class Welcome extends React.Component {
  render() {
    return <h1>Hello World</h1>;
  }
}
export default Welcome;

我想写出数组的内容


const values = [ 1, 2, 3 ]

return (
  {values.map( (v) => <div>{v}</div> ) }

  //{for(let v in values){ <div>{v}</div> }} 式は書けないのでこれは無理
)

哎

const values = [ 1, 2, 3 ]
let items = []
for(let v in values){ items.push( <div> {v} </div>) }

return (
  {items}
)

希望进行画面切换。

使用React Router。(官方)

使用React Router进行安装（官方）


npm install react-route-dom

在这里作为一个例子，我正在创建一个想要在指定了 /todo URL 时显示的页面。我在 src 文件夹下创建了一个名为 Todo.js 的文件。

// /todoでアクセスすると描画する内容
import React,{ Component } from 'react'

export default class Todo extends Component {
    render(){
        return <div> hello! </div>;
    }
}

使用BrowserRouter、Suspense、Switch和Route组件来选择要显示的位置。

导入部分


// React.lazyとReact.Suspenseをインポート
import React , {Suspense,lazy} from 'react';
import './App.css';

// React Routerからインポート
import {
  BrowserRouter as Router,
  Switch,
  Route
} from "react-router-dom";

// 前で作ったTodoクラスを取り込み
const Todo = lazy(() => import('./Todo'));

将Todo.js导入到App.js中。

绘图处理

function App() {
  return (
    <Router>
      <Suspense fallback={<div>Loading...</div>}>
        <Switch>
          <Route path="/todo" component={Todo} />
          <Route path="/">
            <h1>root</h1>
          </Route> 
        </Switch>
      </Suspense>  
    </Router>
  );
}

export default App;

使用路由器、交换机和路由标签来切换与URL相对应的组件。

是在加载中显示的提示信息，告诉你稍等片刻。在这里会显示Loading…
如果要显示延迟加载的组件，则必须在中调用，否则会报告：正在渲染的React组件被挂起，但没有指定回退界面。

路线的书写方式可以用以下两种方式表示，意思是相同的。

<Route path="/todo" component={Todo} />

<Route path="/todo">
  <Todo />
</Route>

我想通过按下按钮来进行页面的切换。

使用Link组件来包围按钮，当按钮被按下时跳转到下一个页面。

import { Link } from 'react-router-dom'

<Link to="/todo">
  <button>Login</button>
</Link>

实际上，并不仅限于按钮，还可以通过标签、span等进行页面转换。

UI库

有很多选择，所以只需使用喜欢的东西就可以。但是如果遇到困难，material-ui似乎是一个标准的选择。

钩子是指…

formula

如果想使用class来保存状态，可以使用state功能。
为了能够以函数的形式使用React的state等功能（因为屏幕可以使用class或函数创建，所以提供了函数作为钩子。
为了使用state功能，需要使用状态钩子。

请注意使用方式（官方指南）。
– 请始终在最高层次上使用。即，不要在if、for等{}内使用。
– 仅在react组件内使用。不要在纯粹的JavaScript函数中使用。
违反规则会导致功能失效？出现意外行为？

我想进行用户认证和用户注册（使用AWS Cognito和AWS Amplify）。

当想要进行注册、登录等操作时，
不必自己进行繁琐的实现，可以使用AWS Cognito来处理。
若要在React中使用AWS Cognito，使用AWS Amplify是快捷的方式。

AWS Amplify 的安装和初始设置（官方）

安装amplify

为了进行初始设置，请在项目根目录下执行以下命令。

amplify init

使用 AWS Cognito 创建用户池等时，如果使用 Amplify 进行创建，可以通过命令进行操作。（官方指南）
如果手动创建用户池等 AWS 资源，则不需要这些命令。

amplify add auth

amplify push

通过使用amplify push，将创建用户池等。
同时，在amplify push完成后，将在src目录下创建一个名为aws-export.js的文件，其中包含访问创建的AWS资源所需的信息。

//生成されたaws-exports.js *****にはユーザープール等の情報が設定されている

/* eslint-disable */
// WARNING: DO NOT EDIT. This file is automatically generated by AWS Amplify. It will be overwritten.

const awsmobile = {
    "aws_project_region": "*****",
    "aws_cognito_identity_pool_id": "*****",
    "aws_cognito_region": "*****",
    "aws_user_pools_id": "*****",
    "aws_user_pools_web_client_id": "*****",
    "oauth": {}
};

export default awsmobile;

如果想要使用手动创建的现有AWS Cognito资源，需要将aws-exports.js文件中的内容更改为所需现有资源的ID。（官方）

由于对aws_cognito_identity_pool_id的理解不太清楚，所以写下了确认方法的备忘录。

image.png
image.png
image.png
image.png

ID池中的所有字符串都写在ID上面。

当收到“无法验证客户端的秘密哈希”错误提示时，
可能是因为在添加应用客户端时选中了“生成客户端秘密”选项。
在这种情况下，需要取消勾选“生成客户端秘密”选项并重新注册应用客户端（因为ID会变化）。
AWS Cognito Identity出现NotAuthorizedException异常。

如果在未登录的情况下直接访问网页，希望进行认证。

只需在App.js的渲染过程中，使用将其括起来即可。

↓仅包含必要的导入（不包括路由部分）

import Amplify from "aws-amplify";
import { AmplifyAuthenticator } from "@aws-amplify/ui-react"
import awsconfig from "./aws-exports";

Amplify.configure(awsconfig);

绘图处理部分

function App() {
  return (
    <AmplifyAuthenticator> //コレ

      <Router>
        <Suspense fallback={<div>Loading...</div>}>
          <Switch>
            <Route path="/test" component={Test} />
            <Route path="/" component={Home} />
          </Switch>
        </Suspense>
      </Router>

    </AmplifyAuthenticator>
  );
}

在路由设置中，当访问/test和/时定义了一个规则。
当未登录时，无论访问/test还是/，都会显示认证表单。

✖
广告
将在 10 秒后关闭
bannerAds