初心者向け
【Restful】Django+Reactビギナーが40分で掲示板アプリ(SPA)を作る方法
DjangoとReactのTodoアプリ(SPA)を解析する
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- ...【CSS】変数を使用する【テーマカラーの統一、スキンの作成などに】
SCSSなどではなく、素のCSSで変数が使えることに今になって気づいた。 ということで、実際に扱っていく。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>Welcome to my portfolio site !!</title> <style> :root{ --base-color: #111111; --theme-color: #00ffcc; --font-color: white; } body { background:var(--base-color); color: var(--font-color); margin:0; } h1 { background: var(--theme-color); } </style> </head> <body> <h1>Welcome to my portfolio site !!</h1> <h2>Profile</h2> <h2>Portfolio</h2> </body> </html> :root{}で宣言した変数 --base-color等がプロパティの値として呼び出すことができる。 予めテーマカラーなどをまとめて冒頭に書いておけば、それを書き換えるだけですぐに対応できる。 この変数 ...【React】関数コンポーネント(function App)とクラスコンポーネント(class App extends Component)の違い
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を組み合わせる方法論と問題の考察
Reactビギナーが15分で掲示板アプリを作る方法
- 作成日時:
- 最終更新日時:
- Categories: フロントサイド
- Tags: react スタートアップシリーズ 初心者向け
【React】警告文の『Warning: ReactDOM.render is no longer supported in React 18 』の対処法【createRootを使用する】
【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要素は/(スラッシュ)をタグの末尾に書く【inputタグ、imgタグ等】
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")); 結論 閉じ ...【Django】OneToOneFieldでつながっているデータの取得方法【モデル名を小文字にした属性名で取得できる】