React基礎 · GitBook
React基礎 レッスン Lesson 01: 環境構築 Lesson 02: ES2015について Lesson 03: 関数型の書き方 Lesson 04: 初めてのコンポーネント Lesson 05: 初めてのinline style Lesson 06: 初めてのprops Lesson 07: 配列からの展開 Lesson 08: フォームの定義 Lesson 09: フォームによるデータ追加 Lesson 10: 総合課題「目的特化型電卓を作ってみよう」 おまけ Appendix 01: 様々なコンポーネントの書き方 Appendix 02: コンポーネントのstate Appendix 03: コンポーネントのライフサイクルメソッド Appendix 04: JSX vs. createElement Appendix 05: PropTypes Appendix 06: p
Getting Started with webpack – Insightful Software
Jun 2017 edit: 3 was just released! The syntax for 3.x is identical to 2.x, which means this article is still up-to-date (if I missed something, please comment!). The version bump was for more behind-the-scenes stuff, but it did add an easy-to-add “Scope Hoisting” plugin that can cut down on your bundle size that’s worth checking out! Jump to the bottom of this article for the “Upgrading to 3” sec
SurviveJS
Welcome to survivejs.com. I (Juho Vepsäläinen) have gathered material related to JavaScript since 2016. You can consider this site as a learning resource at different levels where I have gathered my learnings about the topic. Given JavaScript is a broad subject, I have divided the site as follows: In the books section you can find my larger writings about JavaScript. Currently maintenance, React↗,
ES2015で始めるJavaScript入門 - Qiita
はじめに JavaScript勉強会の資料です。 内容は、簡単なコマンドラインツールを作りながら、JavaScript(ES2015を含む)の書き方を学ぶものとなってます。 内容的には初心者向けなので、JavaScriptを勉強したい、JavaScriptは触ったことあるけどES2015を知らないので勉強したい、といった方が対象です。 JavaScriptとは Webブラウザで実行可能なインタプリタ言語 最近ではサーバサイドのものもある(Node.jsなど) 各ブラウザで独自の実装があるが、標準化されたECMAScriptに準拠している ES5, ES2015(ES6), ES2016, … ES2015からは毎年新しい規格が策定される これによりナンバリングは策定した年に変更 ES2015 ES5(2011年策定)から4年ぶりに策定されたECMAScript 非常に多くの機能が追加された
step by stepで始めるwebpack - Qiita
※webpack1系の記事です。 1→2への移行ガイドを見る限り破壊的な変更点はそんなにありませんが、preLoadersやpostLoadersがなくなっていたり、差が出ていますのでご注意ください。 https://webpack.js.org/guides/migrating/ webpackを手を動かしつつ学べる初学者向け資料を作成しました。 公式のチュートリアルもあるのですが、webpackが使用されているOSSのボイラープレートを見る限り、世の中の使われ方に沿ってないかも？と思い書きました。 これから始める人の手助けになれば幸いです。 また最終形のソースをupしてあるので詰まったら見てください。 webpackとは webpack で始めるイマドキのフロントエンド開発の説明が良かったので引用させていただきます。m(_ _)m webpack は WebApp に必要なリソースの依
React + Redux入門初歩 実際に一からアプリを構築してみる - Qiita
ReactとReduxが最近ホットということで、自分も触ってみようと思い、入門・チュートリアルと銘打っているドキュメントを読み漁ってみるものの、とりあえず動くものを作るにあたって何をすればいいのかが良く分からなかった。 いったん簡単なものを一から構築して、それから色々いじってみたほうが理論の理解も進む気がしたので、見よう見まねで公式サンプルにあるようなカウンターっぽいものを作ってみる。 必要なnpmパッケージ（2016/04/16現在） アプリ構築に最低限必要なパッケージはおそらく以下のような感じ。 react用パッケージ react react-dom redux＆連携用パッケージ redux react-redux その他、半必須 browserify (import文などを使うため) babelify (babelトランスコンパイル用) babel-preset-react（babe
生のReactを知ろう – JSX、Flux、ES6、Webpackを使わず… | POSTD
(編注：2016/07/29、いただいたフィードバックをもとに記事を修正いたしました。) 免責事項： 私はJSX、Flux、 ES6 、そして webpack を非常に気に入っています。これらのツールについては他のシリーズで話します。 React.jsが騒ぎを起こしているのはご存知の通りです。確かに、 XMLHttpRequest 以来の良いツールです。しかし、調査に数時間を費やした挙句、あまりに多くの用語に 圧倒された だけで終わっていないでしょうか。JSX、flux、ES6、webpack、react-routerが使える今、 他に必要なのは React の使い方を説明してくれる人だけです。 喜んでください、それがまさに当シリーズでやろうとしていることです。信じられませんか？大丈夫、 2分後、 初めてのReactアプリを作った後には納得いただけるでしょう。何もダウンロードせずに、です。
Fundamentals of Redux Course from Dan Abramov
In this comprehensive tutorial, Dan Abramov - the creator of Redux - will teach you how to manage state in your React application with Redux. State management is absolutely critical in providing users with a well-crafted experience with minimal bugs. It's also one of the hardest aspects of a modern front-end application to get right. Redux provides a solid, stable, and mature solution to managing
React.js の 公式Tutorial を Redux を利用して書き直した。また Mocha + power-assert を利用したテストも追加 - Qiita
前回 QiitaにReact.js の React.js の公式Tutorial を gulp を利用して簡単に実行できる環境を作って、ES6も試した で公式TutorialをECMA2015(ECMA6)を利用して書き直しを行ったのですが、ReactといえばFlux、Flux といえばRedux ということで、流行りのRedux を利用して記述したらどうなるのかを試してみました。 また 同じく流行りのテスト環境である Mocha + power-assert を利用して、テストを追加してみました。 React および Redux はテストも非常に行いやすいのを体感しました。 前回の続編として、以下GitHub で公開しています。 https://github.com/ma-tu/react-babel-gulp-browserify-tutorial/tree/es6-redux Rea
webpack+babel-loader+power-assert+jsdomでフロントエンド開発環境を作る - yutaponのブログ
この記事は JavaScript Advent Calendar 2015 10日目の記事です。 去年は主に gulp にフォーカスした内容でしたが、今回はJSのビルドとテストにフォーカスした入門記事です。 やること ES2015で書いたコードをWebpackでビルドする babel@6系を使う Mocha + power-assert + jsdom でテストを書く やらないこと gulpまわり React.js CSSビルドまわり 最終的なコードはこちらに上げておきました(すごく簡素な出来です)。 GitHub - sskyu/webpack-power-assert-jsdom-skeleton はじめに 今年はReact.jsがJSerの中で定着した感がありました。 Fluxの考え方を昇華させたReduxがFlux系フレームワークでデファクトになりそうな雰囲気を出しつつ、React
Full-Stack Redux Tutorial
A Comprehensive Guide to Test-First Development with Redux, React, and Immutable Update 2016-02-24: Updated react-router to 2.0.0. In tests, replaced use of deprecated setProps() with ReactDOM.render(). Also now using the react-addons-test-utils package so that no imports of 'react/addons' are needed anywhere. Update 2015-11-06: Updated to the new Babel 6 release. The Babel packages we need to ins
Relay チュートリアル【日本語翻訳】
先日、Facebookがデータ駆動型のReactアプリケーションの開発を行うためのJavaScriptフレームワーク「Relay」のTechnical Preview版を公開しました。さっそくですが、自分の理解を深めるためにRelayのチュートリアルを和訳しました。せっかくなのでブログにもアップしておきます。誤訳などもあるかと思いますが、Google翻訳よりはマシだと参考にしていただければと思います。原文もつけておいたので、翻訳がおかしなところもなんとなくニュアンスを掴んでいただければと思います。 Relayチュートリアルに行く前に、Relayの基礎知識RelayRelayは、「データ駆動型のReactアプリケーションを開発するためのJavaScriptのフレームワーク」です。RelayはReact同様、Facebook�が開発を進めています。Relayを使うと、サーバから取得したデータを
Rails, React, Browserify
Originally published on techtrails.io Using Node.js, I’ve grown accustomed to using CommonJS modules and I like them as a solution to dependency management and scope isolation in Javascript. Using Rails, what you natively get is Sprockets, which I feel doesn’t provide the same robustness and flexibility CommonJS does. So how could I continue using modules within Rails? Browserify is a tool that le
React.js + Webpack + ContainerJSでTODOリストを作ってみた - うなの日記
React.js + Webpack + ContainerJS でTODOリストを作ってみたので、手順をまとめます。 以前書いた、Knockout + ContainerJS でテスタブルにToDoリストを作るチュートリアル - うなの日記の改訂版。 最近流行ってるライブラリのお試しも兼ねて、いろいろ組み合わせて使ってみようという試みです。 ソース全体はこちらで公開しているので、あわせて参照ください。 ポイント モジュールローダーを require.js → Webpack に ソースはクラス単位で分割管理して、Webpackで1ファイルにまとめてリリースします。 WebpackだとAMDもCommonJSも両方扱えるので、npmのライブラリが使いやすくなるのは大きいかな。 あと、Loaderも便利ですね。 Viewモジュールを Knockout.js → React.js に 流行って
第4回: Web応用1 – Webブラウザでプログラミング、p5.js入門
この講義のここまで前半3回では「Web基礎」と題して、HTMLとCSSの基本、そしてTumblrを使用したオンライン・ポートフォリオの作成について解説してきました。前半のまとめとして、作成したオンライン・ポートフォリオのベースとなる部分を提出してもらいます。提出方法は授業内で指示します。 いよいよ後半は、サウンド&ネットのサウンドのパートとも協力して、Web上で音を使用した作品を公開することを最終目標に、新たな内容に進んでいきます。 JavaScript – Webブラウザでプログラミングする これまで取り扱ってきた、HTMLやCSSは人工的に仕様が策定された言語ではありますが、プログラミング言語ではありませんでした（HTMLはマークアップ言語、CSSはスタイルシート言語）。 HTMLやCSSとは別に、Webブラウザ上で動作させることのできるプログラミング言語が存在します。その代表的な言語
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Create 'jQuery' style library using ES2015, Gulp, Babel & Browserify
Laravel
React + Reduxを使ったWebアプリケーション開発速習会＠Wantedly - Qiita
30分で出来る、JavaScript (Electron) でデスクトップアプリを作って配布するまで - Qiita
Web Audio School