React
お手本にしたもの GitHub - sugiurae/react-tutorial_part7 at part7_4
ライフサイクルの学習に参考にした記事 qiita.com useEffect は、２つの引数を取る。 １つ目の引数は関数で、２つ目の引数は依存する変数の配列。 useEffect を利用すると、先程説明した componentDidMountと componentDidUpdate のどちらの場合でも、第一引…
参考 qiita.com qiita.com tkybpp.hatenablog.com https://style.potepan.com/articles/20652.html techacademy.jp NGパターン 'use strict'; import React,{ useState } from 'react'; import { createStore } from "redux"; export default function Conte…
こう書くと中に何が入っているかわかりやすくなる。 ``` onClick={(e) => {props.onSaveItem();console.log(e)} #Reactの初歩知識などをhoshi-takanoriさんに伝授してもらう [https://teratail.com/questions/314399:title] #最近の create-react-app で作っ…
１：開発準備 <html lang="ja"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>React Todo App</title> <link rel="stylesheet" href="css/styles.css" /> <script src="https://unpkg.com/react@17/umd/react.development.js"></script> <…</link></meta></meta></head></html>
参考 yucatio.hatenablog.com ▼Reduxの導入 qiita.com Reactの世界 ・viewはユーザの動作(クリックなど)が発生したら、actionを作成してstoreに渡す(dispatchする)。 ・storeは状態(state)を保持している。dispatchが呼ばれると、storeはactionとstateをredu…
参考 サンプル import React from 'react'; class ContactForm extends React.Component { render() { return ( <div className='contact-form'> <form> <p>メールアドレス（必須）</p> {/* inputタグを追加 */} <input /> <p>お問い合わせ内容（必須）</p> {/* textareaタグを追加 */} <textarea /> {/* 送信ボタンを追加 */} <input</textarea></form></div>…
変数がtrueのときだけモーダルが表示されるようにする。 変数modalを用意し、条件分岐を行えば、変数がtrueのときだけJSXが代入される。 変数に代入するJSXが複数行の場合、JSXを()で囲む。 ※モーダルとは「モーダルウィンドウ」の略。「開いている間は親ウ…
import React from 'react'; class App extends React.Component { constructor(props) { super(props); this.state = {プロパティ名: 値}; } render() { return ( <div> {/* stateの値を取得するには「this.state.プロパティ名」を入れる*/} <h1>こんにちは、{this.s</h1></div>…
イベントの書き方 ・アロー関数を使って、タグ内に イベント名={() => { 処理 }} と書くことで、指定したタイミングで処理を実行できる。 アロー関数はJavaScriptなので、{}で囲むことを忘れないように 「クリックされた時に処理を実行する」onClickイベント…
Dockerを使ってサーバーを立ち上げる ローカル環境を使って実施。 変数をタグを入れて表示する ・{}で変数を囲い、変数にhtmlを入れて表示 const contentData = ({data2}) => ({data2}) const ja = "*****Japan!"; return ( <h1>{ja}</h1> ちなみに、最初、「Japan!」…
Reactのチュートリアル課題で作成。 一部はTeratailで質問投稿し、添削していただいた。 課題でReactのテーブルを作成。でも、これでは出力できるだけで、フォームに入力して追加させることができない・・・ 'use strict'; import React from 'react'; expor…
