React × TypeScript × Sass × Parcel 環境構築

## この内容について
Reactの環境でおすすめなセットを全て網羅した環境を作成していきます。
手順通りにやれば、めちゃくちゃ簡単なので一度やってみてください。

## Reactとは
ReactはUI構築のためのJavaScriptライブラリのこと
[React公式サイト](https://ja.reactjs.org/)

## TypeScriptとは
JavaScriptを拡張して作られたプログラミング言語。
簡単に言うと、型定義できるJavaScript。
[TypeScript公式サイト](https://www.typescriptlang.org/index.html)

## Sassとは
「Syntactically Awesome StyleSheet」の略で、
CSSを効率的に記述できるように設計・開発されたRuby製のCSSメタ言語のこと。
[Sass公式サイト](https://sass-lang.com/)

## Parcelとは
nodeで動くモジュールバンドラのこと
[Parcel公式サイト](https://parceljs.org/)

## npmインストールと初期画面の設定
```terminal:ターミナル
mkdir react-typescript-parcel
cd react-typescript-parcel
npm init -y
touch index.html
```
- react-typescript-parcelというフォルダを作成
- react-typescript-parcelというフォルダに移動
- npmをインストール(package.jsonがインストールされる)
- index.htmlというファイルを作成

```html:index.html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>React×TypeScript×Sass×Parcel</title>
</head>
<body>
  <div class="container"></div>
  <script src="src/index.tsx"></script>
</body>
</html>
```
- index.htmlの中身を記述

## TypeScriptの設定
```terminal:ターミナル
mkdir src
cd src
touch index.tsx
```
- srcというフォルダを作成
- srcというフォルダに移動
- index.tsxというファイルを作成

```tsx:index.tsx
import * as React from "react";
import * as ReactDOM from "react-dom";

const ROOT = document.querySelector(".container");

ReactDOM.render(<h1>Hello</h1>, ROOT);
```
- index.tsxの中身を記述

```terminal:ターミナル
cd ..
npm i react react-dom typescript
npm i @types/react @types/react-dom parcel-bundler -D
```
- 親ディレクトリに移動
- react react-dom typescriptを使用する為のフォルダをインストール(node_moduleというフォルダが作成される)
- react react-domをtypescriptに対応

```json:package.json
"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1"
},
↓↓↓↓↓↓↓↓↓↓変更↓↓↓↓↓↓↓↓↓↓
"scripts": {
  "start": "parcel index.html"
},
```
- package.jsonファイルの中身の一部を書き換える

```terminal:ターミナル
touch tsconfig.json
```
- tsconfig.jsonファイルを作成

```json:tsconfig.json
{
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "jsx": "react",
    "module": "commonjs",
    "noImplicitAny": true,
    "outDir": "./build/",
    "preserveConstEnums": true,
    "removeComments": true,
    "sourceMap": true,
    "noImplicitAny": true,
    "target": "es5"
  },
  "include": [
    "./src/**/*"
  ]
}
```
- tsconfig.jsonファイルの中身を記述

```terminal:ターミナル
npm start
```
- nodeモジュールをスタートさせる。(http://localhost:1234/ でアクセス可能になる)
- control + c でnodeモジュールを止める

```json:package.json
"scripts": {
  "start": "parcel index.html"
},
↓↓↓↓↓↓↓↓↓↓変更↓↓↓↓↓↓↓↓↓↓
"scripts": {
  "start": "parcel index.html",
  "build": "parcel build index.html --no-cache"
},
```
- package.jsonファイルの中身を変更

```terminal:ターミナル
cd src
mkdir components styles
cd components
touch App.tsx
cd ../..
```
- srcフォルダに移動
- componentsフォルダとstylesフォルダを作成
- componentsフォルダに移動
- App.tsxというファイルを作成
- react-typescript-parcelというフォルダ(2つ上)に移動

```typescript:App.tsx
import * as React from "react";

export class App extends React.Component<any, any> {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}
```
- App.tsxの中身を記述

```typescript:index.tsx
import * as React from "react";
import * as ReactDOM from "react-dom";
import { App } from "./components/App";

const ROOT = document.querySelector(".container");

ReactDOM.render(<App name="Hikaru" />, ROOT);
```
- index.tsxの中身を変更

```json:package.json
"scripts": {
  "start": "parcel index.html -p 3000",
  "build": "parcel build index.html --no-cache"
},
```
- package.jsonの中身を変更(-p 3000を付け足す)

### 確認
```terminal:ターミナル
npm start
```
- nodeモジュールをスタートさせる。(http://localhost:3000/ でアクセス可能になる)
- control + c でnodeモジュールを止める

```terminal:ターミナル
cd src/styles
touch style.scss
cd ../..
```
- src/stylesフォルダに移動
- style.scssファイルを作成
- react-typescript-parcelというフォルダ(2つ上)に移動

```scss:style.scss
$background-grey: #f3f3f3;

body{
  background-color: $background-grey;
}
```
- style.scssファイルの中身を適当に記述

```terminal:ターミナル
npm i node-sass -D
```
- sassフォルダをインストール

```typescript:index.tsx
import * as React from "react";
import * as ReactDOM from "react-dom";
import { App } from "./components/App";
import "./styles/style.scss";

const ROOT = document.querySelector(".container");

ReactDOM.render(<App name="Hikaru" />, ROOT);
```
- index.tsxの中身を変更

### 確認
```terminal:ターミナル
npm start
```
- nodeモジュールをスタートさせる。(http://localhost:3000/ でアクセス可能になる)
- control + c でnodeモジュールを止める

## まとめ
この記事が良いと思った方は、LGTMをしていただければ嬉しいです！
フォローも是非お願い致します(^^)