【完全版】これ1本でReactの基本がマスターできる！初心者チュートリアル！ - Qiita
はじめに Reactの人気はどんどん加速しています。これからフレームワークを学ぶならReactを選ぶのは賢い選択でしょう こんにちは、Watanabe Jin(@Sicut_study)です。 今回はReactをこれから学んでいこうと思っている方に向けて、初心者チュートリアルを作成しました。 このチュートリアルではReactを書く上で欠かせないことを紹介しています。 実際にアプリを作りながらReactの機能について学ぶことによってより深く理解することが可能です。 このチュートリアルを最後までやったら、次に自分で習ったことを活かして簡単なTODOアプリなどを作れば基本がしっかり身につくようになっています。 またこのチュートリアルではJavaScriptではなくTypeScriptを採用しています。 モダンな会社ではTypeScriptが採用されることが多いはずだなので、少しでも慣れていただけ
Design Doc for react-boilerplate-2022
これは何? React(Next.js)アプリケーションのテンプレートのための Design Doc React(Next.js)アプリケーションのテンプレートとして実装したリポジトリ shimpeiws/react-boilerplate-2022 の設計についてのDesign Docです SSR/ISRはせずnext exportしてStatic Fileを出力する構成です API Routesを使っていますが、API接続コードをローカルで動作させるためのもので本番動作させるためのものではありません Design Doc 本ドキュメントは実装したリポジトリの構成、ライブラリの選定理由など設計についての背景を示すためのドキュメントという位置づけです 「デザインドックで学ぶデザインドック」(https://www.flywheel.jp/topics/design-doc-of-desig
React Redux Tutorial for Beginners: The Complete Guide (2020)
React Redux Tutorial for Beginners: The Complete Guide (2020) The simplest React Redux tutorial I wish I had when I started learning. Includes Redux Toolkit! When I first started learning Redux I wish I had some "Redux for dummies". I felt dumb because I couldn't wrap my head around actions, action creators, reducers. How about middleware? You've got to be kidding me! So during those days I starte
React Redux の SPA を運用して得られた知見と実装例、開発フローもあるよ！ - Qiita
Facebook が開発したUI ライブラリ 旧来の DOM 操作による状態管理を props や state で抽象化 パーツをコンポーネントごとに管理するのが得意 https://reactjs.org/ から、ライブデモを試せます。 SPAなどの複雑化する React のステート（状態）管理を、ルール（哲学）に従って書かせることで、フロントエンドの動きを追いやすくするためのライブラリ （*個人的解釈です） もともとは Flux と言う、データの流れを一方向に制限することで、流れを追いやすくするという、オブザーバーパターンの亜種から、さらに転じた考え方。 Redux と言う名前は 「Reducer」 + 「Flux」 で 「Redux」だそうです。array.reduce と同じような役割を Reducer が担います。詳しく知りたい方は作者の発表をご覧ください Dan Abramov
Reactで誰もがやりたかった10の機能。アプリ構想はあるけど作れない人の壁をぶっ壊す。 - Qiita
この記事は Reactで今どきなWebアプリを作りたい（あわよくばサーバーレスにしたい） チュートリアルは触ってみたけど、その後はどうしたら良いのか右も左も分からない という人向けに、「こんな感じで実装したら公開できるアプリとしての体裁は整いそうですぞ」というオレオレHowToをまとめたものです。 ーー追記（2019/4）ーー この記事は2018/9に作ったものなので、バージョン周りなど結構古くなっちゃってます。MaterialUIなどは今はV3が出ていてドキュメントを見る時などご注意いただければと思います。参考程度にご活用下さい。 まとめてたら少し長くなってしまったのですが、とりあえず動くソースだけくれれば良いよって人は、GitHubでソースも全て公開（MIT License）もしてますのでgit cloneするなりご自由にどうぞ。 ※最近はVue系のNuxtでこんなこともやってみたので
React 案件での面談時の質問事項 - Qiita
import from 'hoge.css'; const Hoge = () => ( <div className="hoge"> hogeee </div> ); css modulesなどはグローバル空間の名前を汚さないように一意の名前になるように設計されているので 各コンポーネントで自由な名前をつけることが出来ます しかし、上の内容だとグローバル空間の名前が汚染されていくのでBEMなどの命名規則で守っていくしかありません もし、class名で悩まされたくないのであればこの質問で避けることが出来ます コンポーネント設計 画面仕様書だけ渡されて作る案件が結構多かったりします コンポーネントの設計は画面実装者だけが把握するものではなくメンバー全体ですり合わせていく方がいいと個人的に思っています 似たようなコンポーネントなのに別の画面では違う実装の仕方をしていたり、 逆に使いまわされる前
ReactJSで作る今時のSPA入門（リリース編） - Qiita
ReactJSで作る今時のSPA入門（基本編）で作成したプロジェクトをリリースビルドしてデプロイする構成についての説明です。 リリースビルド リリースビルド用に次のようなディレクトリ構成に変更します。 client部分だけBabelでリリース用ビルドをするため、 package.jsonをclient、server、プロジェクト全体で持つ構成にします。 distフォルダにBabelのビルド結果を出力して ローカルからAWS EC2サーバにrsyncでデプロイする想定です。 configフォルダにはサーバ、クライアント共通の設定ファイルを格納してあります。（サーバの起動ポート番号など） ├── README.md ├── client │ ├── dist │ ├── package.json │ ├── src │ │ ├── App.js │ │ ├── co
ReactJSで作る今時のSPA入門（基本編） - Qiita
GitHubサンプルをbabel7に対応しました。 GitHubサンプルコード：GitHub （※この記事のサンプルはすでに古いです。最新版のサンプルと説明はGitHubのreadmeに書いてあるのでそちらを見てください） ReactJS使ってナウいウェブアプリケーション作ろうぜってことでまとめてみようと思います。 以前はウェブアプリケーション作る時はBracketsやAtom使っていたのですが プラグインのアップデートとかバグった時がめんどくさかったり、エディタが重かったりしたので 最近はVisual Studio Code(VSCode)に乗り換えました。 （必要な便利な機能もプラグインいれなくても揃ってるし、デフォルトでJSXサポートしてるから楽） VSCode環境構築：VSCodeで爆速コーディング環境を構築する(主にReactJS向け設定) ちょこっとReactJSを試したいとき
Nintendo Switchの中ではReactが動いてる！Nintendo eShop開発秘話を聞いてきた
Nintendo Switchの中ではReactが動いてる！Nintendo eShop開発秘話を聞いてきた 白石 俊平（HTML5 Experts.jp編集長） こんにちは、編集長の白石です。 この記事は、9月24日に開催されたHTML5 Conference 2017に登壇したエキスパートに、お話されたセッションのトピックを中心に語っていただこうとういものです。セッションの内容をより深く理解する手助けになるだけでなく、本記事単体でも面白く読んでいただけることを目指しています。 今回は、「Nintendo SwitchとWeb」という講演をされていた任天堂さんに、Switch開発におけるWeb技術の活用方法や、開発秘話を伺ってきました。任天堂のお二人は京都から、リモートでの取材に応じていただきました。 Nintendo SwitchではWeb技術が大活躍！ 白石 簡単に自己紹介をお願いで
ReactとReduxを結ぶパッケージ「react-redux」についてconnectの実装パターンを試す - Qiita
Redux Advent Calendar 2016 23日目 初めてAdvent Calendarに参加させていただきます。 当初はReduxとcreate-react-appを使って、サクッと素振りできる環境構築手順をまとめようと思ったのですが、ここ最近で自分が一番悩んだ「react-redux」についてReduxを始める方へ同じドツボにはまらないようにという願いを込めて投稿させていただきました。 react-reduxとは？ react-redux公式より引用 Official React bindings for Redux. Performant and flexible. React公式のReactとReduxをバインディングするライブラリ パフォーマンスと柔軟性があります ここで出て来る「柔軟性(flexible)」というのがこのライブラリが初見殺しと言われる所以となっており
React + Reduxでサーバー通信ってどこでやればいいの？ - TIS ENGINEER NOTE
React + Reduxはその柔軟性から、Googleで調べて出てくる情報の一貫性がなく、機能を実装するときの調査が結構大変。 今回はリアルタイムチャットツールを開発したときの経験を元にReact + Reduxでサーバー通信を行うときの書き方について紹介していきます。 ちなみに今回の例ではRuby on RailsでAPIを構築し、そちらへ通信を行うという構成です。 使用するライブラリなど サーバー通信用のライブラリ javascriptでサーバー通信をするときに用いられるものとしてはajaxがメジャーですが、Reactで開発している中でajaxのためだけにjQueryを用いるというのはちょっとナンセンスです。 そこで今回はaxiosというサーバー通信用のライブラリを使用します。 Reactでサーバー通信する際は他にもsugaragentやfetchが用いられることがありますが、書き方
ReactのUIコンポーネントライブラリの一覧表(2017/5版) - Qiita
はじめに Reactでは様々なリッチなコンポーネントが使えます。Electronで使いたいので調べてみました。 どんなリッチコンポーネントが提供されているか調べるため、 「react best ui library」などで検索してまとめました。 この記事は、そんなライブラリのまとめです。サンプリングは厳密ではないので参考までに。 下の図は、いくつかのライブラリのデモからピックアップしたものです。 「react best ui library」でヒットしたページのまとめ 以下の５つのサイトで紹介されているものの表を作ってみました。 英語の記事 ① 10 Best ReactJS UI Frameworks for rapid prototyping ② What is the best UI component library for a React based web app. ③ 19
redux-actionsを使って、reduxの記述で楽をしよう！ - Qiita
今日はredux-actions（記載時点ではv2.0.1）という公式推奨パッケージを使って、 reduxのactionとreducerを楽にスッキリ書く方法を紹介します。 追記：現在は公式のドキュメントができているので、こちらを参照するとより確実です。 https://redux-actions.js.org/docs/api/index.html アクションの形式 reducerを書く際に下記の形式（※1）を知っている必要があります。 { type : {symbol|string}, // アクションタイプ payload : {any}, // メインの情報 error : {boolean}, // エラーかどうか meta : {any}, // payloadに乗らなかった情報 } import { createActions } from 'redux-actions';
ReactとD3.jsの組み合わせで変わる！JavaScriptアニメーション開発
人気のデータビジュアライゼーションライブラリー「D3.js」をもっと使いやすく、便利にするために。Reactを使ったコンポーネント化に取り組み、リアルタイムで描画されるアニメーションを作ります。 D3は最高です。Webのデータビジュアライゼーション分野におけるjQueryのように、考えられるあらゆることが実現できます。 オンラインで見られる最良のWebのデータビジュアライゼーションの多くがD3を使用しています。D3は素晴らしいライブラリーですが、最近のv4のアップデートで従来よりさらに安定性が増しました。 Reactと一緒に使えば、D3はさらに便利になります。 ちょうどjQueryのように、D3は高性能ですが課題もあります。データビジュアライゼーションが大規模になればなるほど、用いるコードは複雑になり、バグを修正したりアイデアを絞り出したりするのにさらに時間がかかるようになります。 しかし
なぜ仮想DOMという概念が俺達の魂を震えさせるのか - Qiita
追記: 情報が色々と古くなったため、2020年に書き直した版へのリンクを張っておきます。 この記事は VirtualDOM Advent Calendar 2014 - Qiita の初日です。 初日ということで、基調講演風に、Virtual DOMとはなにか、なぜ僕はこんな興奮しているのか！という話から。 Virtual DOMとはなにか 既存の概念で当てはめると、JavaScriptのMVC, MVW(Whatever)フレームワークのViewに位置します。が、その程度では終わりません。仮想DOMとは世界を革命する力であり、このjQueryのDOM操作で汚れきったフロントエンドを救う救世主なのです。 現時点で自分が知っている限りは、以下の実装を指します。 facebook/react 最も使われてるFacebookの実装 Matt-Esch/virtual-dom Altenative
reduxを試してみた(5日目) - ajaxを使ってUIを構築する(reduxにおける非同期の制御) - Qiita
このページは作業ログです。やったことをつらつら書くだけなのでまとめません。あしからず。 対象読者 主に自分 今日のゴール jQueryではない方法を使ってajaxを使えるようになっていること Reactのコンポーネントを非同期リクエストで構築できるようになっていること モチベーション React.jsはビューのみをサポートしたライブラリ。サーバーとの通信部分はなんも用意していない チュートリアルではjQueryを使ってサーバーと通信してた。でもjQueryはその他もろもろいろいろ機能がある。Virtual DOMとの相性がありそうなので、jQuery自体導入せずに済ませられるのならそうしたい。 調べてみた A Comparison of JavaScript HTTP Libraries for the Browserという記事によると、Ajaxリクエストを実現するには下記の方法がある。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
React Image Lightbox
React + Reduxに通知を追加する方法まとめ - Qiita
React 入門 - コンポーネントの作成と Redux の導入とルーティング - Qiita
React.jsチートシート - Qiita
