Eclipse Eclipseのステップカウンタ(step counter)プラグイン設定方法
react.js
node.jsnpxでローカルパッケージを実行できるんです！
gulpとか使用するとき、install方法として、npm install -g gulpとか書いてますよね。 これグローバルにinstallしてるので、グローバルが汚染されて嫌だなと思ってました。 ローカルインストールすると、gulpコ...
react.jsReactのinput部品をバリデートする
Reactのinput部品をバリデートする 「Reactでinput部品を扱う」を投稿しましたが、今度は入力値をバリデートしてみます。 入力値はstateを使用して管理するので、this.setStateする前に入力値をチェックします。...
react.jsReactでinput部品を扱う
Reactでinput部品を扱う Reactコンポーネントでinput部品を扱ってみます。 とりあえずレンダリングしてみます。 class DynaForm extends React.Component { constructo...
react.jsReactのクリックイベントはonclickではなくonClick
ReactのクリックイベントはonclickではなくonClick Reactコンポーネントを定義する際は、onclickでは動作しません。 onClick（Cが大文字）を使用します。 <div id="koko"><...
react.jsReactコンポーネントのステート（状態）を管理する
Reactコンポーネントのステート（状態）を管理する Reactコンポーネントのステートとは、たとえばラジオボタンの何れがオンになっているかという状態を管理記憶するための機能です。 stateオブジェクトを使用することで実現します。 ...
ECMA Script6ReactでES6のmapメソッドを使用してリストを作成する
ReactでES6のmapメソッドを使用してリストを作成する HTMLリストをレンダリングするReactコンポーネントを作成してみます。 class Test extends React.Component { render() {...
react.jsReactの仮想DOMを更新する
Reactの仮想DOMを更新する Reactには仮想DOMという機能があります。この機能はDOMの状態をメモリ上に保持して更新前後の変更箇所の実を更新するという仕組みらいしく、その為、レンダリングが非常に速いという特徴があるようです。 ...
react.jsReactのプロジェクトを作成する
Reactのプロジェクトを作成する Reactのプロジェクトをfacebook公式のcreate-react-appコマンドを使用して作成してみます。 node.jsがインストールされていることが前提です。 参考：nodistからイン...
react.jsReactのコンポーネントは再利用可能
Reactのコンポーネントは再利用可能 一度定義したコンポーネントはいくらでも作成して再利用することができます。 const Test = (attr) => {// アロー関数です(wordpressで上手く表示されないので) ...
react.jsReactのReact.Componentメソッド
ReactのReact.Componentメソッド Reactでコンポーネントを作成するには、React.Componentメソッドを使用します。（React15.5からReact.createClassメソッドは非推奨） ES6のcl...
react.jsReactのReact.createClassメソッド
ReactのReact.createClassメソッド React.createClassメソッドを使用して、Reactのコンポーネントを作成することができます。 const Test = React.createClass({ r...
react.jsReactコンポーネントのファンクショナルコンポーネントとは
Reactコンポーネントのファンクショナルコンポーネントとは ファンクショナルコンポーネントとは、その名のとおり関数で定義します。 const Test = (attr) => { return <h1>hello...
react.jsReactのJSXとは
ReactのJSXとは JSXというのはJavaScriptの拡張言語のことで、このJSXでは、JS内にhtmlを記述することができます。 以下、例です。 <script type="text/babel"> cons...
react.jsReactでhello world
Reactでhello world React.jsを使ってとりあえずレンダリングしてみましょう。習うより慣れろという感じで。 React.jsを使うには以下の3行をheadタグ内に記述する必要があります。（とりあえず） <sc...
JavaScriptRedux 入門
Redux とは state(状態)を管理することに特化した、ライブラリです。 React.js を利用していると、コンポーネントに state が含まれ状態の管理が複雑になります。 Reduxでstateを一元管理し、コンポーネントとs...
JavaScriptReact.js入門
React.js とは Facebook が開発した、UI パーツを作成するライブラリです。仮想 DOM という仕組みを採用し、ページの表示をはやくしています。 前提 node.js がインストールされていること。 環境 記事作成...