create-react-app

1/3ページ

create-react-app with TypeScript のwebpack.config.jsを読む

webpackは以前からずっと使っていますが、業務で使用する機会が無く、個人プロジェクトで導入するのみという状況でした。 こうなるとwebpack.config.jsを触るのは自分だけなので、ネットから寄せ集めた設定を組み合わせて雰囲気で動かしていました。 このままでは他人から渡されたり自動生成されたwebpack.config.jsをメンテする際に苦労しそうなので、create-react-ap […]

なるべく何も考えないでそこそこ快適に TypeScript + React で開発を始める (create-react-app)

動機 どんなものでも、オレオレな作り込みをすればするほどプロジェクトの寿命が短くなるという呪いを受けます。また、引き継ぎが大変になります。 その当然の帰結として「なるべく作り込みたくない」「標準に従いたい」という欲求が出てくると思います。 そういった欲求を考えてSPAプロジェクトを設定していきます。単純なSPAを作る想定です。 開発環境を用意する VS Code こと Visual Studio […]

Firebaseでcreate-react-appアプリを公開する基本の手順

サーバー借りてPHPで動いている利用者がほとんどいない既存サービスをFirebase + Reactに移行しようとしています。Firebaseの始め方に関する記事はいろんな方が書いていますが、私もまとめてみました。 ツールの導入 今回はcreate-react-appを使います。Reactは環境作るだけで疲れるのでこういうのがないと挫けます。firebase-toolsはデプロイなどFirebas […]

create-react-app が裏で何をやっているか理解する

はじめに create-react-app 便利ですね! 僕は react は create-react-app から入ったクチなので先輩方から「 react は昔は環境構築大変だった」とよく聞きますがいまいちピンと来ていません。 というわけで create-react-app が裏で何をやっているかまとめます。 対象読者 create-react-app 使ってはいるけど、何やってるかあんまり分 […]

Prettierを使って保存時にソースコードを自動で整形してもらう

概要、目的 Prettierという、ソースコードの自動整形ツールが気になったので まずはお試しで、個人的に作っているプロジェクトに採用できないか調べてみました。 JavaScriptは書く人によってコードスタイルがバラバラになってくることが多いので、 他人のソースコードを読むときにイラッとすることが多々あります。 コーディングルールを決めればいい話なんですが、 決めたところで守らない人は出て来るし […]

Create React App & Cordovaでアプリをつくる環境を整える 2018年4月時点

はじめに ちょっとしたSPAつくるのにCreate React App がいい感じすぎる。なんか個人的にはReactでのアプリ開発環境はこれで当面決まった気がしてる。そうなったらCordovaでの開発でもCreate React Appを使いたい。いままでは React Hot Reloading Template使ってたんだけどちょっと古びてきてるし、環境統一できたらいいし。 で、いろいろ調べて […]

create-react-appを使ってCI

create-react-appとReact.jsの練習を兼ねてmacのメモっぽい何かを作ってみます。 Facebookのライセンスまわりが炎上しているようですが・・・。 Reactに限らずJavaScriptを使って開発しようとするとwebpack, gulp, babel, Jest等など開発環境整えるのまじ面倒くさい。面倒くさいので一度作るとずっとそのままでいつの間にか古くなっています。 C […]

Create React App で作成したコンポーネントを script タグから使う。

Create React App の便利さに甘えたいが、作りたいのは SPA ではなくライブラリという場合にどうしたらいいのか調べて挫折して自分でなんとかしたっていう記事です。  やりたいこと <div class="myButton"> </div> <script> ReactDOM.render(<MyButton/>, document.se […]

create-react-appのindex.htmlで.envに定義した環境変数を使う

create-react-appで.envに以下のように定義してあるとする。 REACT_APP_EXAMPLE=ex jsxでこの環境変数を利用するには console.log(process.env.REACT_APP_EXAMPLE); とすれば利用できる。 create-react-appでのindex.html内でそれらを利用したいケースがあり調べたところ以下の記法で環境変数を利用できる […]

1 3