タグ

ブックマーク / mae.chab.in (5)

  • ReactとHTML5 Form Validationでリアルタイムチェック機能付きフォームを作る

    サンプルについてメールアドレスとURLを入力して送信するフォームです。リアルタイムで入力値のフォーマットと入力の有無のチェックを行います。入力値に問題がなければ、送信ボタンが押せるようになります。ボタンを押すと、入力値がアラートとして表示されます。※サンプルなので、かなりシンプルに作っています。 サンプルのソースコードはGitHubで確認可能です。 maechabin/react-validation-formGitHub実際にReactの実装を行っているのが以下のJSファイルとなります。 https://github.com/maechabin/react-validation-form/blob/master/src/app.js実装方法の説明の前にReactの基礎知識の説明や開発環境の構築方法などは省略します。その辺の情報については、当ブログの以下の記事などを参考にしてください

    ReactとHTML5 Form Validationでリアルタイムチェック機能付きフォームを作る
  • Reactをnpmでビルドする方法 browserify (watchify) + babelify編

    2015年10月7日(水)にReactの最新バージョンである「React v0.14」がリリースされました。今回のバージョンでは、「Reactはnpm経由で使用し、browserifyやwebpackのようなツールを使ってコードを一つのバンドルの中にビルドする開発方法」が推奨されています。今回の記事では、browserifyを使った方法になりますが、npm経由でReactを使う方法について詳しく紹介していきたいと思います。 はじめに 今回の記事を書くにあたり、簡単なサンプルをReact v0.14で作りました。フォームに入力したテキストを出力するだけのものです。 ソースコードもGitHubにアップしているので、参考にしていただければと思います。 maechabin/react0.14-sample – GitHubまた最新バージョンのReact 0.14については、以下を参考にしてください

    Reactをnpmでビルドする方法 browserify (watchify) + babelify編
  • React v0.14 リリースノート【日本語翻訳】

    2015年10月7日(水)に待望の「React 0.14」がリリースされました。ReactはFacebookが開発しているJavaScripのUI開発用のフレームワークです。当ブログでもいくつかReactに関する記事を投稿しています。今回新しいバージョンの理解を深めるために日語に翻訳してみました。けっこう簡単に訳せるかなと思ったら、意外と骨が折れました。いつものことですが、Google翻訳よりはマシだと思いますので、おかしな訳の部分もあるかと思いますが参考にしていただければと思います。 当記事は以下のページを日語に翻訳したものとなります。 React v0.14 | ReactReact v0.14October 7, 2015 by Ben Alpert We’re happy to announce the release of React 0.14 today! This rel

    React v0.14 リリースノート【日本語翻訳】
  • React.js v0.14 チュートリアル【日本語翻訳】

    Your first component: はじめてのコンポーネントReact is all about modular, composable components. For our comment box example, we’ll have the following component structure: Reactはモジュラー、構成可能(コンポーザブル)なコンポーネントが全てです。コメントボックスの例では、以下のような構造のコンポーネントを使っていきます。 Let’s build the CommentBox component, which is just a simple <div>: CommentBoxコンポーネント(シンプルな<div>)を作りましょう。 // tutorial1.js var CommentBox = React.createClass({ ren

    React.js v0.14 チュートリアル【日本語翻訳】
  • React.jsチュートリアル【日本語翻訳】

    フロントエンドの世界では今React.jsが注目されてきていて、自分もチュートリアルをやる機会があって、その際に日語訳(和訳)を簡単に作っていました。まだこのチュートリアルに関して翻訳されたものがなさそうだったので、ちょっと手直ししてブログにアップすることにしました。誤訳などもあるかと思いますが、Google翻訳よりはマシだと思ってお使いいただければと思います。 当記事のチュートリアルは「React v0.13」当時の古い内容のものとなっています。最新の「React」の公式チュートリアルの翻訳記事は以下となります。 Reactチュートリアル: Intro To React【日語翻訳】 – maesblog React.js React.jsReactはFacebookが開発しているJavaScriptのフレームワークです。MVCで言う所のViewの部分に特化したフレームワークとなってい

    React.jsチュートリアル【日本語翻訳】
  • 1