自動化無しに生活無し

React学習のため、とりわけ扱いやすいGatsbyを使うことにした。 学習完了次第。このサイトは、HUGOからGatsbyに移行する予定。 本記事では、Gatsbyを調べてわかったことをまとめる。学習の都度まとめているため、誤りが含まれる可能性がある点をご了承いただきたい。 実装方法 Ubuntu 22.04 LTS 環境下で動作させている。 sudo npm install -g gatsby-cli まず、グローバル環境下でGatsbyをインストールする。 これでGatsbyコマン ...

index.js の root.render( <React.StrictMode> <App /> </React.StrictMode> ); を root.render( <App /> ); に直す。 補足 これは StrictMode が開発段階で動作チェックをするためにやっていること。 本番環境に移行した場合、2度実行されることはない。 そのため、放置していても問題はない。 参考元 https://stackoverflow.com/questions/73002902/api-getting-called-twice-in-react ...

最近(2018年以降)の開発では関数ベースのコンポーネントが主流のため、一部を書き換えた。 React App.js import React, { useState, useEffect } from "react"; import Modal from "./components/Modal"; import axios from "axios"; const App = () => { const [topicList, setTopicList] = useState([]); const [modal, setModal] = useState(false); const [activeTopic, setActiveTopic] = useState({ comment: "" }); // コンポーネントがレンダリングされるときに実行する useEffect(() => { refreshList(); }, []); // ページロード const refreshList = () => { axios .get("/api/topics/") .then((res) => setTopicList(res.data)) .catch((err) => console.log(err)); }; const handleSubmit = (topic) => { if (topic.id) { axios .put(`/api/topics/${topic.id}/`, topic) .then(() => refreshList()) .catch((err) => console.log(err)); } else { axios .post("/api/topics/", topic) .then(() => refreshList()) .catch((err) => console.log(err)); } closeModal(); }; const handleDelete = (topic) => { axios .delete(`/api/topics/${topic.id}/`) .then(() => refreshList()); }; const openModal = (topic) => { if (topic.id) { setActiveTopic(topic); } else { setActiveTopic({ comment: ...

Django Rest Framework (以下、DRF)のビューの書き方をまとめる。 下記記事で紹介した素のDjangoのビューと同様、DRFでも継承するビューによって大きく書き方が全く違う。 【関連記事】 : 【Django】ビュー関数とビュークラスの違い、一覧と使い方 本記事では、状況に応じて、適切なビューがコーディングできるようビューの書き方をまとめる。 前提 モデル from django.db import models class Topic(models.Model): comment = models.CharField(verbose_nam ...

textarea要素には、valueプロパティを使って値を与える 普通のHTMLでは、textareaに最初から値を入れておきたい場合、子要素に直接文字を書くと良い。 しかし、Reactで同じことをやるとエラーになる。 <textarea className="form-control" name="comment" onChange={this.handleChange}>{this.state.activeItem.comment}</textarea> そこで、valueプロパティを使う。 <textarea className="form-control" name="comment" onChange={this.handleChange} value={this.state.activeItem.comment}></textarea> これで、 Use the `defaultValue` or `value` props instead of setting children on <textarea>. というエラーは解決される。 リスト内の要素を識別できるよう、keyプロパティを与える Each child in a list should have a unique ...

Reactのgitignoreには、node_modulesが含まれている。 そのため、クローンしたReactのプロジェクトを動かすには、 npm installを前もって実行しておく必要がある。 git clone https://github.com/seiya0723/startup-react cd startup-react npm install npm start ...

ページが複数あるサイトをReactで作る場合、react-router-domでルーティングを行うと良いだろう。 npm install react-router-dom 使い方 コンポーネントを作る src/components/に以下ファイルを配置。 Home.jsx Portfolio.jsx Profile.jsx Home.jsx import { Link } from "react-router-dom"; export const Home = () => { return ( <> <div>ここはホームです</div> <Link to={`/portfolio`}>ポートフォリオ</Link> <Link to={`/pr ...

ReactはJavaScriptのライブラリであり、サーバーレスなのでGitHubPagesへのデプロイが可能。 端的に言うと、ビルドしてGitHubにプッシュするだけ。 【前提知識】package.jsonを編集して独自のnpmコマンドを作る package.jsonを編集して独自のnpmコマンドを作る。 例えば、 以下のようにscriptsに"hoge" : "echo 'hoge' "と追加してお ...

『モダンJavaScriptの基本から始める React実践の教科書 （最新ReactHooks対応）』みたいな教科書をなぞってみたけど、よくわからない、実践的な物を作りたいという方向け。 対象読者はReactをインストール済み、モダンなJavaScript構文を理解できる方向けとする。 流れ 以下、流れ プロジェクトを作る(1分) srcディレクトリ内のファイルを全て削除、index.jsとApp.jsxの2 ...

例えば、以下のような配列があったとする。 const topics = ["aaa","bbb","ccc"]; この配列をレンダリングする時、このようにしてしまうと return ( <> { topics.map( (topic) => { return ( <div className="border">{ topic }</div> ); }) } </> ); この警告が出る。 なぜ『Warning: Each child in a list should have a unique “key” prop.』と警告が出るのか？ Reactで配列をレンダリングする際にkey属性を指定しないと、無駄なレンダリングが発生してしまい、パフォーマンスが低下するから。 例えば、key未指定で3つのデータがレンダリ ...