reactのプロジェクト作成時のメモ

npx create-react-app プロジェクト名

npx create-react-app プロジェクト名 --typescript

まずcreate-react-appを使ってプロジェクトを作成する。
作成後プロジェクトにnode-sassを追加する。

yarn add node-sass --dev

あとはcssファイルの拡張子を.scssに変更するだけで使える。
App.css → App.scss

javascriptでインポートする場合

// javascript
import * as React from 'react';
import './App.scss';

yarn startの自動ビルドでscssのコンパイルもしてくれる。

yarn add enzyme enzyme-adapter-react-16 --dev

typescriptを使用してる場合は型定義も追加する。
ついでにjestの型定義も追加しておく。

yarnd add @types/enzyme @types/enzyme-adapter-react-16 @types/jest --dev

yarn add react-router-dom

プロジェクトルートに.envファイルを作成する
変数名の頭にREACT_APPとつけることによってJSから呼び出すことができるようになる。

// .env
REACT_APP_HELLO=hello
REACT_APP_WORLD=world

// javascript
console.log(process.env.REACT_APP_HELLO) // hello
console.log(process.env.REACT_APP_WORLD) // world

Imshoo