個人開発記録 2024/04/24

目的

• とにかくやりきることが一番の目的
• 毎日発信することで、発信する習慣作り
• 個人開発をやりきることで、実績作り

開発するもの

X(旧Twitter)のパクリ

構成

• バックエンド
  • python
  • django REST framework
• DB
  • postgreSQL
• フロントエンド
  • React

本編

今日はフロント編
Reactの環境構築をしていく
参考は以下サイト

npm/Node.jsのインストール

以下からnodeをインストール

バージョン確認

node --version

npmフォルダを作成する
nodeをインストール直後は、これがないと後続のコマンドでエラーになる

mkdir /c/Users/ユーザー名/AppData/Roaming/npm

Djangoがあるフォルダまで移動して、reactプロジェクトを作成
この場所がいいかは不明だが、同じ場所のほうが管理しやすそうなのでDjangoがあるフォルダにつくる

cd /c/workspace/likeX/
npx create-react-app react_app

起動!!!

cd rect_app
npm start

万華鏡写輪眼開眼!!!

chromeにreact開発必須ツール
React developer toolをインストール

ディレクトリ構成はbulletproof-reactのものを採用
メリットはよくわかってないけど、これがいい的な記事が上がっていたので、これを採用

仕事で関わったreactプロジェクトではAtomic Designが採用されていたため、どんな違いがあるか楽しみ

chatGPT作の、以下シェルを実行してsrc配下に各ディレクトリを作成

#!/bin/bash

# ディレクトリを作成する基本パス
base_dir="./"

# 作成するディレクトリのリスト
directories=(
    "assets"
    "components"
    "config"
    "features"
    "hooks"
    "lib"
    "providers"
    "routes"
    "stores"
    "test"
    "types"
    "utils"
)

# ディレクトリを作成する
for dir in "${directories[@]}"; do
    mkdir -p "${base_dir}${dir}"
done

echo "All directories have been created."

features配下に機能単位のディレクトリを作成していくらしいので
features配下にcreatUserディレクトリを作成

mkdir /react_app/src/features/creatUser

さっきのシェルを修正して、createUser配下に以下ディレクトリを作成
プラスindex.tsファイルも作成

"api"
"assets"
"components"
"hooks"
"routes"
"stores"
"types"
"utils"

感想

仕事で出来合いのreactプロジェクトを作成したことはあるけど、環境構築からはしたことがなかったのでいい勉強になった。
新しいディレクトリ構成がどうなるか楽しみ！
明日は画面を作っていく！