React （GraphQL + Tailwind CSS）の構成でアプリを作成しました【Pokemon Application】

環境の準備

①ターミナルでreactアプリケーションを作成する。

$ npx create-react-app <プロジェクト名>
$ cd <プロジェクト名>
$ npm start

② 必要なパッケージをインストールする。

公式サイト:Tailwind CSS

$ npm install -D tailwindcss postcss autoprefixer
$ npx tailwindcss init -p

$ yarn add @apollo/react-hooks
$ yarn add apollo-boost
$ yarn add graphql
$ yarn add graphql-tag

コンポーネント・ファイル構成

 src
  ├─ components
  ├─ comtainer
  ├─ graphql
       ├── DetailCard.js
       ├── Header.js
       └── SummaryCard.js
  ├── App.js
  ├── index.css
  └── index.js
 ├── .env
 ├── craco.config.js
 ├── tailwind.config.js

参考サイト

Build a Pokemon App | React & GraphQL Tutorial | React Tutorial 2020