18 Oct 2021 A Visual Guide to React Rendering - Cheat SheetWhen does a React component re-render? What can cause re-renders, and how to prevent unnecessary renders? Here is a quick cheat sheet you can refer to whenever you find yourself asking these questions. This article serves as a table of contents for the Visual Guide to React Rendering series. Each section of the cheat sheet links to the cor
These docs are old and won’t be updated. Go to react.dev for the new React docs. These new documentation pages teach React with Hooks: Quick Start Tutorial react: Hooks Hooks are a new addition in React 16.8. They let you use state and other React features without writing a class. import React, { useState } from 'react'; function Example() { // Declare a new state variable, which we'll call "count
先日『Flux – Dispatcher【日本語訳】と実装のポイント』という記事を投稿しました。Fluxの理解を深めるために、その実装の核となるDispatcherを理解することが大事だと思ったからです。おかげで、ある程度Fluxの理解進みました。今回さらにFluxを実装することで、理解を深めたいと思い、簡単なサンプルを作ってみることにしました。このサンプルを通して、Fluxの実装方法について説明していきたいと思います。だいぶ長くなりましたが、ぜひ参考にしていただければと思います。 Fluxの実装サンプルまずはサンプルを見てください。フォームに入力したテキストを表示させるだけのものとなっています。とても単純ですが、Fluxを使って実装しています。 Flux実装サンプルコード – GitHubFlux実装の説明の前にFluxとは FluxFluxは「クライアントサイドのWebアプリケーション
「今日からReactを始めたい」 「とりあえずReactで何か動かしてみたい」 ここは、そういった方が、Reactを始めみるためのチュートリアルです。 今回は、Reactを使ってFacebookのいいねボタンのようなコンポーネントを実装していきます。 > 今回作る「いいねボタン」のデモ今回作る「いいねボタン」のデモ 実際に押せます↓ > チュートリアルの目標チュートリアルの目標 Reactのコンポーネントを実装できるようになる Reactコンポーネントのイベントをハンドリングできるようになる Reactコンポーネントの状態(state)を実装できるようになる Reactの雰囲気をつかめる! > このチュートリアルについてこのチュートリアルについて なお、このチュートリアルは、下記のバージョンで動作確認しています。 npm 2.14.2 react 0.14 react-dom 0.14 w
GitHubサンプルをbabel7に対応しました。 GitHubサンプルコード:GitHub (※この記事のサンプルはすでに古いです。最新版のサンプルと説明はGitHubのreadmeに書いてあるのでそちらを見てください) ReactJS使ってナウいウェブアプリケーション作ろうぜってことでまとめてみようと思います。 以前はウェブアプリケーション作る時はBracketsやAtom使っていたのですが プラグインのアップデートとかバグった時がめんどくさかったり、エディタが重かったりしたので 最近はVisual Studio Code(VSCode)に乗り換えました。 (必要な便利な機能もプラグインいれなくても揃ってるし、デフォルトでJSXサポートしてるから楽) VSCode環境構築:VSCodeで爆速コーディング環境を構築する(主にReactJS向け設定) ちょこっとReactJSを試したいとき
Angular、Reactと並んで海外で人気が高まっている「Vue.js」。ReactとAngularの開発経験がある著者がVue.jsをチュートリアルを通じて特徴をまとめました。2017年、新しく学び始めるきっかけにどうぞ。 2016年9月、人気のJavaScriptフレームワークVue.jsがv2をリリースしました。それ以来ぜひ使ってみたい、どのようなものか知りたいと思っていました。AngularとReactを使い慣れた者の1人としては、Vueが似ているところや違うところも知りたかったのです。 Vue.js 2.0はすばらしいパフォーマンスを誇ります。データサイズが比較的小さく(バンドルされるVueのランタイム版は一度最小化してgzip圧縮したら16KBしかありません)、Vueのvuexや、vue-routerのような付属の状態管理ライブラリーもアップデートされました。1つの記事ではと
まえがき アルケミスト(Elixir使いのこと)でかつPhoenix使ってる人!! Reactに興味有る方達。 scaffoldingツール「Fushicho(不死鳥)」をご存知だろうか?もちろん知ってますよね? え?知らないの? 知るはずもない、僕が勝手に作ったので。 Fushichoとは 名前の由来はPhoenixをローマ字の日本語にしただけ。 Reactのコードを生成 Phoenix用 Don't repeat yourself (DRY) ReactのCRUDのコードを書くのは面倒くさいです。 Phoenix用のReactのJavaSciptのコードを勝手に生成します。 Reactに対応したコードをAPIを見てから勝手に生成。 「API見てからReact構築余裕でした。」 brunchに対応しています。 ※他のはあまりしらないので対応されていません。 PostgreSQLインストー
Facebookが提供しているJavaScriptライブラリ・React.jsは「Yahoo!」「Airbnb」「Reddit」「Netflix」などで採用されています。 日本でも注目され始めているので、React.jsを使ってみたい方は多いのではないでしょうか。 これからReact.jsを学ぶ方の参考になるReact.jsの入門資料(サイト・記事・スライド)を12個ご紹介します。 他のJavaScriptフレームワークからReact.jsに乗り換えようか迷っている方の参考になる資料も紹介しています。 React.jsの学習の参考になるサイト・記事 今話題のReact.jsはどのようなWebアプリケーションに適しているか? Introduction To React─ Frontrend Conference / HTML5 Expert.jp https://html5experts.j
ReduxのGithubドキュメントを基に入門用記事として書いたものを、簡潔にまとめました。 もと記事はこちらです。 Redux入門 1日目 Reduxとは Redux入門 2日目 Reduxの基本・Actions Redux入門 3日目 Reduxの基本・Reducers Redux入門 4日目 Reduxの基本・Stores Redux入門 5日目 Reduxの基本・Data Flow Redux入門 6日目 ReduxとReactの連携 Reduxとは Reduxは、ReactJSが扱うUIのstate(状態)を管理をするためのフレームワークです。Reactではstateの管理するデータフローにFluxを提案していますが、ReduxはFluxの概念を拡張してより扱いやすく設計されています。 Reduxはstateを管理するためのライブラリーなので、React以外にもAngularJS
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く