Closed2023/03/08にクローズ2

MERN学習メモ

ピン留めされたアイテム

nekoniki 2021/08/01に更新

教材動画

以降のトピックは基本的に教材動画のチャプターごとに区切っていく。

nekoniki 2021/08/01に更新

Setting Up Frontend Project and Installing dependencies(4:45 〜 19:25)

※my-appはプロジェクト名なのでなんでもよい
注意点として、nodeのバージョンが "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"である必要がある。

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

使用したテンプレート

正常に作成されたら、プロジェクトに移動して起動。
ついでにエディタも立ち上げとく。

cd my-app
code ./
yarn start

上記の画面が表示されることを確認したら、テンプレート中のプリインストールで以降不要なものを綺麗にする+ホットリロードの動作確認。
具体的にはApp.tsxを以下のような感じにする

App.tsx

import React from 'react';
import './App.css';

function App() {
  return (
    <div className="App">
      Hello World
    </div>
  );
}

export default App;

その他インストール

Tailwind

https://tailwindcss.com/

yarn add -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9
yarn add @craco/craco

package.json

 {
    // ...
    "scripts": {
-     "start": "react-scripts start",
-     "build": "react-scripts build",
-     "test": "react-scripts test",
+     "start": "craco start",
+     "build": "craco build",
+     "test": "craco test",
      "eject": "react-scripts eject"
    },
  }

craco.config.jsを作って編集する。

touch craco.config.js

craco.config.js

module.exports = {
  style: {
    postcss: {
      plugins: [
        require('tailwindcss'),
        require('autoprefixer'),
      ],
    },
  },
}

tailwind.config.jsを作って編集する

npx tailwindcss-cli@latest init

tailwind.config.js

module.exports = {
  purge: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
    screens: {
      sm: "640px",
      md: "768px",
      lg: "1024px",
      xl: "1280px",
      "2xl":  "1536px"
    }
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

src/index.cssの先頭に以下の追加。

src/index.css

@tailwind base;
@tailwind components;
@tailwind utilities;

styled-components twin.macro react-responsive

yarn add styled-components twin.macro react-responsive

素材画像の追加

動画中では以下のものを使っている。

src/assets/imagesに追加。

このスクラップは2023/03/08にクローズされました