タグ

reactに関するkurouruのブックマーク (6)

  • とほほのReact入門 - とほほのWWW入門

    SPA(Single-Page Application) を実現する JavaScript フレームワークの一つです。 Angular, Vue.js とよく比較されます。 Facebook 社によって開発され、Facebook の Web サイトでも利用されています。 2020年4月現在の最新バージョンは 16.13.1 です。 MITライセンスで公開されており、商用利用可能です。 JavaScript の中に直接 HTML/XML を記述する JSX という技術を利用しています。 JavaScript は ES6 の文法である import やアロー関数を取り入れています。 JSX や ES6 文法を、Babel というトランスパイラで ES5 の JavaScript に変換しています。 Chrome, Firefox などで動作します。IE8 で一部機能、IE9 で制限付き、IE1

  • Hyperapp のソースコードを読む - Qiita

    Hyperappとは Hyperapp GitHub ページ GitHub - hyperapp/hyperapp: 1 KB JavaScript library for building frontend applications. Web アプリのフロントエンドJavaScript ライブラリ。React, Preact, Vue といった代表的なものよりもずっと小さく、1 KB という超軽量サイズ。他のライブラリに依存することなく使えて、さらにスピードもある Elmアーキテクチャーに基づいてて、アプリケーション設計はElmReact、Reduxと似てるけど、ボイラープレートは少ないし、TypeScriptにも対応して、とにかくシンプル。 2018 年は Hyperapp の年だ - Qiita 実装サンプル hyperapp/hello-world.md at master

    Hyperapp のソースコードを読む - Qiita
  • Reactを使って本気でアンケートシステムをつくった - Qiita

    この記事は エムスリー Advent Calendar 2017 の25日目の記事です。 普段はDB・サーバサイド・クライアントサイドまでの設計・実装・運用を扱っていますが、この記事ではReactを使って開発したシステムについてを紹介しようと思います。 作ったもの アンケートシステム(survey-designer-js)を作り、社内で使っていました。またOSSとしてレポジトリに公開もしています。 GitHub DEMO なお公開しているのはクライアントサイドのみで、サーバサイドの実装は公開していません。なお、エムスリー社内で使用しているものはこのレポジトリからフォークしたものとなっています。 下記のような機能を備えています。 ページの作成 ページ内への設問の作成 複数選択肢 単一選択肢(ラジオボタン) 単一選択肢(プルダウン) 数値記入 1行テキスト 複数行テキスト 表形式 都道府県 説

    Reactを使って本気でアンケートシステムをつくった - Qiita
  • 2017末時点での React Component 設計のベストプラクティス - Qiita

    どう考えているか、というのを聞かれたので、記事に起こしておきます。個人の意見です。 Prettier を使う 気づけばコードの整形を人間がやる時代は終わりました。 細かいコーディングスタイルでレビューの時間を取るぐらいだったら、一貫した自動整形ルールを適用すべきです。 人によっては細かいこだわりがあって prettier の規則が気にわないかもしれず、僕も最初はそうでしたが、Atomで保存する度に自動整形を走らせる prettier の強烈な開発体験によって、最終的にそれらのこだわりを全て捨てることが出来ました。 生産性を求めるなら、現時点では最優先で導入すべきものです。 React.createClass を使わない v16 で削除されたのでいわずもがな。 同様に、 createClass でしか使えなかった mixin 周辺機能も丸ごと deprecated です。 「可能な限りは」

    2017末時点での React Component 設計のベストプラクティス - Qiita
  • 30分で出来るDraft.js+React.js リッチエディタ作成入門 - Qiita

    目的と概要 Draft.jsはReact.js上でリッチテキストエディタを作るためのフレームワークです。日であまり流行ってない気がするので、始めやすいように入門記事を書いてみることにしました。 最近ではReact.jsを採用しているサイトも増えてきて、Webフロントエンドは更にリッチ化の流れが激しくなっています。 今回はReact.jsでリッチなテキストエディタを簡単につくれるDraft.jsを利用して30分でテキストエディタを作っていきます。 この記事で作れるもの こんな感じのエディタ。すごいよくある感じのWYSIWYGエディタ。 手順 環境構築 React.js、Draft.jsの環境を作りましょう。 React.jsの環境を整えている方は bash npm install draft-js --save で大丈夫です。 環境構築が面倒な方にはテンプレート用意しておきました お納めく

    30分で出来るDraft.js+React.js リッチエディタ作成入門 - Qiita
  • Railsで構築しているWebサービスをjQueryベースからReactに移行する時の知見 | スペースマーケットブログ

    こんにちは、エンジニアの小林です。 先日、スペースを貸し出すオーナー様向けのダッシュボード(管理画面)をリニューアルしました。 スペースマーケットはwebサーバもAPIサーバもRailsで構築しているのですが、JQueryをベースに構築していたリニューアル前の実装からReactをベースにした実装へ移行した際に得た知見を書きたいと思います。 サーバ構成 既存のサーバ構成では、webサイトはwebサーバから、アプリはAPIサーバからそれぞれデータベースを参照していました。 リニューアルに伴いwebサーバからもAPIサーバを参照する構成となります。 webサーバから別ドメインのAPIサーバにアクセスするためには CORSの設定 webサーバとAPIサーバはドメインが違うため、ReactのコードからAPIサーバにajaxリクエストが送れません。これを回避するためにCORS(Cross-Origin

    Railsで構築しているWebサービスをjQueryベースからReactに移行する時の知見 | スペースマーケットブログ
  • 1