正真正銘のReactだけの不純物なしでReact入門
Reactのチュートリアル、たくさんありますよね。どれも質が高く、どこから手をつければいいかわからなくなっちゃいます。 ですがやはり巷のチュートリアルには面倒な問題もあります。今回は面倒ごとを全部すっ飛ばしてReactでのウェブアプリ作りに入門してみましょう。 Reactを始めるには、まずあれとこれとそれとどれと…… Reactやるには、まずNode.js入れてbabel入れてreact入れてreact-router入れて、ついでにredux入れてreact-redux入れて、redux-saga入れて…… Reactめんどくせえ！！！ってのが正直なところだと思います。はい、私もそう思います。ただ、まあ、色々必要なのも事実なので……。 それでもやっぱり「ReactやるならReactだけやりたい。他はどうでもいい」という気持ちは簡単に捨てられるものではありません。そこで今回はそういう面倒全部
jQueryを卒業したかった僕がReact StaticでReactをイチから学んでWebサイトを作った話 | 株式会社ヌーラボ(Nulab inc.)
Typetalk チームフロントエンドエンジニアの岡藤（@johnykei）です。先日 Typetalk Webサイトリニューアルに伴い、フロントエンドの技術を jQuery から React + styled-components に刷新しました。本記事では、React を用いた Web サイト制作についてお伝えします。 はじめに タイトルにもあるように、僕は今まで JavaScript を書く必要がある時は使い慣れた jQuery を使っていました。 フロントエンドエンジニアという肩書きではありますが、フロントエンドエンジニアという職種は幅広く、僕はどちらかというとページやUIのスタイリングが主な業務で、普段 JavaScript を書く頻度もそんなに高くありませんでした。 最近海外ではそのような業種の人をフロントエンドデザイナーと呼ぶ動きも出てきていますが、jQuery しか使ってい
フロントエンドのコンポーネント設計に立ち向かう - Qiita
ReactやVueなどコンポーネントベースで作っていくViewのライブラリが普及したことで、コンポーネント指向での開発が一般化してきた昨今のフロントエンドですが、このコンポーネントの設計に悩まれる方も多いのではないでしょうか。 コンポーネントをどの粒度、どんな状態で分割するのが良いのか、などなど、特にチームで開発する時に認識が揃っていないとカオスになりがちな部分であると思うので、自分なりの設計をする際の指針を言語化しようというのが本記事の目的です。同じように悩まれている方にも何らか示唆を提供することができたら嬉しいです。 想定読者 「コンポーネント設計？なにそれ？おいしいの？」という方 初めてコンポーネント設計でアプリ作ってみたけど、本当にこれでいいのか自信の無い方 はじめに: "コンポーネント"とは まず最初に"コンポーネント"という言葉についてですが、ここでは「GUIのパーツをモジュー
FRONTEND CONFERENCE 2017でReactハンズオンを開催しました - マルシテイア
speakerdeck.com 2017-03-18 (土) 梅田で開催された FRONTEND CONFERENCE 2017 で、Reactのハンズオンを開催しました。 kfug.jp 今回のハンズオンでは Reactアプリケーションの開発を身体で覚える React開発環境におけるトレンドを体験する の2つを目標に、Next.jsを利用した簡単なReactアプリを作成しました。 この記事では、ハンズオン開催にあたって考えたことや、工夫した点などについて書いていきます。 ハンズオンの方向性 Next.jsを採用 ハンズオンの流れ 工夫した点 お手本ブランチを用意する コード修正の指示をdiff形式で書く 自己紹介よりも前にセットアップをお願いする 反省した点 gitが手元にない人は git checkout できない お手本ブランチ作るのしんどい…… 皆様の反応 ハンズオン 資料 感想
jQuery学習者にReactも学習してほしい3つの理由と学習方法まとめ
jQueryの初版が登場して10年が経ちました。 jQueryの登場により、これまでJavaScriptで書いていた複雑なコードがよりシンプルになりました。CSS操作やDOM操作、Ajaxなどの拡張性も非常に便利なものでした。 時が経つにつれ、さまざまな特徴を持ったJavaScriptライブラリ・JavaScriptフレームワークが登場し、jQeuryに触れることなく大規模なアプリケーション開発をすることも珍しいことではなくなりました。 そうした中、昨今注目されているのがReact.js(React)です。 今回は、jQueryを学習した人に、Reactも学習してほしい理由とその学習方法についてまとめてみました。 Reactとは？ Reactとは、ユーザーインターフェイス(UI)を構築するためのオープンソースのJavaScriptライブラリです。 Facebookが開発の主導となっており、
普通のRailsアプリケーションにReactを導入する | DevelopersIO
次にreactをインストールします。 $ npm install -S react react-dom package.jsonは以下のようになりました。 { (中略) "devDependencies": { "babel-core": "^6.21.0", "babel-loader": "^6.2.10", "babel-preset-es2015": "^6.18.0", "babel-preset-react": "^6.16.0", "webpack": "^1.14.0" }, "dependencies": { "react": "^15.4.2", "react-dom": "^15.4.2", }, (中略) } ビルド設定 webpackでビルドできるように設定ファイルを作ります。 clientディレクトリにwebpack.config.jsファイルを作成し以下の内容
2016年にJavaScriptを学ぶとこんな感じ
このストーリーは、Circle CIに投稿された”It’s the future”というストーリーにインスパイアされたものです。オリジナルはこちら。ここに書いたことは一つの意見というだけで、他のJavaScriptフレームワークもそうですが、過剰に真に受けないでください。このストーリーを執筆中に新たなJavaScriptフレームワークは作成されていません。 やあ、今新しいプロジェクトをやっているんだけど、実はここ数年ウェブのコード書いていなくてさ、しかも以前とは少し変わったとも聞いているよ。それで君が一番この辺でウェブ開発に詳しいって聞いたんだけど？ -フロントエンドエンジニア、といったほうが正しいが…まあ、俺なら間違いない。俺のは2016年のウェブだからな。ビジュアライゼーション、ミュージックプレイヤー、サッカーをするドローン等々。JsConfとReactConfから帰ってきたばかりだか
React における State と Props の違い - Qiita
React コンポーネントがデータを受け取ったり、ハンドリングしたり、表示したりするための主要な方法として、State と Props があります。 この二つの概念の違いを知ることは、React を効率的に利用するために役立ちます。 State: そのコンポーネントが持っている状態 Props: 親コンポーネントから渡されたプロパティ State (状態) mutable data (可変のデータ) maintained by component (コンポーネントによって保持) can change it (変更可) should be considered private (プライベートであるべき) State は可変のデータです。State の変更は、仮想DOMとの差分をとり、実際のDOMを更新し、コンポーネントを再描画するための基本的な方法となっています。 State はコンポーネン
react-railsを使ってReactのTutorialをやってみる - Qiita
はじめに react-railsという、ReactをAsset Pipelineに乗せて使えるようにしてくれるruby gemsがある。 この記事では、これを使用してReactの公式tutorialを進めていく。 公式のtutorialではサーバ側はすでに実装済みとして進んでいる。 今回はせっかくなのでtutorialを進める中でサーバ側も実装していくことにする。 ちなみに使ってみた個人的な感想としては、RailsのAsset Pipelineに乗せるならすごく順当かなー、という感じ。 browserifyを使いたい。bowerもオワコンと呼ばれてしまう。そんなこの時代。 Asset Pipelineは捨てたい感じがあるけど、既存のアプリケーションを徐々にReactコンポーネント化していく、みたいな時には良いと思う。 方針 きまぐれで、必要そうなところはReactの説明する。けど英訳とかは
React.jsのJSXを使ってみる - Qiita
var Hello = React.createClass({ render: function() { return ( <div>Hello {this.props.name}</div> ); } }) こんな感じで一見HTMLに見える部分<div>...</div>がJSXのSyntaxです。 詳しくは↓に書いてある通りなのですが、XML likeにタグを書いていく感じです。覚えることはほとんどないです。 注意点としてはHTMLではないということで、例えばdivにcontainerというクラスを指定したい場合は、<div class="container">...</div>ではなくて、<div className="container">...</div>となります。(classはJavaScriptの予約語のため) その他ではlabelのfor属性はhtmlforにする必要があ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Is ReactJS overtaking AngularJS as the most popular front end web framework?
Is React killing Angular?
Reactで学ぶ！いまどきのWeb開発
https://qiita.com/mmyoji/items/ce7fef70c0c91aca793b