---
title: "Front End 筆記"
path: "Front End 筆記"
---

{%hackmd @RintarouTW/About %}

# Front End 筆記

# React <img class="icon" height="32" width="32" src="https://cdn.jsdelivr.net/npm/simple-icons@latest/icons/react.svg" style="filter:invert(.7)"></img>

Inmutable Object via {...orgObject, newProp: newValue }
Diff in object level instead of contents.

# Gatsby <img class="icon" height="32" width="32" src="https://cdn.jsdelivr.net/npm/simple-icons@latest/icons/gatsby.svg" style="filter:invert(.7)"></img>

https://www.gatsbyjs.org/

# Next.js <img class="icon" height="32" width="32" src="https://cdn.jsdelivr.net/npm/simple-icons@latest/icons/next-dot-js.svg" style="filter:invert(.7)"></img>

https://nextjs.org/

# Webpack <img class="icon" height="32" width="32" src="https://cdn.jsdelivr.net/npm/simple-icons@latest/icons/webpack.svg" style="filter:invert(.7)"></img>

- Dependency Management
- Minifier/Uglify
- Loaders (tons of loaders to support even different languages)
- Plugins
- Boundler

*webpack.config.js*

# GraphQL <img class="icon" height="32" width="32" src="https://cdn.jsdelivr.net/npm/simple-icons@latest/icons/graphql.svg" style="filter:invert(.7)"></img>

Try to replace RESTful.

A query language for your API
https://graphql.org/

## express-graphql

https://github.com/graphql/express-graphql

## Apollo

###### tags: `gatsby` `react` `graphql` `webpack` `nextjs`