Visual Studio Code
VSCodeでlaunch.jsonを作成してデバッグする方法
react.js
react.js Props.children – 【React】
Props.children - 【React】Propsにchildrenという変数みたいなものがあります。呼び出し元のjsからコンポーネントにデータを渡します。index.jsindex.jsからProps.childrenを渡します。...
react.js Props – 【React】
Props - 【React】Propsをコンポーネントに渡すことができます。呼び出し元のjsからコンポーネントにデータを渡します。index.jsindex.jsからPropsを渡します。titleとcolorを追加してコンポーネントにP...
react.js useState – 【React】
useState - 【React】コンポーネントの状態をステートとして管理します。イベントが発生したときにステート変数を更新してレンダリングを行います。import { useState } from 'react';useStateus...
react.js WSL2環境でnpm start npm run buildが遅い – 【React】
WSL2環境でnpm start npm run buildが遅い - 【React】Reactアプリをmnt/c/~配下に作成すると、npm startやnpm run buildが極端に遅いです。/mnt/~以外の/home/xxx/配...
react.js react-router-domを使用してルーティング – 【React】
react-router-domを使用してルーティング – 【React】前提 項目 内容 React v18.2.0ルーティングReactはルーティング機能がありませんが、react-route-domモジュールを使ってルーティングするこ...
node.js npxでローカルパッケージを実行できるんです！
gulpとか使用するとき、install方法として、npm install -g gulpとか書いてますよね。これグローバルにinstallしてるので、グローバルが汚染されて嫌だなと思ってました。ローカルインストールすると、gulpコマンド...
react.js Reactのinput部品をバリデートする
Reactのinput部品をバリデートする「Reactでinput部品を扱う」を投稿しましたが、今度は入力値をバリデートしてみます。入力値はstateを使用して管理するので、this.setStateする前に入力値をチェックします。以下は数...
react.js Reactでinput部品を扱う
Reactでinput部品を扱うReactコンポーネントでinput部品を扱ってみます。とりあえずレンダリングしてみます。class DynaForm extends React.Component { constructor(props)...
react.js ReactのクリックイベントはonclickではなくonClick
ReactのクリックイベントはonclickではなくonClickReactコンポーネントを定義する際は、onclickでは動作しません。onClick（Cが大文字）を使用します。※Reactではイベントはキャメルケースになります onCl...
react.js Reactコンポーネントのステート（状態）を管理する
Reactコンポーネントのステート（状態）を管理するReactコンポーネントのステートとは、たとえばラジオボタンの何れがオンになっているかという状態を管理記憶するための機能です。stateオブジェクトを使用することで実現します。コンポーネン...
ECMA Script6 ReactでES6のmapメソッドを使用してリストを作成する
ReactでES6のmapメソッドを使用してリストを作成するHTMLリストをレンダリングするReactコンポーネントを作成してみます。class Test extends React.Component { render() { const...
react.js Reactの仮想DOMを更新する
Reactの仮想DOMを更新するReactには仮想DOMという機能があります。この機能はDOMの状態をメモリ上に保持して更新前後の変更箇所の実を更新するという仕組みらいしく、その為、レンダリングが非常に速いという特徴があるようです。setI...
react.js Reactのプロジェクトを作成する
Reactのプロジェクトを作成するReactのプロジェクトをfacebook公式のcreate-react-appコマンドを使用して作成してみます。node.jsがインストールされていることが前提です。参考：nodistからインストールする...
react.js Reactのコンポーネントは再利用可能
Reactのコンポーネントは再利用可能一度定義したコンポーネントはいくらでも作成して再利用することができます。const Test = (attr) => {// アロー関数です(wordpressで上手く表示されないので) return ...
react.js ReactのReact.Componentメソッド
ReactのReact.ComponentメソッドReactでコンポーネントを作成するには、React.Componentメソッドを使用します。（React15.5からReact.createClassメソッドは非推奨）ES6のclassキ...
react.js ReactのReact.createClassメソッド
ReactのReact.createClassメソッドReact.createClassメソッドを使用して、Reactのコンポーネントを作成することができます。const Test = React.createClass({ render(...
react.js Reactコンポーネントのファンクショナルコンポーネントとは
Reactコンポーネントのファンクショナルコンポーネントとはファンクショナルコンポーネントとは、その名のとおり関数で定義します。const Test = (attr) => { return <h1>hello, world</h1>;};...
react.js ReactのJSXとは
ReactのJSXとはJSXというのはJavaScriptの拡張言語のことで、このJSXでは、JS内にhtmlを記述することができます。以下、例です。<script type="text/babel"> const a = <h1>hell...
react.js Reactでhello world
Reactでhello worldReact.jsを使ってとりあえずレンダリングしてみましょう。習うより慣れろという感じで。React.jsを使うには以下の3行をheadタグ内に記述する必要があります。（とりあえず）<script src=...
JavaScript Redux 入門
Redux とはstate(状態)を管理することに特化した、ライブラリです。React.js を利用していると、コンポーネントに state が含まれ状態の管理が複雑になります。Reduxでstateを一元管理し、コンポーネントとstate...
JavaScript React.js入門
React.js とはFacebook が開発した、UI パーツを作成するライブラリです。仮想 DOM という仕組みを採用し、ページの表示をはやくしています。前提node.js がインストールされていること。環境記事作成時の環境を記載してい...