###### tags: `React` `Olympus` `frontend`
# Hello Frontend
## Preface
> Before you get started, make sure you already know about how to use HTML, CSS, and JavaScript.If you don't you can find the basic tutorial [HERE](https://www.w3schools.com/where_to_start.asp)!

The following note will introduce the basics of frontend tech for our frontend project:
- **Typescript**
- **npm & yarn**
- **react**

## Typescript
- [Tutorial](https://www.w3schools.com/typescript/)
### Types
#### Simple Types
- **boolean**
- **number**
- **string**

#### Special Types
- **any**
- unknown
- undefined & null

#### Explict & Implicit Type
| | Explict | Implicit |
|-|-|-|
| Description | writing out the type on the code | TypeScript will "guess" the type, based on the assigned value |
| Code | let firstName: string = "Dylan"; | let firstName = "Dylan"; |
## npm & yarn
`npm` and `yarn` are package managers for the JavaScript and TypeScript

### package.json


- `package.json` contains all the relevant data regarding the project i.e. metadata. Starting from all the dependencies used to all the version numbers are present in the file.

    {
      "name": "my-app",      // The name of project
      "version": "0.0.1",    // The version of project
      "description": "",     // The decription of project
      "main": "index.js"
      "license": "MIT",      // The license of your project
      "devDependencies": {
        "mocha": "~3.1",
        ...
      },
      "dependencies": {
        "fill-keys": "^1.0.2",
        ...
      }
    }

#### Difference between dependencies, devDependencies and peerDependencies
| Name | Description | npm command | yarn command |
|-|-|-|-|
| dependencies | It consists of all the packages that are used in the project with its version number. | `npm install <package name>` | `yarn add <package name>` |
| devDependencies | It consists of all the packages that are used in the project in its development phase and **not in the production or testing environment** with its version number. | `npm install <package name> --save-dev` | `yarn add <package name> [--dev/-D]` |
| peerDependencies | It specifies that our package is compatible with a particular version of an npm package. Only encountered when you publish your own package will be used by the others. | Change the `package.json` file manually. | Change the `package.json` file manually. |

### Install the necessary packages for your App

cd your-app
npm install
# or 
yarn install

## React
- [react tutorial](https://www.w3schools.com/REACT/DEFAULT.ASP)
- We use [react-redux](https://github.com/reduxjs/react-redux) as our start template which allows us to manage our app’s state in a single place and keep changes in the app more predictable and traceable.

npx create-react-app my-app --template redux-typescript

### What is hook?
- Hooks allows you to use state and other react features without writing a class.
- Hooks are the functions **which hook into React state and lifecycle features from function components**.
- Hooks doesn't work inside classes.
### How to decide components in react?
- Step 1: Break The UI Into A Component Hierarchy
- Step 2: Build A Static Version in React
- Step 3: Identify The Minimal (but complete) Representation Of UI State
- Step 4: Identify Where Your State Should Live
- Step 5: Add Inverse Data Flow
- Step 6: Move the State to Redux

### Keywords
- [Functional Components](https://djoech.medium.com/functional-vs-class-components-in-react-231e3fbd7108#:~:text=But%20there%20are%20some%20benefits,you%20to%20use%20best%20practices.)
- [How to Decide components in react?](https://reactjs.org/docs/thinking-in-react.html)
- Virtual Dom
- ES6
- Render HTML
- JSX
- Components
- Props
- Events
- Router
- CSS
- Hooks
- useState
- useEffect
- ~~useContext~~
- useCallback
- useMemo

## Webpack
> Webpack is a free and open-source module bundler for JavaScript. It is made primarily for JavaScript, but it can transform front-end assets such as HTML, CSS, and images if the corresponding loaders are included.
- [Typescript with webpack](https://medium.com/jspoint/integrating-typescript-with-webpack-4534e840a02b#:~:text=TypeScript%20compiler%20is%20designed%20to,know%2C%20TSC%20needs%20a%20tsconfig.)
- The `webpack.config.js` allow you to configures and extend Webpack's basic functionality.

## Redux
> Redux is a Centralized State Container

### Clean Architecture with React & Redux
- [How To Structure Your React-Redux-App](https://javascript.plainenglish.io/how-to-structure-your-react-redux-app-83d523851137)

### How to use Redux React
There’s only 4 short steps to using Redux:
1. Create a Redux store
2. Mount it with a Redux Provider
3. Access it within lower React Components
4. Dispatch actions from React event handlers

### Note of redux usecase
https://hackmd.io/z2e_3Od2Rm2mPePKeReX7Q?view

## Call API
### axios
- [React + Axios: Everything You Need To Know (2021)](https://medium.com/react-bootcamp/react-axios-everything-you-need-to-know-2021-85c8d5db7ee4)