webpack と Babel – React入門
Rail5.1のwebpackとReactを試してみた | AstLab
Rail5.1でwebpackとかReactとか使えるようになったよと聞いて、試してみました。 実際にRails+Webpack+Reactでローカル環境で動かすまでにnpmでRactモジュールをインストールしたり、私の環境ではwebpack（config)の設定を少し変えたりしなければいけなかったのでメモです。 成果物は、下記にアップしています。 https://github.com/forest6511/rails5.1-beta-react-webpack 前提条件npmがインストールされていることnodeがインストールされていることruby/rails5.1がインストールされていることnodeやnpmとかってバージョンが違ったりするとハマるので、アップしたgitのほうに試したバージョンを記載しています。 rails5.1でwebpack + reactアプリの作成アプリ作成時に–w
Webpackを使ってReact, Sass, es2015の開発環境を構築してみる - Qiita
webpack.config.jsの作成 プロジェクトのルートディレクトリで touch webpack.config.js webpack configを編集していきます。 ここでは1系と2系の違いだけを書いていきます。 const path = require('path'); const webpack = require('webpack'); module.exports = { context: path.join(__dirname, 'src'), entry: { bundle: './index.js' }, output: { path: path.join(__dirname, 'dist'), filename: '[name].js' }, module: { rules: [ { loader: 'babel-loader', test: /\.js[x]?$
Webpack で React を導入した Rails アプリケーションを Heroku で動かすまでの手順 - Qiita
Webpack で React を導入した Rails アプリケーションを Heroku で動かすまでの手順 環境 Rails : 5.0.1 node : 6.10.0 React, Webpack, Babel の導入 Rails のルートフォルダ直下に client/ ディレクトリを用意 client/ ディレクトリ配下に package.json を作成 React のパッケージをインストール Webpack, Babel のパッケージをインストールする $ mkdir client $ cd client $ npm init -y $ npm install --save react react-dom $ npm install --save-dev webpack babel-core babel-loader babel-preset-es2015 babel-prese
React + flow + Webpackの最小構成 - Qiita
はじめに flowを使ったことなかったんですが、React Nativeなどを扱うことになってきて、flowを学ばないとまずいと思い、Webでもちょっとやってみました。 それぞれのファイルの意味なども可能な限り説明していければと思います。 環境 React 15.4 Webpack 2.2-rc flow 0.37 NodeJS 6.X~ $ tree . . ├── index.html ├── package.json ├── src │ ├── Hello.jsx │ └── Index.jsx ├── .babelrc ├── .flowconfig ├── webpack.config.dev.js └── webpack.config.prod.js { "name": "react-redux-sample-js", "version": "0.1.0", "scripts"
Rails+Reactアプリをbrowserifyからwebpack基盤に移行した件 - ぱろっと・すたじお
ちょうど一年ほど前、「チェンクロ パーティーシミュレーター」（以下ccpts）を、 jQueryを使った制御から、React.js + Bacon.jsで大幅に書き換えました...φ(･ω･｀) parrot.hatenadiary.jp ccpts.parrot-studio.com github.com そもそも、ccpts自体、 「モバイルで動くように*1、できるだけ今風の技術でクライアント側を構築する」 という目的を持って設計してました 昨年の時点ではReactが十分にメインストリームに乗ったと判断して、 基本的なアーキテクチャをReact+browserifyに載せ替えたわけですが、 「Reactで動くようにする」ことが目的だったので、細かいところは置いておいたわけです それを今回、フレームワークを見直してきれいにした（している）というお話です(´･ω･)っ 解決したい問題とwe
jQuery + Railsで作られた非SPAサイトを一部だけReact & ES2015で書き換えました - LCL Engineers' Blog
フロントエンドエンジニアの岡田です。 昨年末に、弊社のサービス：夜行バス比較なびの一部分をReactで書き換えました。 www.bushikaku.net 夜行バス比較なびのJavaScriptは、構築から3年以上たつこともあり、コードの見通しが悪くなってきています。 リグレッションテストなども導入しながら、不具合が起きないように努めてはいますが、テストに時間がかかりすぎるなどの問題がありました。 techblog.lclco.com そこで今回、Reactを導入して、リファクタリングをしました。 いろいろつまずくところもあったので、この記事では、夜行バス比較なびでどうやってReactを使っているかをご紹介します。 SPAサイトの事例はけっこうありますが、運用中のサイトの一部にだけReactを導入、という事例はあまりなさそうなので参考になれば幸いです。 環境 Webpackの設定 webp
React の Helloworldを docker-compose を使って webpack + babel , express, webpack-dev-serverを試したメモ - Qiita
React の Helloworldを docker-compose を使って webpack + babel , express, webpack-dev-serverを試したメモExpressDockerReactbabelwebpack-dev-server webpack # Reactのトランスパイルを行うビルドツール - Dockerfile - package.json # npmのモジュールを管理・スクリプトの設定 - webpack.config.babel.js # webpackの設定ファイル。babelを利用してes6で記述可 - .babelrc # babelによるトランスパイルの設定ファイル express # サーバー - Dockerfile src - app.js # webpackのエントリポイント。このファイルをトランスパイルする。 myapp -
React.jsでプロダクション環境を見据える
reactjsでアプリケーション構築した際、 production環境へのデプロイを見据えてwebpack周りの設定を見直したので それをまとめました。 webpack.config.jsのリネームwebpack.configでbabelなコードが書きたかったのでリネーム あわせて、constじゃなくて、importでライブラリを読み込むように変更 リネーム & 書き換え% mv webpack.config.js webpack.config.babel.js// before const webpack = require('webpack');// after import webpack from 'webpack';webpack-mergewebpack-merge webpack.configをマージするためのモジュール。 共通設定ファイルと環境別の設定ファイルをマージするみ
electron + webpack + react + sass | shimar's blog
以前、electron + webpack + sassという記事を書きました。今回はその続編で、electron + webpack + react + sassの開発環境を整えてみた、という話です。 electronアプリを作る際に、 rendererプロセス browserプロセス(Mainプロセス) を意識することになると思います。 electron + reactと謳う場合は、rendererプロセス側でreactを使う、という意味になると思っていて、この記事でもその文脈に則ってます。 electronアプリケーションを作る方法として正しいのかそうでないかはわからないのですが、やってみたかったこととしては、 webpackを使う webpackで、browserプロセスとrendererプロセスそれぞれのjsファイルを作る 画面(renderer側のhtml)で利用するstyle
webpack で React, scss のコンパイルと ESLint を設定する方法 - Qiita
webpackとは webpackは依存関係のあるJSやCSSなどを、まとめてくれるビルドツールです。 webpackにはLoaderという仕組みがあり、ソースコードに適用する処理を柔軟に設定することができ、 そのLoaderを使うことで、scssやJSXなどで書かれたファイルを変換することができます。 ここでは、React (jsx) , scss のコンパイルと、JavaScriptの構文をチェックしてくれるツールの ESLint をwebpackで行えるように設定します。 構成 今回は、以下のようなディレクトリ構成を想定し、 src の中の React と scss ファイルをdestディレクトリ内に配置することを考えます。 src ├─ react └─ scss dest ├─ js └─ css package.json node_modules webpack.config.
webpackを使った Rails上でのReact開発 - クックパッド開発者ブログ
はじめに こんにちは、投稿開発部エンジニアの芳賀です。 既存のRailsプロジェクトの中でReact.jsを利用する機会があったので、その時にやったことについてまとめてみます。 私自身は普段RailsのサーバサイドとCoffeeScriptが中心で、最近のJavaScript開発環境についてあまりキャッチアップできていなかったのですが、それらの状況を把握しつつ試行錯誤で開発していった経験から、できるだけ「React採用してみたいけどJavaScript界隈よくわからない目線」で書いてみようと思います。 RailsでReact.jsを使ういくつかの方法 2016年時点で、RailsでReact.jsを使う方法はいくつかあって、どれを採用するかで悩みました。 vendor/assets/javascripts にreact.jsを置いて利用する react-rails gem を利用する br
ES6 + React + Redux + webpack な環境構築 - kotaroito's notes
ES6 + React + Redux + webpack なフロントエンド環境を構築するためのメモ。 packages.json npm install --save react react-dom react-redux npm install --save-dev babel-loader babel-core babel-preset-es2015 babel-preset-react npm install --save-dev webpack webpack-dev-server react-hot-loader npm install --save-dev eslint eslint-plugin-react eslint-plugin-import { "name": "my-env", "version": "1.0.0", "description": "", "scr
React + TypeScript + Webpackの最小構成 - Qiita
※更新履歴 webpack2-rc & TS2.1 & @types対応 webpack2 stable & TS2.3 対応 React16-beta & TS2.4 対応 問題提起 React始めたいですよね！ でも今時、型チェックのない言語とか使いたくないですよね！ TypeScriptコンパイラもjsxに対応したし、Angular2でもTypeScriptが標準っぽいし、 とりあえずこれから始めるならTypeScriptでしょう。 ということで、主にReact初学者向けに最小構成を用意してみました。 間違っている点があればご指摘いただけると嬉しいです。 環境 NodeJS 8.2 React 16.0-beta TypeScript 2.4 webpack 3.4
ES6記法とモジュール管理をするためにbabelやwebpackの設定を0から行うためのハンズオン - Qiita
Reactを開発するときに、babelやwebpackの設定をしますが、 すでに古い情報が多かったり、結局何のためにどの指定が必要なのかがわかりづらいため、改めて何を何のためにやっているのか整理します。 本記事は基本的にはReactの利用有無にかかわらず参考にできます。 また、セットアップ済みのプロジェクトはgithubに上げてるので試してみたい場合はそちらを。 https://github.com/haradakunihiko/devserver-boilerplate 前提 ES2015ベースで、webアプリ開発をしたいので開発環境を準備します。 ここでは以下のバージョンを使用します。 node@4 npm@2 babel@6 npm@2を利用している場合は特定のライブラリをinstallすると、それが依存しているライブラリは併せてインストールされますが、npm@3の場合は明示的に入れ
webdesign-dackel.com - このウェブサイトは販売用です！ - webdesign dackel リソースおよび情報
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Docker+webpackを用いたReact.js開発環境の構築 - Qiita
React CSS Modules, TypeScript, Webpack, with Babel Plugin - Qiita
Babel + React + Webpack の最小構成ひな形作った - Qiita
ReactのチュートリアルをES6で書いてwebpackとESLintも使ってみる - Qiita