フレームワーク

JavaScript初学者がNode.jsのReactはてなブックマークボタンモジュールつくった

uraway/react-hatenabookmark-button · GitHub たった40行で作れてしまいました。 scrpitタグ作って必要なものを突っ込んでるだけです。 以下ソースコード。 モジュールをまとめました。 こちらを使用してください。 uraway/react-social-sharebuttons: Simple Re…

Uncaught ReferenceError: require is not defined 対処法まとめ

前にも記事を書きましたが、少し勉強した中で他にも解決法を見つけたのでまとめておきます。 さて、クライアントサイドのJavaScriptではrequireを使ってNode.jsのモジュールを読み込むことはできません。したがって以下の様なツールを組み込む必要があります…

いつまでimport Reactしているつもり? Webpack-ProviderPlugin

1日に何回このようなimport宣言を書いていますか? import React from 'react' import ReactDOM 'react-dom' import $ from 'jquery' ファイルごとにいちいちimportするのはめんどくさいですよね。書き忘れるとエラーも起こすし。 そこで活躍するのがWebpack…

React + Reails のUniversalアプリケーションの構築: Part 1

下記の記事の翻訳です。翻訳記事内の翻訳文以外のコンテンツ、ソースコード、画像の著作権は原作者にあります。 Universal React with Rails: Part I — Medium Author Alex Fedoseev reactive goofy on rails Planning the application この記事では、React…

Webpack + React + ES6の最小構成を考えてみる。

Webpack + React + ES6 Webpack + React + ES6の最小構成を考えてみる。 この記事は明石家サンタを見ながら書かれました。 (注: 2016/9/25 内容を大幅に改定、WebpackやReactの最新版に対応) 関連した過去記事 Webpack入門編 uraway.hatenablog.com Gulp + B…

Reduxまとめ(2)超訳

Actions Actionsはアプリからstoreにデータを送る情報のペイロード。storeに対する唯一のソースだ。 新しいtodo itemを追加することを表すactionの例を示す。 const ADD_TODO = 'ADD_TODO' { type: ADD_TODO, text: 'Build my first Redux app' } actionsは…

快適な開発環境を目指して(4)

fluxでの開発を見据えて、gulpを使った開発環境を作ってみた。 (Gulp + Browserify + ES6 + Babelify + Watchify + Brower-sync) 前提知識 gulp ES6(ES2015) 材料 gulp...自動タスク管理ツール Browsersync...ブラウザの自動リロード browserify...依存物を…

React-nativeで作ったiOSアプリを実機テストする

React-nativeで作ったiOSアプリを、実機テストしてみようとしたら、こんなエラーが出た。 AppDelegate.mを見てみる。 /** * Copyright (c) 2015-present, Facebook, Inc. * All rights reserved. * * This source code is licensed under the BSD-style lice…

React.jsとES6でTodoListアプリを作ってみる v2.0.0

uraway.hatenablog.com前に作ったTodoListをアップデートしてみました。 主な変更はチェック機能と削除機能の追加です。入力されたvalueをTodoListのデータの一つであるtextで取得できず苦労しました。 最初からデータのtextも、valueと名付けていればこんな…

ES6版ReactでTodo Listを作ってみる

これが、See the Pen Todolist by uraway (@uraway) on CodePen.ES6版だとこうなるSee the Pen TodoApp(ES6) by uraway (@uraway) on CodePen.でも、これだと不便なので、手を加えてみよう。 次回へ続く…

Stack Overflow で英語で質問してみる

Stack Overflow とは: Stack Overflow is a question and answer site for professional and enthusiast programmers. It's built and run by you as part of the Stack Exchange network of Q&A sites. With your help, we're working together to build a…

ES6版React.jsでBMI calc を作ってみる

BMIカテゴライズ 参考: Calculate Your BMI - Metric BMI Calculator See the Pen BMI calc by uraway (@uraway) on CodePen.bmiCalc関数によって、BMI数値を計算し、stateを更新して、BMI数値をカテゴライズする。トリガーを書き忘れてて数十分詰まった。 …

ES6版React.jsでCowntdown Timerを作ってみる

See the Pen countdown timer by uraway (@uraway) on CodePen. 参考: reactjs - React.jsでFormを扱う - Qiita Forms | React タイトル通り。 class CountdownTimer extends React.Component { constructor() { super(); this.tick = this.tick.bind(this)…

ES6版React.jsでClick counterを作ってみる

tutorialが難しいので、それより簡単なClick counterをES6で作ってみた。 気をつける点は、初期値はconstructorで定めることと、コールバック関数でオブジェクトが変なところを参照している時にはbindをしてあげること See the Pen Hello World by uraway (@…

React.jsで機能付きタイマーを作ってみる

uraway.hatenablog.com 前記事でサンプルコードを見ながらタイマーを作りました。さすがに寂しいので、start,stop,reset機能のボタン(button)を自分なりに作ってみました。 ボタン参考: React Componentでthisがundefinedになる問題の解決策初心者すぎてこ…

React.jsでタイマーを作ってみる

React.jsを使って、タイマーを作ってみます。 A JavaScript library for building user interfaces | React参考: Top-Level API | React ReactのAPIを眺めてみた - Umi Uyuraのブログ reactjs - React.jsのState - Qiita JavaScript - React.jsのチュートリ…

React.jsでHello world!

そういえばやってなかったので、Hello worldしてみます。 Getting Started | React

Tutorial|Reactでリアルタイムコメントボックスをつくる

Tutorial | Reactを参考にして、リアルタイムコメント機能をつくってみます。翻訳しながら少しずつ進めていきます。