ReactのJSXでクラス名を付ける時に変数と固定値な文字列を一緒に使いたいとき コレはうまくいかない return ( <button className="btn btn-${btnState}">BUTTON</button> ); 文字列結合する function Button() { const [btnState, setBtmState] = useState('primary'); return ( <button className={'btn btn-' + btnState}>BUTTON</button> ); } テンプレート構文 (ES2015)を使う function Button() { const [btnState, setBtmState] = useState('primary'); return ( <button className={`btn
こんにちは！雨の日はReact。Mizutani(@sirycity)です。 今日はreact(というかJSX)にCSSを適用する時に使うstyleについてです。styleは無駄にいろんな書き方があるので順番に色々見ていきましょうね 概要 一番簡単な書き方はこう。 <div style={{ color: 'red' }}>りんご</div> style={{ CSSのプロパティ: 'CSSの値' }} みたいな感じ。簡単だね。2つあるブレース{{}}はこんな感じに理解するといいと思う↓ 外側のブレースは「この中にJavaScriptを書く」って意味 内側のブレースはJavaScriptのオブジェクトを表す って感じ。 初級編 styleに書くのは基本的にはcssと一緒。だけどいくつか注意点があります。 まずひとつ目。CSSの値はクォートで囲もう。囲まないとCSSの変数扱いになるからね。こ
コンポーネントとは？ UIは2つに分類される 1. 見た目（View） 2. 機能（Controller） コンポーネント = 見た目 + 機能 Webページはコンポーネントのツリー構造になっている なぜコンポーネントを使うのか 再利用性するため 分割統治するため 変更に強くするため コンポーネントの種類 Class Component : クラスによって定義されたコンポーネント Functional Component : 関数型で定義されたコンポーネント Functional Component ES6のアロー関数で記述 stateを持たない（stateless） propsを引数に受け取る JSXをreturnする シンプル import React from 'react'; const Article = (props) => { return ( <div> <h2>{prop
世はReact with CSS 戦国時代...! Pure CSS CSS Modules Styled Components(CSS in JS) Emotion(CSS in JS) Linaria(CSS in JS) Tailwind CSS Framework(Chakura UIなど) と、Reactと共に使うCSSの選択肢は非常に多岐に渡り、学習者を混乱に陥れることもしばしばかと思います。 私が実装経験がない Tailwind CSS Framework については今回語りませんが、それ以外のCSS実装方法を全く同じコンポーネントを実装することで比較してみました。 下記が実際にコーディングしたGitHubになります。 Pure CSS 通常のCSSです。 CSSは全てがグローバルで管理されてしまうので保守・管理にコストがかかり、崩壊しやすいです。 なのでBEMなどのCSS設
こんにちは。株式会社インプルの平澤です。 ReactのCSSで迷われたこと、迷っていることはありませんでしょうか？ そんな方々へReactの各CSSをご紹介致します。 最初に言いますが、どの方法が良いかの正解はありません。「個人的な相性」・「開発チームの相性」・「パフォーマンス」など、どこに重点を置くかでも選択は変わってきます。 それを踏まえた上でご自身のベストプラクティスを見つけてみましょう。 本記事では ・Pure CSS ・CSS Modules ・CSS in JS (styled-component, emotion) ・CSSフレームワーク(Tailwind CSS) を皆さん大好きReactのトップページに適用して比較し、 各メリット・デメリットをまとめました。 ※下記コマンドでプロジェクトを作成した前提で進んでいきます。 $ npx create-react-app {プロ
はじめに 私自身、vue は 2019 年頃から書いており、今年で 3 年目くらいです。たいして vue に詳しくもないですが、それなりのコード量を書いてきたので、フレームワークとして愛着はあります。今年から react を触る機会が増えそう、ということで、ちょっとづつ react の勉強をはじめていたのですが、vue との明確な違いとして「DOM の再レンダリングの実行タイミングの差」が気になっています。react はドキュメントを読んでいると、「不要な再レンダリングを防ぐ」というトピックを扱うドキュメントが多いように思いますが、vue を勉強しているときは、正直、あまり意識をしていなかった領域です。なぜ、vue を書いているときは意識していなかったのか、どういう差があるのか、などちょっと気になったベースで調べて、記事にしています。 react と vue ってレンダリングのトリガーと範
複数のページで構成されたReactアプリケーションを構築する際にはReact単独ではルーティングの機能をもっていないためルーティングライブラリが必要となります。数あるルーティングライブラリの中でReact Routerは最も人気の高いライブラリです。複数のページを持つということはブラウザからアクセスするためのURLが複数存在することになります。アプリケーションを構成するURLにアクセスした場合にどのページコンポーネントのコンテンツを表示させるのかといったルーティングの設定をReact Routerを利用して行います。ログインページやユーザ登録ページなど複数のページが必要なアプリケーションをReactを利用して構築したい場合にはReact Routerを利用することになります。 通常のWEBサーバではページを移動する度にサーバから送られてくるコンテンツをブラウザ上に描写させるためページ全体の
Ubiregi Advent Calendar 2019 2日目です。1日目は日曜でお休みだったのでした。 フロントエンドエンジニアのコジャが担当します。まだ入社して5ヶ月程度でフロントエンドエンジニアとしても5ヶ月程度です。 何番煎じかわかりませんが、React-Routerの記事を投稿します。生暖かく見守ってください。いじめないで。 reactのRoutingライブラリはreact-routerとreact-router-domがあります。 「react-routerがv4から改称してreact-router-domになったんだ!」みたいな印象がありますが(me too)。厳密にいうと違います。 react-router でググって一番上にくる記事がいきなりnpm install --save react-router-dom とかしてるのでややこしいのですが。 なにはともあれ REA
概要 react-routedeページ遷移時、window.scrollTo(0, 0)を実行できるような仕組みにすればOK 仕組み導入前後 新規itemの作成後、react-routerの機能を使って、item画面に遷移するアプリを想定。 react-routerはヘッダー以外の部分を描画するので、何も対策しないと、ヘッダー以外の部分が表示されます。（以下のような感じ） import React from 'react' import {MuiThemeProvider} from 'material-ui/styles'; import theme from '../assets/theme' import {BrowserRouter, Switch, Route} from 'react-router-dom'; import Home from './Home' import A
import React, { Component } from 'react'; import { withRouter } from 'react-router' class ScrollToTop extends Component { componentDidUpdate(prevProps) { if (this.props.location !== prevProps.location) { window.scrollTo(0, 0); } } render() { return null; } } export default withRouter(ScrollToTop) componentDidUpdateは、このコンポーネントがmountされたときに呼び出されるもの つまりこのcomponentを置いてあげれば、 ページ表示時にwindow.scrollTo(0, 0)
React hooksとは React 16.8 で追加された新機能です。 クラスを書かなくても、 stateなどのReactの機能を、関数コンポーネントでシンプルに扱えるようになりました。 React hooksを基礎から理解する (useState編) 今ここ React hooksを基礎から理解する (useEffect編) React hooksを基礎から理解する (useContext編) React hooksを基礎から理解する (useReducer編) React hooksを基礎から理解する (useCallback編) React hooksを基礎から理解する (useMemo編) React hooksを基礎から理解する (useRef編) useStateとは useState()は、関数コンポーネントでstateを管理（stateの保持と更新）するためのReac
ReactでコールバックとかuseEffectをごちゃごちゃ書いていると、時々ステートの値が上手く更新されていなくて困ることがあります。 たとえば、以下のようなコードを書いているときとか。 { const [count, setCount] = useState(0); const onClick = () => { setCount(count + 1); // カウントを1増やした console.log(count); // 1増えた値が表示されてほしい（でも増える前の値が出る） }; return ( {count} ); }; ">Copy export default () => { const [count, setCount] = useState(0); const onClick = () => { setCount(count + 1); // カウントを1増やした
目次 今から始めるReact入門 〜 React の基本 ←★ここ 今から始めるReact入門 〜 React Router 編 今から始めるReact入門 〜 flux編 今から始めるReact入門 〜 Redux 編: immutability とは 今から始めるReact入門 〜 Redux 編: Redux 単体で状態管理をしっかり理解する 今から始めるReact入門 〜 Redux 編: Redux アプリケーションを作成する 今から始めるReact入門 〜 Mobx 編 React をはじめるにあたって 普段バックエンドを触っている人間として、フロントエンド側の知識も触れておこうということで個人的なReact の勉強記を残しておきたいと思います。 すでにReact の記事は多く出回っていますが、ここでは最近のReact 及びReact Router, Redux, その他Red
Reactアプリケーション内でGoogle Analytics計測をする際、react-gaを使わず、gtag.jsを利用した方法とその選択理由 電通デジタルのエンジニア、西山です。 この記事は、電通デジタルアドベントカレンダー2020の3日目の記事です。前回の記事は「2020年に作ったDevOps内製ツール」でした。 この記事ではReactでGoogle Analyticsの計測コードを埋め込む方法についてお話しします。他のブログなどですでに何度も紹介されているテーマですが、ブログによって用いられる手法は様々で、どれを採用すればいいか迷う人も多くいるのではないかと思いますし、中には情報が古くなっているものもあります。 そこで最新の状況を調査した上で、私たちが採用した手法を紹介しますので、ReactでGoogle Analytics計測コードを埋め込む際の参考にしていただければと思います。
React って何？ React とは UI を作ることに特化した JavaScript のフレームワークです。以下のようなリッチな表現の時間選択のための UI も React を使って実装されていて、 react-gradient-timepicker というライブラリ名で一般に公開されています。 そのほかにも、日付選択のためのカレンダー形式の UI や Slick のようなカルーセルの UI も公開されています。React はこういった複雑な UI を作ることが得意なフレームワークです。 ただし、React を使うと、こういった UI が簡単に作れるようになるというわけではなく、JavaScript やプログラムのある程度の知識は必要になってきます。 React の歴史と背景 1. React の誕生 React は、2011年にFacebookのソフトウェアエンジニアであるジョーダン
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
