> For the complete documentation index, see [llms.txt](https://yingzehou.gitbook.io/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://yingzehou.gitbook.io/docs/web-app/react.js.md).

# React.js

GitHub Repo: https\://github.com/YingzeHou/portfolio.git

## Installation

1. Download Node.js
2. Run VScode as admin role in the target directory
3. `npm install -g create-react-app`
4. `npx create-react-app <your-app-name>.`
5. `cd <your-app-name>`
6. Delete unneccesary files like icon, css, etc. (Keep App.js & index.js)
7. `npm start` to start the development server

## StartUp

1. Create components and sub-components folders under src (Use .jsx and .scss files)
2. `yarn add node-sass` to enable use of scss file
3. Delete pre-exist package-lock.json and run `npm install` to download all required dependencies on local machine

## Syntax

* Control scroll type and scroll alignment

```scss
.section{
            scroll-behavior: smooth;
            scroll-snap-type: y mandatory;
            scrollbar-width: none; //for firefox
            &::-webkit-scrollbar{
                    display: none;
            }
}

>*{
            width: 100vw;
            height: calc(100vh - 60px);
            scroll-snap-align: start;
}
```

* Built-in boolean function to change state

```jsx
import { useState } from "react";
const [QRopen, setQRopen] = useState(false)

(Cover is a pre-designed sub component)
<Cover QRopen={QRopen} setQRopen={setQRopen}/>

(Cover, pass the boolean variable and corresponding boolean set func in)
export default function Cover({QRopen, setQRopen}) {
    return (
        ...
        <div className="wechatcode">
            // Use the value of QRopen to determine to display WechatCode component or not
            {QRopen ? <WechatCode QRopen={QRopen} setQRopen={setQRopen}/> : null}
        </div>
        ...
        <div className="itemContainer">
            <Wechat className="icon"/>
                <span>
                     // When click on, lambda expression to setQRopen to change QRopen to opposite value
                     // Therefore, after click, QRopen change from false->true, and above WechatCode component is shown
                    <div onClick={()=>setQRopen(!QRopen)}>&nbsp;Wechat</div>
                </span>
        </div>
}
```

* Animation in Scss (use @keyframes to define the action name and behavior)

```scss
.name{
        font-size: 50px;
        font-weight: 900;
        color: darkgray;
        text-align: center;
        margin-top: calc(80vh / 2);

        animation-name: floating;
        animation-duration: 3s;
        animation-iteration-count: infinite;
        animation-timing-function: ease-in-out;
    }
    @keyframes floating {
        0% { transform: translate(0,  0px); }
        50%  { transform: translate(0, 15px); }
        100%   { transform: translate(0, -0px); }   
    }
```

## Deployment

1. In the project folder, use npm `install gh-pages --save-dev` / `yarn add gh-pages --save-dev` to apply github pages dependencies
2. Go to package.json and add "homepage" at the very beginning and "predeploy", "deploy" at npm script:

```json
"homepage": "http://YingzeHou.github.io/portfolio",
"name": "portfolio",
"version": "0.1.0",
"private": true,
....
"scripts": {
    "predeploy": "npm run build",
    "deploy": "gh-pages -d build",
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  }
```

&#x20;  3\. Create a github repo and push local project to remote repo

&#x20;  4\. Run `npm run deploy` to deploy the website, thus website is available at homepage url

{% embed url="<https://reactjs.org/docs/getting-started.html>" %}

{% embed url="<https://www.w3schools.com/react>" %}

{% embed url="<https://buildwithreact.com>" %}

{% embed url="<https://www.taniarascia.com/getting-started-with-react>" %}

## History & Overview

WHY: JS library for building user interfaces

DOM for single-page applications (SPAs) can be huge

Large number of updates on DOM elements

#### Virtual DOM

Virtual representation of the user-facing elements that are kept in memeory and synced with the real DOM when DOM elements are updated.

#### Reconciliation

The process to diffing and syncing the virtual and real DOM to render changes for the user.

#### Declaritive

Express logic of a computation without describing its flow: What we want the outcome to be

![](https://718974022-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSuJgG7D29QwYhL3TYnjr%2Fuploads%2FccjdaU2GlNXEKZd1ytLt%2FScreen%20Shot%202022-02-15%20at%2011.26.26%20AM.png?alt=media\&token=8d0b2169-9b93-47bb-817d-fc4a12a4b4f8)

ReactDOM library takes care of reconciliation and updating user-facing content under the hood

## Building Block

Elements: Light, stateless, immutable, virtual representation of a DOM element

Generate **new element** to update the page

```jsx
var root = React.createElement('div');
ReactDOM.render(root, document.getElementById('example'));
```

Components: A function or class that accepts an input and returns a React element

Works like JS functions; Accept props; Each component is encapsulated (one component per file) and can operate independently, affording modularity.

```jsx
class Welcome extends React.Component {
    render(){
        return <h1>Hello, {this.props.name}</h1>;
    }
}
```

#### render()

Returns a React element to be displayed on the page. WHAT to see on screen-->into render()

* ReactDOM.render(): Mounts the declared element as a child to the specified container in the DOM.
* Component.render(): Creates the virtual DOM representation of the contents of the React component. Then, we call ReactDOM.render() to mount it to the real DOM

#### props:

Properties, the arbitrary input provided into React component that utilize them to render content.

Component never modify props; Read-only & Immutable;

```jsx
function Welcome(props){
    return <h1>Hello, {this.props.name}</h1>
}
const element = <Welcome name = "Professor" />;
ReactDOM.render(element, document.getElementById('root'));
```

#### states

Fully private and controlled by the component

Keep track of changes in data.

```jsx
class Welcome extends React.Component{
    constructor(props){
        super(props);
        this.state = {date: new Date()};
    }
}
```

#### JSX

Syntax extension to JavaScript, that adds XML syntax to JavaScript. JSX declarations produce React elements.

Makes React programming extremely effective

#### Naming Convention

camelCase involves writing phrases such that each word begins capitalized with no spaces. (ReactDOM & JSX)

hyphen-case involves writing phrases in lower case and using a hyphen as a seperator.&#x20;

PascalCase capitalizes all words with no spaces (React Components)

### Component Library

Abstract away the low-level CSS implementation of user-facing elements.

* Bootstrap: (1) CDN=JS (2) Bootstrap dependency (3) React Bootstrap package
* Foundation
* Semantic UI
* Pure
* UIkit

### Component Development & Reuse

1. Mock-up design: Sketch out the design
2. Break the UI into component hierarchy: Structure of the component->tree layout
3. Build static version: HTML component layout: div->child DOM structure
4. Identify the minimal set of mutable state: Check elements to see if changeable
5. Identify where your state should live: (1) App track state; (2) TACard keep track; (3) TAContactButton keep track: Scope of the state, #3 most aligned with React way (Bestly, state need to be as close/low level as possible (component))
6. Add inverse data flow: Parent->Child: props; Child->Parent: callback returns

![](https://718974022-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSuJgG7D29QwYhL3TYnjr%2Fuploads%2Fri8wWgJdg7geXtgwvKQA%2FScreen%20Shot%202022-02-17%20at%2011.58.23%20AM.png?alt=media\&token=d20d2fe5-0919-4531-9a27-9f1b2637f561)

### Fragment

React constructs that can group child components without adding extra nodes to the DOM

\<React.Fragment> can be automatically removed when groupping, simplify DOM structure

### Controlled vs Uncontrolled Components

States of controlled components are managed by React. User input element (input, textsarea, select...) uncontrolled. Use refs to give React access to DOM elements

![](https://718974022-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSuJgG7D29QwYhL3TYnjr%2Fuploads%2F4QcTQFqVdJo51cMq5Gl5%2FScreen%20Shot%202022-02-17%20at%2012.08.50%20PM.png?alt=media\&token=a627b627-5c7e-4cd6-bb02-7ad14d1a297e)

#### this.bind()

this.\<functionName>.bind(this), clarifies that the scope of the function that is passed to children component is within the parent component.

Calling(top): function()-->Call directly

Passing(bottom): function-->Pass as pointer

## Hook

Hooks are functions that let you "hook into" React state and lifycycle features from function components. Hooks don't work inside classes — they let you use React without classes.

### useState

useState is a Hook that lets you add React state to function components.

![](https://718974022-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSuJgG7D29QwYhL3TYnjr%2Fuploads%2FpD81jzCzisjas5D9oxrV%2FScreen%20Shot%202022-02-24%20at%2011.11.40%20AM.png?alt=media\&token=0c10de7b-8a1d-4987-9521-b289435aadb7)

### useEffect

useEffect lets you perform side effects in function components.

If called everytime there's an update: leave \[state] blank

If called only once when mount: empty array \[] at \[state]

If called only when certain state changes: put the state into \[state]

return() function is same as unmount cleanup.

![](https://718974022-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSuJgG7D29QwYhL3TYnjr%2Fuploads%2F0zYT3pRmzsEutGEnSyCs%2FScreen%20Shot%202022-02-24%20at%2011.22.38%20AM.png?alt=media\&token=f16ed509-2376-44ba-96f1-7abd816be544)

![](https://718974022-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSuJgG7D29QwYhL3TYnjr%2Fuploads%2FnzCQmJIYrAPHAqr5ld5p%2FScreen%20Shot%202022-02-24%20at%2011.27.51%20AM.png?alt=media\&token=837a311b-a7e7-4e1f-9f14-ca7b0fdb0403)

Hooks can only be used in React function, not class and not regular JavaScript functions

Only call Hooks at top level, not inside loops, conditions, or nested function

## Advanced Async Updating

`async funtion()` denotes that the function() will work async

`await expression` enables the program to wait for this expression to be resolved

```jsx
async componentDidMount(){
    const res = await fetch("url");
    const something = await res.json();
    this.setState({key: sth});
}
```

## Optimizing Performance

Do not deal with unneccesary re-render

### Performance Tool

```jsx
import Perf from 'react-addons-perf';
Perf.start()
// Our app
Perf.stop()
```

![](https://718974022-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSuJgG7D29QwYhL3TYnjr%2Fuploads%2FOK3ABO1l8beJ1gUDdKs7%2FScreen%20Shot%202022-02-24%20at%2011.52.39%20AM.png?alt=media\&token=41a632e4-e976-4de5-9223-59c27e4b6145)

### Eliminate time wasted

shouldComponentUpdate()

For components that implement shouldComponentUpdate(), React will only render if it returns true

```jsx
function shouldComponentUpdate(nextProps, nextState){
    // DO some comparison
    return this.props.color !== nextProps.color;
}
```

![](https://718974022-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSuJgG7D29QwYhL3TYnjr%2Fuploads%2FrXQJA4g9qKa8CzFIl28a%2FScreen%20Shot%202022-02-24%20at%2012.00.45%20PM.png?alt=media\&token=f5912761-047b-4886-a930-fbf1c78c8832)

Shallow Comparison: Strict equality, reference same

Deep Comparison: Property are compared: Lodash isEqual()

#### Use PureComponent: implements SCU automatically

![](https://718974022-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSuJgG7D29QwYhL3TYnjr%2Fuploads%2FeS6rqgOE4K2OJZH0t5Pa%2FScreen%20Shot%202022-02-24%20at%2012.03.11%20PM.png?alt=media\&token=9a231a8a-654b-444f-a6f0-e08451042eb4)

Do not mutate data when using PureComponent: use same object to update instead of assigning the object to a new reference and update the reference.

## API for advanced interation

#### Interaction Libraries

#### Component Libraries

#### Managing Data