自動化無しに生活無し

index.js の root.render( <React.StrictMode> <App /> </React.StrictMode> ); を root.render( <App /> ); に直す。 参考元 https://stackoverflow.com/questions/73002902/api-getting-called-twice-in-react ...

【Restful】Django+Reactビギナーが40分で掲示板アプリ(SPA)を作る方法【axios】 ではクラスベースのコンポーネントを使っている。 最近の開発では関数ベースのコンポーネントが主流のため、一部を書き換えた。 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/") ...

この構成の場合、Djangoのデフォルトの認証機能でも実現はできるが、SPAのコンセプトが台無しになるため、JWTを使う。 JWT とは？ JSON Web Token の略である。 JWTとは、認証情報や権限を含んだ文字列(トークン)のこと。JSON形式で送受信される。 参照: https://ja.wikipedia.org/wiki/JSON_Web_Token クライアント側が、ログイン用のユーザー名とパスワードを入力 サーバーがその検証をする。検証の結果、問題なければトークンを生成、これがJWTである。 レスポンスと ...

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

本記事は、【Restful】Django+Reactビギナーが40分で掲示板アプリ(SPA)を作る方法【axios】のFetchAPI版である。 axiosを別途インストールせず、FetchAPIを使っている。 流れ React、Djangoの各プロジェクトを作る Djangoの必要なライブラリをインストール Djangoのsettings.pyの編集 Djangoのmodels.pyの編集 Djangoのse ...

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をVimでコーディングしているとき、不自由だと感じることが多々ある。 その1つが、.jsxファイルのHTML部をコーディングしているとき、改行でインデントしてくれないこと。 例えば、下記のコードのHTMLで改行をしても、HTML形式でインデントをしてくれない。 return ( <> <textarea id="textarea" className="form-control"></textarea> <input onClick={ addTopic } type="button" value="送信" /> {topics.map( (topic,i) => ( <div className="border" key={i}> <div> { topic } </div> <div className="text-right"> <input onClick={ deleteTopic } className="btn btn-danger" type="button" value="削除 ...

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

Djangoで開発を進めていき、途中でReactのSPAを考える場合。 一部のDjangoの技術が使用できない。 本記事ではDjango+ReactのSPAを作る際、使用できない(もしくは使用できないと思われる)Djangoの技術をまとめる。 Django Template Language 当然だが、Reactがレンダリングを行うため、DjangoTemplateLanguageは使えなくなる。 ifやforはJavaScriptに含まれるため問 ...

『Djangoビギナーが40分で掲示板アプリを作る方法 』を終え、DjangoとReactを組み合わせ、SPAを作りたいと思った方向け。 40分はあくまでも目安。 内部構造に関しては、『DjangoとReactを組み合わせる方法論と問題の考察 』に解説がある。 2023年5月3日現在、編集機能の実装を考慮中。近日追記予定。 2024年4月30日追記。モーダルダイアログを使用して編集機能を搭載。 流れ React、 ...