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.Component<Props, State>{
state: State = {
counter: 0
}
}

pass data to child with props

interface AppState {
appCounter: number
}
export class App extends React.Component<{}, AppState>{
render() {
return (<MyComponent counterProp=={this.state.appCounter}>)
}
}

(67) Child components function foo(): Promise<User | undefined> ?? why succeed with undefined instead of using promise.reject for that?

(68) Handling events via properties

  • onChange // every letter change (on input)
  • onSubmit // submit button (on form)
interface CustomEvent {
target: HTMLInputElement
}

class Component ... {
private setUserName(event: CustomEvent){
this.setState({userName: event.target.value})
}

private async handleSubmit(event: SyntheticEvent) {
event.preventDefault();
const result = await this.props.authService.login(this.state.userName)
...
}

render() {
return (
<form onSubmit={e=>this.handleSubmit(e)}
<input value={this.state.userName} onChange={e=>this.setUserName(e)}>
</form>
)
}
}

(70) Data from child to parent React: Passing Functions to Components

(71-72) Routing

npm i react-router-dom @types/react-router-dom

NavBar

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

<div className='navbar'>
<Link to='/'>Home</Link>
<Link to='/profile'>Home</Link>

Router

import {Router, Route, Switch} from 'react-router-dom'
import history from '../utils/history'

<div className='wrapper'>
<Router history={history}>
<div>
<Navbar user={this.state.user}/>
<Switch>
<Route exact path='/' component={Home}/> // cannot pass properties
<Route exact path='/login'> // to pass properties
<Login .../>
<Route exact path='/profile' component={Profile}/>
</Router>

utils/history.ts

import {createBrowserHistory} from 'history'
export default createBrowserHistory();

(73) Small Css

(a) Global CSS file + className property add global css to index.tsx with an import index.tsx

import ReactDOM from 'react-dom'
import {App} from './components/App'
import './index.css' // <<<<<<

ReactDOM.render(<App/>, document.getElementById('root'))

(b) style property

<Link style={{float:'right'}} ...

> (c) others not mentioned in this course

(74) State of the application aka. persisting navigation state

import history from '../utils/history'

history.push('/profile')

(75-76) Rendering async table

async componentDidMount() {
const userAttributes = await this.props.authService.getUserAttributes(this.props.user)
this.setState({userAttributes})
}

(77) Space component build refer to image asset

import genericImage from '../../assets/geneirc-image.jpg'

<img src={genericImage} alt=''/>

(79) Routing and styling spaces components/spaces/SpaceComponent.tsx

import './SpaceComponent.css'

components/spaces/SpaceComponent.css

...

(80) Modal content aka in page popups hide component

render() {return null}

-> when we return null, react will just not render it (confirmed: Conditional Rendering – React)

modal component

  • flag to toggle showing
  • external close method
  • css to make it appear like a popup

components/spaces/ConfirmModalComponent.tsx

import './ConfirmModalComponent.css'

interface ConfirmModalComponentProps {
show: boolean
close: () => void
}

export class ConfirmModalComponent extends Component<ConfirmModalComponentProps>{
render() {
if(!this.props.show) return null
return <div className='modal'>
<button onClick={this.props.close()}>OK</button>
</div>
}
}

components/spaces/ConfirmModalComponent.css

.modal {
z-index: 1; // must be on top
position: fixed;
}