自動化無しに生活無し

DjangoとReactを組み合わせる方法論と問題の考察の続き。 コードを書いてみたので、それを元にわかった事をまとめていく。間違いが有るかもしれないので、ご注意をば。 動作原理と全体像は↑の記事で解説しているので、本記事では割愛。コードの意味をまとめていく。 サーバーサイド(Django) config/setttings.py 編集した箇所のみ掲載 INSTALLED_APPS = [ "todo", 'corsheaders', 'rest_framework', 'django.contrib.admin', 'django.contrib.auth', 'django.contrib.contenttypes', 'django.contrib.sessions', 'django.contrib.messages', 'django.contrib.staticfiles', ] MIDDLEWARE = [ 'django.middleware.security.SecurityMiddleware', 'django.contrib.sessions.middleware.SessionMiddleware', 'django.middleware.common.CommonMiddleware', 'django.middleware.csrf.CsrfViewMiddleware', 'django.contrib.auth.middleware.AuthenticationMiddleware', 'django.contrib.messages.middleware.MessageMiddleware', 'django.middleware.clickjacking.XFrameOptionsMiddleware', 'corsheaders.middleware.CorsMiddleware', ] CORS_ORIGIN_WHITELIST = [ 'http://localhost:3000' ] アプリ、django-cors- ...

ページが複数あるサイトをReactで作る場合、react-route-domでルーティングを行うと良いだろう。 npm install react-route-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={`/pro ...

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

Reactのサンプルコードを読み漁っていると、このような書き方をよく見かける。 function App() { return <h1>HelloWorld</h1>; } import { Component } from "react"; class App extends Component { render() { return <h1>HelloWorld</h1>; } } これは機能的にはいずれも同じ。 関数コンポーネントか、クラスコンポーネントかの違いである。 公式のドキュメントにpropsの扱い方も書かれてある https://ja.reactjs.org/docs/components-and-props.html#function-and-class-components 余談 ちなみに関数はこのようにアロー関数で書くこともあるので、モダンなJavaScriptの書き方を知らないとますますややこしい。 const App = ...

DjangoとReactを組み合わせることで、画面遷移の全く無いSPA(シングルページアプリケーション)を作ることができる。 もちろん。jQueryのAjaxを使うことでも簡単に実現はできるが、 仮想DOMが使えない 手続き型である などの点から、開発規模が大きくなると、SPAを維持することが難しい。 だからDjangoとReactを組み合わせて効率的にSPAを開発する。 しかし、問題点が多々ある。モダンなや ...

『モダン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つのデータがレンダリ ...

【React】Helloworldの仕組みの解説にて、 import ReactDOM from "react-dom"; const App = () => { return <h1>HelloWorld</h1>; }; ReactDOM.render(<App /> , document.getElementById("root")); などと書いたが、これでは以下のような警告が出てくる。 Warning: ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it's running React 17. Learn more: https://reactjs.org/link/switch-to-createroot 『ReactDOM.render()は今後使われなくなるから、createRootを使用しましょう』という意味。 よって、以下のように書き換えると、この警告は対処できる。 import React from "react"; import ReactDOM from "react-dom/client"; const App = () => { ...

Reactでは、閉じタグがないHTMLを書く時は、以下のようにする。 export const App = () => { return ( <> <input type="button" value="送信" /> </> ); } このように /がないと、エラーになってしまう点に注意。 export const App = () => { return ( <> <input type="button" value="送信"> </> ); } これはAppを呼び出すときも同様である。<App>としてしまうとエラーになる。 // React import ReactDOM from "react-dom"; import { App } from "./App"; ReactDOM.render(<App /> , document.getElementById("root")); 結論 閉じ ...

TypeScriptとは TypeScriptを使うことで、変数を宣言する際に型を定義する事ができる。 例えば、予め文字列型で定義した変数に対しては、文字列型以外を入れると、エラーが起こる。 let message: string = "こんにちは"; console.log(message); message = "おはよう"; console.log(message); //ここでエラーが起こる。 message = 0; console.log(message); 配列内の変数を取り決めたい場合、<>の中に型名を入れるジェネリクス(Generic ...