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