Reactを使って本気でアンケートシステムをつくった - Qiita
この記事は エムスリー Advent Calendar 2017 の25日目の記事です。 普段はDB・サーバサイド・クライアントサイドまでの設計・実装・運用を扱っていますが、この記事ではReactを使って開発したシステムについてを紹介しようと思います。 作ったもの アンケートシステム(survey-designer-js)を作り、社内で使っていました。またOSSとしてレポジトリに公開もしています。 GitHub DEMO なお公開しているのはクライアントサイドのみで、サーバサイドの実装は公開していません。なお、エムスリー社内で使用しているものはこのレポジトリからフォークしたものとなっています。 下記のような機能を備えています。 ページの作成 ページ内への設問の作成 複数選択肢 単一選択肢(ラジオボタン) 単一選択肢(プルダウン) 数値記入 1行テキスト 複数行テキスト 表形式 都道府県 説
2017末時点での React Component 設計のベストプラクティス - Qiita
どう考えているか、というのを聞かれたので、記事に起こしておきます。個人の意見です。 Prettier を使う 気づけばコードの整形を人間がやる時代は終わりました。 細かいコーディングスタイルでレビューの時間を取るぐらいだったら、一貫した自動整形ルールを適用すべきです。 人によっては細かいこだわりがあって prettier の規則が気に食わないかもしれず、僕も最初はそうでしたが、Atomで保存する度に自動整形を走らせる prettier の強烈な開発体験によって、最終的にそれらのこだわりを全て捨てることが出来ました。 生産性を求めるなら、現時点では最優先で導入すべきものです。 React.createClass を使わない v16 で削除されたのでいわずもがな。 同様に、 createClass でしか使えなかった mixin 周辺機能も丸ごと deprecated です。 「可能な限りは」
Clean Code vs. Dirty Code: React Best Practices
This article will focus on clean code practices as they apply to modern React software development. I’ll also talk about some of the “sugar” that ES6/ES2015 brings to the table. What is clean code, and why do I care? Clean code is a consistent style of programming that makes your code easier to write, read, and maintain. Often a developer spends time on a problem, and once the problem is solved, t
Reactでパターンシーケンサを作った話 - Speee DEVELOPER BLOG
こんにちは、Speeeエンジニアの二社谷(nishaya)です。 先日開催されたSpeeeKaigi(詳細は以下の記事を参照)にて、Reactで使ったパターンシーケンサの発表を行いました。 tech.speee.jp 今回作ったもの DEMO ソースコード ブラウザで動くマルチトラックのステップシーケンサです 音楽の知識がなくても、なんとなく触っているだけでそれっぽい音が出ます サンプラーもついてます 使ったもの React/Redux FlowType Web Audio API/MediaDevices 発表資料 speakerdeck.com モチベーションと課題 前回のSpeeeKaigiではReactでシンセサイザーを作ったのですが、自分は楽器を弾けるわけではないので、ブラウザを使って音楽を楽しむところまでは到達できませんでした。 そこで、下記の3点を押さえたモノを作れば、楽器を
GitHub ページを React でつくる (応用編) - Qiita
1. プロジェクトの作成 - Create React App 1-1. Create React App のインストール 公式 : create-react-app 1-1-1. インストールとローカル確認 # カレントディレクトリ : ~/. npm i -g create-react-app create-react-app publish-react-project-advanced cd publish-react-project-advanced npm start → http://localhost:3000 を開くと、 publish-react-project-advanced の内容が表示されます。 + npm のはじめかた 2. Create React App - CSS のカスタマイズ 2-1. CSS → Sass publish-react-project-
今、Reactでリポジトリ公開するなら、これくらいは対応しておきたい - Qiita
趣味で作ったwebサービスのリポジトリをgithubに公開して2ヶ月くらい フロントエンドのソースが雑だったので、リファクタリング中にした対応を紹介 前記事：Go + react + ansibleでサービスを作ってOSSにしてみた http://qiita.com/wheatandcat/items/66d72445ad0c5df2a8be github 記載している内容は、下記のリポジトリに取り込み済みの内容です。 うまく動かなかったら、こちらから動きを見てもらえたらと思います。 ■dotstamp_client https://github.com/wheatandcat/dotstamp_client flow javascriptでも型が使えるようになるライブラリ。 ファイル単位で実装していけるから、稼働中のプロジェクトでも柔軟に導入していけるのが魅力。 導入的にはファイルの頭に
Painting with Code
Today, we’re excited to share a tool we built to help bridge the gap between designers and engineers working on design systems at scale. React-sketchapp is an open-source library that allows you to write React components that render to Sketch documents. If you’re a designer or an engineer familiar with React, you should feel right at home with the new library, and you can play with it right now. H
さいきんReact, Reduxでやっている設計 - しゅみは人間の分析です
はじめに ブラウザでGUIアプリケーションを作らなくても良い牧歌的な時代は終わりつつあります。個人的な意見としてはブラウザはドキュメントビューアのままでいて、複雑なGUIアプリケーションはネイティブアプリケーションとして実装されてほしいのですが、そうは言ってもお仕事で人間にとって負担の低いUIを作っていく必要があるのです。 Railsでサーバアプリケーションを書きつつ管理画面はネイティブでなんてことはコスト的に実現できません。かといって長期的に運用されるシステムを作ると、システムを運用するためのUIが操作しやすいに越したことはありません。Bootstrapを使っててきとうなフォームを並べただけの画面を作って怒られた経験はありませんか？ たとえサーバ開発者だとしても、我々は使いやすいUIを求め続ける必要があります。 react, redux 複雑なGUIを作るためのフレームワークも乱立の時代
おじさんが React で Hello World するのに 3 時間弱かかった話
おじさんが React で Hello World するのに 3 時間弱かかった話 公開日: 2017年3月19日 タグ: javascript, react なんとなく React とかいうやつを試したくなって、とりあえず Hello World って表示するだけのものでも作るか…と思ったのだけど、まったく前提知識がないものだから完成するのにめっちゃ時間がかかった、という話でも書いておく。多少脚色はある。 いきなりつまづく まずは react と react-dom ってのがいるらしいんで入れるぞ、最近 npm にも慣れてきたしこれくらいは簡単…と、とりあえず適当なディレクトリ作って npm init -y してから $ npm install --save react react-dom とかやるんだけど、これがエラーが出てインストールできない訳だ。やる前に Node.js のバージョ
Firebase, React, FluxでWebアプリ作って思ったこと - Qiita
ここで書いてること タイトルの構成でWebアプリ作った際に思ったこと 作り方ではないのでコードは一切書いてない 作り方的なのも書きたいけど多分無理 きっかけ 2016年は結構ダラダラしてた 仕事以外ではほとんど何も書いてない 夏以降は筋トレのことばっか考えてた おかげで筋肉はついたよ そろそろ何か始めようかと思った 何を作ったか 何をはさほど重要ではなかった 今回重視したのは何を触るか Redux(Flux) React Webpack Firebase postcss 結局作ったのはメモ帳でした Redux ReduxというかFluxでちゃんと作ってみたかった Reduxのチュートリアルはやった 公式ドキュメントは読んだ Fluxを調べる内に@azu_reさんの10分で実装するFluxに辿り着いた これで良いじゃない Fluxの実装面をちゃんと理解して書ける 別にReduxを使わなくても
Angular vs React — the DEAL BREAKER | HackerNoon
Too Long; Didn't ReadAngular is a full framework with all the tooling and best practices designed on top of it. Suits ones, hates the others. React on the other hand is just a small view library that you would need while making an app. This might be both good, and a bad thing, and the article should help you to finally make the right choice. A REAL, EXTREME framework comparison Angular is a full f
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
たぶんこれが一番分かりやすいと思います React + Redux のフロー図解 - Qiita
【追記】 もうこれ古いから参考にしないでください https://t.co/mXtcc73Orf — もし Laravel が流行しなくなってこられてきてたとしたら、絶対に捨てられてこられてたと思うか (@mpyw) January 26, 2021 Redux にはその昔 connect()() とかいうクソ API と， Redux-Saga とかいう宗教がありました という考古学です — もし Laravel が流行しなくなってこられてきてたとしたら、絶対に捨てられてこられてたと思うか (@mpyw) January 26, 2021 読者対象 Tutorial: Intro To React - React Example: Todo List · Redux 「チュートリアルそれぞれ一周した！Reactは何とか理解できたが，Reduxがさっぱりわかんねぇ！」 ぐらいの人向け。自分
私たちはなぜReactではなくVue.jsを選んだのか | POSTD
Qwintryチームは最近、既存のすべてのプロジェクトのフロントエンドをVue.jsに移行しはじめました。新しいプロジェクトでもVue.jsを使います。 レガシーなDrupalのシステム（qwintry.com） ゼロから新しく書きなおすqwintry.comのブランチ Yii2で動くb2bシステム（logistics.qwintry.com） その他、比較的小さめのプロジェクト（ほとんどは、PHPとNode.jsでバックエンドを構築しているもの） プロジェクトの規模についていうと、 Qwintry は世界中で約50万人の顧客が使っています。アメリカとドイツに倉庫を持っていて、アメリカ国内 最大の郵送先 のひとつで、東欧や中東への出荷に注力しています。Qwintryは、アメリカのオンラインストアでグッズを購入する人たちのためのツールです。私たちの倉庫に届いた荷物をコントロールパネルで管理で
React のソースコードを読んでみよう！ - マルシテイア
こんにちは id:amagitakayosi です。 株式会社はてなで主にフロントエンド開発を担当しています。 この記事では React 本体のコードを読んでみます！！ この記事は Reactアドベントカレンダー 2016 の7日目の記事です。 昨日は yutaszk さんで「react-router v4 でFlux アプリケーションをHot Module Replacement する」でした。 目次 はじめに (Kyoto.js の宣伝) 準備 ディレクトリ構造 monorepo Haste Gulp と Grunt コードリーディング react ReactComponent react-dom ReactMount ReactReconciler ReactCompositeComponent ReactDOMComponent まとめ おわりに はじめに (Kyoto.js の宣
React/Redux… Where Do You Start?
When a new framework is as hot as React is right now, there seems to be a landslide of how-to videos and posts. It can be difficult for the bright eyed programmer to navigate through what is useful and where to start. So the question lies, what is the best way to begin learning React/Redux? This article will help answer this question by walking you through some helpful lessons and exercises. 1# Be
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
TechCrunch | Startup and Technology News
Reactで学ぶ！いまどきのWeb開発
VulcanJS
React.js・ReactNative・Redux入門
