30分で出来るDraft.js+React.js リッチエディタ作成入門 - Qiita
目的と概要 Draft.jsはReact.js上でリッチテキストエディタを作るためのフレームワークです。日本であまり流行ってない気がするので、始めやすいように入門記事を書いてみることにしました。 最近ではReact.jsを採用しているサイトも増えてきて、Webフロントエンドは更にリッチ化の流れが激しくなっています。 今回はReact.jsでリッチなテキストエディタを簡単につくれるDraft.jsを利用して30分でテキストエディタを作っていきます。 この記事で作れるもの こんな感じのエディタ。すごいよくある感じのWYSIWYGエディタ。 手順 環境構築 React.js、Draft.jsの環境を作りましょう。 React.jsの環境を整えている方は bash npm install draft-js --save で大丈夫です。 環境構築が面倒な方にはテンプレート用意しておきました お納めく
React.jsとReduxによる快適なElectron開発環境をつくる - Qiita
はじめに だいぶ前から, Node.jsやHTML5などのWeb技術だけでデスクトップアプリが作れるらしい, ということでElectronでなにか作りたいなと思ってました. サンプルとしてノートブックアプリを作成したので, その構成について書きます. 最近流行りのES6やReact.js, FluxフレームワークとしてReduxを盛り込んだ構成で結構大掛かりそうに見えるのですが, 構築してみると意外にシンプルで使いやすい形になったかなと思います. Github上のレポジトリはこちらです. ディレクトリ構成 下図はアプリケーションのディレクトリ構成です. アプリケーションの基礎となるindex.htmlとindex.jsはドキュメントにあるチュートリアルとほぼ同じです. gulpによって, app/js/src/bundle.jsをコンパイルしてapp/js/dst/bundle.jsに出力
Reactの「Getting Started」を読む - Qiita
$ npm install --save react react-dom babelify babel-preset-react $ browserify -t [ babelify --presets [ react ] ] main.js -o bundle.js We recommend using React with a CommonJS module system like browserify or webpack. Use the react and react-dom npm packages. browserifyやwebpackのようなCommonJSと一緒に使うべきとのこと。 CommonJS 便利なJavascriptを誰もが簡単に使えるように、共通仕様を規定しているプロジェクト。この後出てくるbrowserifyやwebpackはCommonJSの仕様に従ったモ
第8回 AWS Startup Tech MeetupでReactとRailsの話をしてきました
2015年11月12日にAWSさん主催で開催された「第8回 AWS Startup Tech Meetup」に登壇者として参加してきました。 AWS篠原さんのイベントレポートはこちらです。 まさかの30分枠をいただいて何を話そうかと思ったんですが、今一番触ってるのはReactなのでその話をしてきました。 ただ問題はフロントエンドやからAWS関係ない・・・ということでフロントエンドとAWSのサーバーレスアーキテクチャの話を後半入れたんですが、参加している方もさすがにAWSもりもり触ってる人が多かったのでこっちの方が盛り上がりました。 資料こちらです。 というわけで自分の発表でのディスカッションや他の方の発表、その後の雑談などで色々勉強になったので、上記の資料にない部分をまとめました。 Google botはjavascriptの実行結果をインデックスしてくれてる？ スライド内にもリンクを貼っ
30分間React入門「いいねボタン」作成チュートリアル
「今日からReactを始めたい」 「とりあえずReactで何か動かしてみたい」 ここは、そういった方が、Reactを始めみるためのチュートリアルです。 今回は、Reactを使ってFacebookのいいねボタンのようなコンポーネントを実装していきます。 > 今回作る「いいねボタン」のデモ今回作る「いいねボタン」のデモ 実際に押せます↓ > チュートリアルの目標チュートリアルの目標 Reactのコンポーネントを実装できるようになる Reactコンポーネントのイベントをハンドリングできるようになる Reactコンポーネントの状態(state)を実装できるようになる Reactの雰囲気をつかめる！ > このチュートリアルについてこのチュートリアルについて なお、このチュートリアルは、下記のバージョンで動作確認しています。 npm 2.14.2 react 0.14 react-dom 0.14 w
ReactとFluxでクライアントサイドの設計
はじめに こんにちは。皆さんはReact使われてますでしょうか？ 今回はReactとFluxについて書きます。 MVCの問題点 詳しくはこちらに書いていますが、MVCでアプリを作った場合は、ModelとViewの間で双方向のデーターフローが作られる可能性があるので理解したりデバックするのが難しくなります。 React単体で使った場合の問題点 子のViewでなにかアクションを起こした結果、親のViewにも変更を伝えてなににかをする場合、子のViewに親のViewのコールバック関数を渡す必要があります。 子のViewの下にさらに、子のViewがあって、アクションが起こった時に親のViewに伝えようとするとコールバックが深くなって複雑になってしまいます。 Flux それを解決できる方法としてFluxです。 Fluxを使うとデーターフローが一方向になります。 やってることはObserverパターン
cybozu.com 稼働状況 を React/Redux で作り直した話 - Cybozu Inside Out | サイボウズエンジニアのブログ
こんにちは。Sales Systemチームの金子です。Sales Systemチームでは、cybozu.com Store や、販売管理システム等の開発をしています。 このエントリでは、cybozu.com 稼働状況のフロントエンドをReact/Reduxで作り直した話を書いていきます。「React/ReduxでWebアプリケーションを作ってみようと考えている人」を対象としています。 TOC 「cybozu.com 稼働状況」とは? 作り直した背景 技術概要 React/Fluxについて React/Redux Routing Resources Async Multilingualization/Localization ES6 Utility Lint Testing 取り組んでみた感想 まとめ 「cybozu.com 稼働状況」とは? クラウドサービスはサービスの稼働状況をステータス
React.js cheatsheet
<Video fullscreen={true} autoplay={false} /> render () { this.props.fullscreen const { fullscreen, autoplay } = this.props ··· } Use this.props to access properties passed to the component. See: Properties constructor(props) { super(props) this.state = { username: undefined } } this.setState({ username: 'rstacruz' }) render () { this.state.username const { username } = this.state ··· } Use states
5分で理解する React.js - Qiita
いまさらですがReact（react.js）をはじめてみました。 Virtual DOMばかりが話題にあがるReactですが、それにとらわれていると理解が進まない、と言うかReactで理解しなければならないのはVirtual DOMではないことがわかりました。 Reactについての良い資料はすでにたくさんありますので、末尾に参考資料としてあげています。 このエントリは自分がReactのチュートリアルをなぞりながら書いた自分用のメモですが「1エントリで概要をちゃちゃっと理解したい」という方に役に立ったら良いな、とも思っています。 Reactチュートリアル http://facebook.github.io/react/docs/tutorial.html 基本 JavaScriptで書かれたライブラリ。react.jsをインクルードして使う。 （MVCで言うところの）Viewのみを担当する。
ES6版React.jsチュートリアル - Qiita
はじめに 初心者による初心者のための記事 React.js公式チュートリアルの和訳風 ES6 さらっと仮想DOM調べてみたよ、ぐらいの人向けです。 JavaScript初心者、ES6初心者、React初心者向けかつ僕がそうです。 なので間違いがあるかもしれません。見つけたら教えて下さい。 公式のチュートリアルはこちらです。 React Tutorial React チュートリアル (和訳) 公式Documentのソース (Markdown) 環境 Mac OSX Node.js v0.12.7 Gulp 3.9.0 React 0.13.3 作るもの 公式のTutorialに沿って、シンプルなコメントボックスをReactで作成します。 次の機能を提供するものです。 すべてのコメントの表示機能 コメント投稿フォーム バックエンドサーバーとの連携 また、次の特徴を持っています。 更新最適化:
Facebook Relayについてまとめ - Qiita
Reactがもっと広まって欲しいと思っている今日このごろ。React EuropeでJoseph Savona氏の講演でRelayについての「モヤっと」がいっきにかなり解消された気がするので、要点を本編を翻訳しながら自分なりにまとめておきます。 私の理解が誤っている可能性は十二分にありえるので、ご指摘いただければ幸いです。 はじめに ReactとFluxって組み合わせと共によく目にするのが↓の図。 矢印は一方向にしか進まないのが特徴で、わかりやすいってのがいろんなところで書かれているんですけど、 結局データをサーバからとってくるところってどうなってるの？ってのが疑問として残ります。つまり、図で表現すると↓の部分の仕組みがどうなっているかってところです。 その部分を、Instagramのようなサービスを例に説明しています。 クライアントはどのようにしてサーバからデータを取得すべきか まず、I
React.jsを使いたいRailsおじさんがJavaScriptライブラリをそれっぽく管理しながら入門する - ppworks.jp
Sendagaya.rb #114に来たので、目標のブログ記事を書いてた。 今日はsendagaya.rbへ行ってブログ記事を一本仕上げるのが目標。— Koshikawa Naoto (@ppworks) August 10, 2015 今日は、React.jsの会なので、RailsからReact.jsをざっくり使って見る準備をしてみます。 目指すもの sprocketsのままとりあえず進む jsのライブラリをnpmで管理したい React.jsをES6で書きたいし、JSX書きたい herokuで動かすぞ！ react-railsは使いたくない 方針 sprocketsと共存するために、browserify-railsを利用し、ES6はBabelを利用します。ライブラリはそのまま、npmで管理します。 npmを入れます もし入っていなければnpmを入れましょうね。 brew install
Tutorial: Tic-Tac-Toe – React
You will build a small tic-tac-toe game during this tutorial. This tutorial does not assume any existing React knowledge. The techniques you’ll learn in the tutorial are fundamental to building any React app, and fully understanding it will give you a deep understanding of React. This tutorial is designed for people who prefer to learn by doing and want to quickly try making something tangible. If
Reduxのサンプルに説明をつけてみた - カイワレの大冒険 Second
最近React, fluxアーキテクチャに触れることがあり、理解にかなり苦しんだので、軽く文字にして、理解を深めてみました。 今回使ったフレームワークはReduxなので、それ以外学びたい人はごめんなさい。 レポジトリはこちら。 https://github.com/masudaK/flux_sample これから学ぶという人は、redux/counter_webpack配下のコード見れば十分だと思います。見方はREADMEに書いておいたので、ぜひ読んでください。 webpackビルド版以外にも、browserify版も置いてあります。また、webpackのほうにはAJAXで通信する処理も追加してあります。 触ってみた感想 昔HTMLやCSSはやってたし、nodeも多少は読んでいたので、ちょっと勉強すればできるだろうと思いましたが、甘かったです。かなりキツかった。どうも、fluxアーキテクチ
React TutorialをES6で書きなおしてみた - console.blog(self);
できあがったのはこちら。 sadah/react-tutorial-es6 Reactを触ってみたいと思って、チュートリアルをやってみた。翻訳してくださっているかたがいて、訳もわかりやすくてとても助かった。 Tutorial | React React.jsチュートリアル【日本語翻訳】 | mae's blog チュートリアルでは JSXTransformer.js を使っているので、JSXの変換などを考える必要はない。手軽なんだけど、Reactを使おうとしたらけっきょくコンパイルしなきゃいけない。 コンパイルにはBabelが必要になる。Babel使うならES6も使いたい。ES6の変換は自動的にやりたいし、ファイルはminifyしたいし、minifyしたらsource mapが欲しいし、変更したら自動的にブラウザを更新したい。って感じであれこれやってみた。 Environment ディレク
React.jsチュートリアル【日本語翻訳】
フロントエンドの世界では今React.jsが注目されてきていて、自分もチュートリアルをやる機会があって、その際に日本語訳（和訳）を簡単に作っていました。まだこのチュートリアルに関して翻訳されたものがなさそうだったので、ちょっと手直ししてブログにアップすることにしました。誤訳などもあるかと思いますが、Google翻訳よりはマシだと思ってお使いいただければと思います。 当記事のチュートリアルは「React v0.13」当時の古い内容のものとなっています。最新の「React」の公式チュートリアルの翻訳記事は以下となります。 Reactチュートリアル: Intro To React【日本語翻訳】 – maesblog React.js React.jsReactはFacebookが開発しているJavaScriptのフレームワークです。MVCで言う所のViewの部分に特化したフレームワークとなってい
RailsをバックエンドにしたFlux(React + Alt)を試してみる | DevelopersIO
丹内です。 最近ReactJSを触り始めました。 掲題の通り、Railsをバックエンドにした場合のFluxを書いてみたのでまとめます。 このエントリの参考URLにあるリポジトリを参考にしました。 バックエンド 普通のRailsアプリです。Scaffoldをベースに、フロントエンドを書いていきます。 db/migtate/create_books.rb class CreateBooks < ActiveRecord::Migration def change create_table :books do |t| t.string :title t.timestamps null: false end end end BooksController#index 今回、ブラウザで/booksにアクセスした時に、最初に空っぽのHTMLを返し、ReactJSでAjaxリクエストによってデータを取得
Phoenix Framework (Elixir)でReact.jsのTutorialを写経してみる - 弥生開発者ブログ
主夫在宅パートのeitoballです。暖かくなってきて、洗濯物の乾きが早くなってうれしいこの頃です。 はじめに 前回、Phonenix Framework （以下、Phoenix）上で、React.jsが動作する環境を構築しました。今回は、React.jsのTutorialを写経してみます。 Tutorialを写経する 前提条件 前回からの続きとなります。ソースは、前回と同じく GitHub (https://github.com/eitoball/react_phoenix_demo/tree/tutorial_commentbox) にあります。 新しいバージョン（0.13.1）のPhoenix Frameworkがリリースされたので、更新したいと思います。プロジェクトが依存するライブラリは、mix.exs内のdepsに定義されています。更新するには、mix deps.update <
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Reactの入門方法(個人の感想
GitHub - insin/react-lessons: Tool for creating and taking interactive React tutorials
