コンポーネント時代のi18n
サービスを海外展開したい場合、国際化対応を行う必要性がある。これをi18n対応と呼ぶ。Reactでフロントエンドを構築する場合、i18nのための多くのライブラリがあるが、yahoo製の react-intl が実質デファクトスタンダードだ。react-intlを実際に使っている例として、スター14000超えのReactボイラープレートであるreact-boilerplate やSNSの マストドン がある。 しかし、実際にreact-intlを使うとidの管理が非常に面倒であることがわかる(他すべてのi18nライブラリも同様だが)。react-boilerplateを参考にidの管理を見てみる。 まず、react-boilerplateでは、ディレクトリベースでコンポーネントを管理している。その中で、messages.jsにdefineMessagesを使いidとデフォルトメッセージを定義
Typechecking With PropTypes – React
These docs are old and won’t be updated. Go to react.dev for the new React docs. PropTypes aren’t commonly used in modern React. Use TypeScript for static type checking. Note: React.PropTypes has moved into a different package since React v15.5. Please use the prop-types library instead. We provide a codemod script to automate the conversion. As your app grows, you can catch a lot of bugs with typ
React開発 現場の教科書|マイナビブックス
備考 石橋 啓太（イシバシ ケイタ） 1987年生まれ。ウェブサイトデザインやHTML・CSSを中心にデザイナーとして4年ほど経験後、2014年5月に株式会社DMM.comラボ入社。 ネイティブアプリのUI/UXデザインやWebフロントエンド業務に携わる。現在では各種イベントでの登壇やOSSへのコミット活動を行う。デザインから実装まで担当できる強みを活かして、ユーザビリティ・アクセシビリティなどを重視した高品質なWeb開発を研究している。 サービスやガジェットなど新しいものが好き。梨とビールと音楽が好き（楽器は弾けない）。 ●編集者プロフィール 丸山 弘詩（マルヤマ ヒロシ） 書籍編集者。早稲田大学政治経済学部経済学科中退。国立大学大学院博士後期課程(システム生産科学専攻)編入、単位取得の上で満期退学。大手広告代理店勤務を経て、現在は書籍編集に加え、さまざまな分野のコンサルティング、プロダ
React’s ⚛️ new Context API – DailyJS – Medium
It’s way more ergonomic, it’s no longer “experimental,” and it’s now a first-class API! OH, AND IT USES A RENDER PROP! NOTE: This is a cross-post from my newsletter. I publish each email to my blog two weeks after it’s sent. Subscribe to get more content like this earlier right in your inbox! 💌 Curious about what’s going to happen to the context API when React hooks are stable? Read all about it
React における State と Props の違い - Qiita
React コンポーネントがデータを受け取ったり、ハンドリングしたり、表示したりするための主要な方法として、State と Props があります。 この二つの概念の違いを知ることは、React を効率的に利用するために役立ちます。 State: そのコンポーネントが持っている状態 Props: 親コンポーネントから渡されたプロパティ State (状態) mutable data (可変のデータ) maintained by component (コンポーネントによって保持) can change it (変更可) should be considered private (プライベートであるべき) State は可変のデータです。State の変更は、仮想DOMとの差分をとり、実際のDOMを更新し、コンポーネントを再描画するための基本的な方法となっています。 State はコンポーネン
FormikでReactに簡単にフォームを導入！！ ~0からreact習得記 day 17~
準備 create-react-app create-react-appを使用して、実装準備を行います。 ターミナルから下記のコマンドを実行します。 #プロジェクト作成 create-react-app プロジェクト名 #プロジェクトディレクトリへ移動 cd プロジェクト名 #yarnインストール yarn install #FormikとYupをインストール yarn add formik yup #yarnを実行 yarn start import React from "react"; import { render } from "react-dom"; import { withFormik } from "formik"; import Yup from "yup"; // Formikで覆う関数 // Destructuringで各値にpropsを代入 const MyInn
もうReactのフォームで消耗したくないので、HoCベースのフォームライブラリを作った - wadackel.me
2017 年。React のフォームに消耗しました。 いくつか良さそうなフォームライブラリはありますが、個人的に満足のいくものが無かったので、とあるプロジェクトで実装したものをベースにしてライブラリにまとめました。 作ったもの react-drip-form という、HoC ベースで React のフォームコンポーネントを構築するライブラリを作りました。元となるコードを書いている時、「さくっとフォームの実装を済ませてゆっくりコーヒーでも飲みてぇ…」という気持ちがかなり高まってたので、コーヒーを連想させる名前にしてみました。 wadackel/react-drip-form https://github.com/wadackel/react-drip-form ドキュメントのページでは、Create React App を使った Quick Start もあるので、さくっと試すことが出来ると
302 - JS.ORG
Dedicated to JavaScript and its awesome community since 2015
React.jsのPropTypesの一覧 | 酒と涙とRubyとRailsと
React.jsでコンポーネントを定義する際にPropTypesを指定すること受け取る引数(props)の入力チェックを行うことができます。数値や文字列、配列を受け取ったかをチェックでき、条件を見対していない場合はconsoleに警告を出すことができます。 この機能はReact v15.5以上ではdeprecatedになっています。この機能を使う場合は「prop-types」をインストールする必要があります。 🐡 サンプルコードReact.jsのPropTypesを含むコードのサンプルです。 import PropTypes from 'prop-types'; class Greeting extends React.Component { render() { return ( Hello, {this.props.name}</h1> ); } } Greeting.propTyp
JavaScript: Reduxが必要なとき/不要なとき（翻訳）｜TechRacho by BPS株式会社
概要 原著者の許諾を得て翻訳・公開いたします。 英語記事: When (and when not) to use Redux – LogRocket 原文公開日: 2018/01/20 著者: Christian Nwamba サイト: LogRocket 2018/03/13: 初版公開 2021/06/03: 更新 Reduxが登場するまで、複雑なタスクを組むときのステート管理は相当つらい作業でした。Reduxは、Fluxというアプリケーションデザインパターンにヒントを得て、JavaScriptアプリでステートを管理するために設計されました。ReduxはReactと併用されることが多いのですが、ReduxはjQueryやAngular、Vueといった別のフレームワークとも併用できます。 Reduxのサイズは非常に小さい（依存関係も含めてわずか2KB）にもかかわらず、アプリの各コンポーネ
How to Use CSS Modules with Create React App
📎 ⏏ 💿Update January 18th, 2018: CSS Module support has landed in alpha builds of Create React App v2 🎉. Facebook’s Create React App is a great way to get started on a new React project quickly. It supports a lot of sensible and popular defaults. But if you want to add unsupported functionality — a CSS preprocessor step like CSS Modules for example—you’re going to have to eject and head out on y
FlowtypeでReact.propTypesを型チェックする - Qiita
/* @flow */ var React = require('react'); var T = React.PropTypes; var Component = React.createClass({ propTypes: { message: T.string.isRequired }, render: function(){ var m: number = this.props.message; return <div key='foo'>{m}</div>; } }); $ flow /Users/mizchi/playground/babel-flow/src/index.js:7:14,21: string This type is incompatible with /Users/mizchi/playground/babel-flow/src/index.js:10:12
flowtypeを試してみる - undefined
最初に この記事はflowtype導入の手順紹介というより、自分の作業ログに近いものです。flowtypeって何？ってところも含めて以下に紹介する記事を見たほうがわかりやすいと思いますので、参照してください。 今回試すにあたって、参考にした記事。 qiita.com qiita.com joe-re.hatenablog.com qiita.com 動機 自分の観測範囲内で「flowtypeいいよ！」って話しをよく聴くようになり、試してみることにした。 自分の場合はだが、主な動機としてはReactのpropTypes頑張って書く割に得られる恩恵少ないというのがあってflowtypeであれば、それを改善しつつ、部分的に適用することができる。 新規プロジェクトで あればTypescriptを採用するなどの選択肢を取ることが可能であるが、既存プロジェクトの場合はそうはいかない。だけど、flowt
Reactのコンポーネント作成を効率化しよう
All slide content and descriptions are owned by their creators.
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
react-event-listener
React-intlで多言語化 ~ Redux + redux-sagaで言語設定をredux内で取得する
GitHub - formatjs/formatjs: The monorepo home to all of the FormatJS related libraries, most notably react-intl.
react-ga/demo/app/withTracker.jsx at master · react-ga/react-ga
GitHub - airbnb/hypernova: A service for server-side rendering your JavaScript views
GitHub - nfl/react-helmet: A document head manager for React
