【React】使用React备忘录和AWS Cognito+Amplify实现登录功能

3 年 ago
雅, 悟
1 minute

React 是什么

React是一個開源的JavaScript庫，主要用於構建SPA（Single Page Application：在Web瀏覽器上進行頁面遷移而不需要重新加載，通過腳本與服務器進行通信和頁面轉換）。它是由Facebook（現稱Meta）的軟件工程師Jordan Walke開發並開源化的。

 

使用React时，我们会使用JSX（JavaScript XML）这种语法来结合JavaScript和HTML进行编写。与使用纯JavaScript实现相比，它更简洁且可读性更高。

与另一个著名的JavaScript框架jQuery相比，React在不修改HTML的情况下通过对编译后的HTML进行修改来实现功能，而不需要直接编辑HTML。

如何开始使用React

React1.PNG

用这个方法可以创建React的发布文件。之后，只需在App.jsx和index.js中编写想要创建的Web UI。

使用AWS Amplify库添加登录UI

React3.PNG

在使用类组件的情况下

如果是类组件的话，可以使用props一次性接收参数，因此不需要明确提供signOut和user。

+   class App extends Component {
+     constructor(props) {
+       super(props)
+     }
+     render() {
       return (
               <div className="App">
               //ヘッダーを記述
             <header className="App-header">
               //画像をApp-logoのデザインに従い表示
               <img src={logo} className="App-logo" alt="logo" />
               //文字を表示
               <p>
                 Edit <code>src/App.js</code> and save to reload.
               </p>
               //リンク文字を記載
               <a
                 className="App-link"
                 href="https://reactjs.org"
                 target="_blank"
                 rel="noopener noreferrer"
               >
                 Learn React
               </a>
             </header>
           </div>
       )
+     }
+   }

React的特點

    1. 使用className代替class，htmlFor代替for来赋值给变量等时，需用{ }括起来

 

    1. 评论使用//放在return之外，使用{/*文字*/}将其放在return之内

 

    1. 组件被称为对象，基本上使用函数组件而不是类来创建

 

    1. 将公共的静态文件放在public文件夹下

 

    1. 将需要构建的文件放在src下

 

    1. 组件有三个状态：Mounting，Updating，UnMounting

 

    1. 组件等应该使用驼峰命名法（单词的连接部分使用大写字母）

例如使用const Colored = (props) => {}时，通过props.option来调用内部的变量和函数
通过Redux可以在多个组件之间共享数据
在编写函数组件时，通常不需要明确使用function关键字，而是使用箭头函数
采用虚拟DOM

ChatGPT：
Virtual DOM是React中使用的一种机制。 Virtual DOM指的是具有与浏览器DOM（文档对象模型）相同格式的虚拟DOM。通过使用Virtual DOM，React可以高效地检测UI的变化，并仅更新需要的部分。这样可以比直接操作浏览器DOM更快地进行渲染。此外，Virtual DOM在React中提供了简单的API，使开发人员可以在不直接操作浏览器DOM的情况下进行高效的UI开发。

写下笔记

    在进行了大幅更改后，如果将React代码上传到生产环境后，页面仍然保持旧的状态。在这种情况下，可能是因为客户端缓存的原因，只要清除缓存就可以更新。

总结

这次我们使用React和AWS Amplify库来实现AWS Cognito的登录认证界面和授权功能。在现有的网站或新创建的网站上，可以非常简单地添加登录认证和授权功能。接下来，我们将参考下面的现有免费模板来创建登录后的内容。

 

bannerAds