Dev/React

example-service.ts import { OktaAuth } from '@okta/okta-auth-js' export interface FooData { hello: string } export interface FooResult { success: boolean extraInfoForFrontend: string } export async function foo(oktaAuth: OktaAuth, data: FooData): Promise<FooResult> { const accessToken = oktaAuth.getAccessToken() try { const response = await fetch("/foo", { headers: { Authorization: `Bearer ${accessToken}`, }, }) const json = await response.json() return { success: true, extraInfoForFrontend: json.message, } } catch (err) { return { success: false, extraInfoForFrontend: 'Could not get data', } } } example-service....

82-93 (82) Section intro introduce AWS Amplify in the browser Get temporary credentials in the Browser CORS issues App will be approaching it’s final form (83) Setup and Amplify install npm i aws-amplify @aws-amplify/auth npm i aws-sdk (84) Cognito login from React code model.ts import {CognitoUser} from '@aws-aplify/auth' export interface User { userName: string cognitoUser: CognitoUser } service/AuthService import {Auth} from "aws-amplify"; import Amplify from "aws-amplify"; import {CognitoUser} from "@aws-amplify/auth"; import {config} from "....

62-81 (63) Create react app and git npx create-react-app space-finder-frontend --template typescript (64) Basic project structure folder structure components: ui components (*.tsx) model: types (*.ts) services: non-ui code (*.ts) util (*.ts) (65) state, props, child, parent change in state or props triggers re-render props are immutable state is mutable this.setState({ counterState: this.state.counterState + 1 }) use state / props this.state.counterState this.props.counterProp typescript class defines type of Props and State interface Props { counterProp: number } interface State { counterState: number } export class MyComponent extends React....

Binding why? options (a) bind in constructor (ES2015) (b) class properties (ES2022) (c) bind in render (d) arrow function in Render ?? why no (e) pass the parent object (a) bind in constructor (ES2015) constructor(props) { super(props) this.setUser = this.setUser.bind(this) } <button onClick={this.handleClick} (b) class properties (ES2022) handleClick = () => { // use 'this' }; <button onClick={this.handleClick} (c) bind in render 😞 creates a new function each render...