目的
- とにかくやりきることが一番の目的
- 毎日発信することで、発信する習慣作り
- 個人開発をやりきることで、実績作り
開発するもの
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プロジェクトを作成したことはあるけど、環境構築からはしたことがなかったのでいい勉強になった。
新しいディレクトリ構成がどうなるか楽しみ！
明日は画面を作っていく！