React初学者が必ず押さえておきたい考え方とは？【コンポーネント指向のフロントエンド】 | in-Pocket インポケット
こんにちは、i3DESIGNエンジニアの田口です。 今回は「React初学者が必ず押さえておきたい考え方とは？」というテーマでお話します。 こちらの記事は、下記のような方を対象としています。 プログラミングを学習中でフロントエンドの技術に興味のある方 Reactを触ったことはないが、興味がある方 私自身が、HTML, CSS, Pug, Sass, JavaScriptでの開発から、Reactでの開発に移行してからの約半年で感じた体験をもとにお話し致します。 まず本題に入る前に、簡単にReactの説明をします。 Reactとは？ Reactとは、Facebook社とコミュニティによって開発されているユーザーインターフェース（UI）構築の為のJavaScriptライブラリです。 実は、Reactはフレームワークではなく、ライブラリです。（Vue.jsやAngular.jsはフレームワーク、j
bind(this)って何なん？
class WhatIsBind extends React.Component { constructor(props) { super(props); this.state = { text: "No idea" }; } // ➀定義時 handleClick() { this.setState({ text: "Understood!" }); } render() { return ( <div> {/* ➁呼び出し時 */} <button onClick={this.handleClick}>Finished Reading</button> <h1>{this.state.text}</h1> </div> ); } }; ここで，handleClickメソッドはクラスコンポ―ネント内で定義され，renderメソッドのreturn文の中のbuttonタグでclick時に呼び
React HooksのTips（と便利な汎用カスタムフック） - Qiita
はじめに React Hooksを使っていてハマったところをカスタムフックで解決したときの記録です。 TypeScriptで書いてます。 useEffectの中で非同期処理をawaitで実行する useEffectをラップしたカスタムフックを作ればいい。 useEffectで初期データをawaitを使って取得したい場合などに使える。 import { useEffect, DependencyList } from "react"; export default function useEffectAsync( effect: () => any, deps?: DependencyList ) { useEffect(() => { effect(); }, deps); }
なぜReact+TypeScriptでコンポーネント作成が早くなるのか - Qiita
※ 2020/04/17 追記 この記事は非常に古い記事です。この記事を参考にReactを書くとおサムライさんが書いたみたいなコードになります。そろそろ洋装をしていい頃合いです。 ---追記ここまで ReactアプリをTypeScriptで半年以上書いてきましたが、思ってた以上にメリットがあったので共有。 私も始めるまでは生JavaScriptでいいじゃないかと思っていました。 記述コストがほとんど変わらない まずは気になる導入コスト。 普通にReactのコンポーネントを作ると、こんな感じになると思います。 import React from 'react'; class UserName extends React.Component { render() { return ( <div> {this.props.name}さん。こんにちは。 </div> ); } } UserName
React + TypeScriptでcanvas属性を扱う方法 - hiro08gh
こんにちはかみむらです。React + TypeScriptでcanvas属性を扱いたかったが、getContextがTypeScriptの型エラーに引っかかってしまい解決するのに時間がかかってしまいました。なので今回はReact + TypeScriptでcanvas属性を扱うためのテンプレートを残しておきます。 コードの全体像 import React, {useEffect, useRef} from 'react'; function Canvas() { const canvasRef = useRef(null); const getContext = (): CanvasRenderingContext2D => { const canvas: any = canvasRef.current; return canvas.getContext('2d'); }; useEff
Next.jsを勉強してみる その② 〜画面作成編〜 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
まいどです。 右腕が折れても、意外と仕事ってできるもんですね。3ヶ月前に右腕の上腕骨を骨折したバックエンドエンジニアのやなさんです。 さて、前回はNext.jsの開発環境を構築する記事を書きました。 画面作成に必要なものをインストール 今回はTypeScriptで書いてみようと思うので、ターミナルで以下コマンドを実行します。 # typescriptで記述するので必要なライブラリをインストール # Next.jsのプロジェクトルートで実行すること npm install --save-dev typescript @types/react @types/react-dom @types/node コンポーネントで画面のひな形を作成 各画面を作成する前にひな形となるファイルを作成します。 今回の雛形にはheadタグやシステム共通となるヘッダー、フッターを定義しています。 ※ 画面のstyle
React(Next.js)で素のThree.jsをhooks APIと合わせて使う - Qiita
import { WebGLRenderer, Scene, PerspectiveCamera, } from 'three' const Sample: React.FC = () => { const onCanvasLoaded = (canvas: HTMLCanvasElement) => { if (!canvas) { return } const width = window.innerWidth; const height = window.innerHeight; // init scene const scene = new Scene() const camera = new PerspectiveCamera(75, canvas.clientWidth / canvas.clientHeight, 0.1, 1000) const renderer = new
自分流 Next.js + TypeScript + ESLint + Prettier + VSCode (+Dockerfile) 初期設定 - Qiita
自分流 Next.js + TypeScript + ESLint + Prettier + VSCode (+Dockerfile) 初期設定TypeScriptDockerESLintNext.jsprettier 最近Next.jsを書くようになって、自分なりのコーディングスタイルが固まってきたので今後パパっとセットアップができるようにメモっておきます。 この記事では以下のことができるようになります。 Next.jsをTypeScript / TSX で書く ESLintとPrettierとVSCodeを組み合わせ、保存時自動フォーマット importを相対パスではなく絶対パスで書く ServerをExpressで動かす 開発時は.envで、本番は環境変数によるアプリケーション設定値を扱う 【発展編】Kubernetesを見据えてDockerで動かす Next.jsをTypeScri
state とライフサイクル – React
この記事は古くなっており、今後更新されません。新しい React 日本語ドキュメントである ja.react.dev をご利用ください。 以下の新しいドキュメントで最新の React の使い方がライブサンプル付きで学べます。 state：コンポーネントのメモリ エフェクトを使って同期を行う このページでは React コンポーネントにおける state とライフサイクルについての導入を行います。詳細なコンポーネントの API リファレンスはこちらにあります。 以前の章のひとつにあった秒刻みの時計の例を考えてみましょう。要素のレンダーの章にて、UI を更新するための方法をひとつだけ学びました。それはレンダーされた出力を更新するために root.render() を呼び出す、というものでした。 const root = ReactDOM.createRoot(document.getEleme
React(v16.4) コンポーネントライフサイクルメソッドまとめ - Qiita
はじめに Qiita初投稿です。去年からReact、React Nativeでアプリ制作をしてきた中で学んだことを書き留めていきます。React、いろいろな使い方ができて奥が深いところがとても面白いですね。私自身Reactを勉強中で、この記事はReactを勉強中の人に向けて書いています。内容はTypeScript + React前提であることを理解した上でお読みください。 0. Reactのコンポーネント すでに知ってるよ！って方は読み飛ばして大丈夫です。ReactではUIを構成する要素のことをコンポーネント(Component)と呼びます。具体的にはボタンやヘッダー、コンテナなどのことです。Reactで開発する利点としてはそれらのUIパーツをそれぞれ細かくコンポーネントに分けておくことで、再描画が必要なものだけに更新を走らせてパフォーマンスをチューニングできる点が挙げられます。 1. コ
React NativeでGLSL書けるか試してみた | ランサーズ（Lancers）エンジニアブログ
この記事はランサーズ Advent Calendar 2017の21日目の記事です。 はじめまして、フロントエンドエンジニアの加藤です。8月からランサーズのユーザーファーストデザイン室というチームでデザイナーの人たちと一緒に働いています。 突然ですが、みなさんはglslsandboxを見て、知らない外人のお兄さんの作品を見て毎日感動してますよね？そして、うちの仕事では使う機会ないなぁと涙を流していますよね？ しかし、仕事は自分で勝ち取るものなのだと誰かが言っていました。どうやって今の仕事の環境の上で書けるかを試してみるといいかもしれません。以前、gl-reactを使ってReactで書いたアプリケーションの上でGLSLを書ける方法を試したことがありますが、現在であれば一番新規フロントエンド開発で選定されそうなReact Nativeで書ければ、もしかしたら仕事で書けるかもしれません！ GLS
Facebook公式のcreate-react-appコマンドを使ってReact.jsアプリを爆速で作成する - Qiita
新規に作るReact.jsプロジェクトの、新しい始め方について書きます。スターターキットの代わりにどうぞ。 React.jsのひな形を簡単に作れるcreate-react-appが公開されました (2016/07/22) Launching create-react-app, a no config getting started experience, #nomorejsfatigue https://t.co/fqVWgn7w5t — React (@reactjs) July 22, 2016 Facebook(React.js開発元)がきょう、React.jsアプリを素早く作成するコマンドラインツール、create-react-appを公開しました。 公式ブログ記事: "Create Apps with No Configuration" GitHub: facebookincub
React コンポーネントのライフサイクルイベント その１ - React 入門
React コンポーネントには、ライフサイクルイベントが決められています。 コンポーネントが画面にレンダリングされることをマウントといいますが、 コンポーネントが作成され、マウントされる前、マウント時、マウントされた後、それぞれにメソッドがコールバックされます。 constructor コンポーネント作成時 componentWillMount マウントされる前 render マウント時 componentDidMount マウントされた後 この他、プロパティや状態 (ステート) などの更新時などにもそれに応じたイベントがあります。 しかし、今回はそれは省略します。 メソッドがコールバックされたときに、コンソールにログを出力するコードを下に示します。 import React from 'react'; export default class Person extends React.C
React コンポーネントの状態とイベント処理 - React 入門
ここでは、ボタンをクリックしたときのイベント処理について説明します。 具体例として、次のような例を考えます。 次のような青いボタンを用意します。 ボタンには数字が書いてあり、ボタンを１回クリックする度に、数字が増えていきます。 ポイントは３点あります。 ボタンがクリックされた回数を保持しているという点、 クリックイベントに応答している点、そして、表示を書き換えているという点の３点です。 React ではこうした処理をどのように行えばよいでしょうか。 先にコードを示します。このボタンのコード CountButton.js です。これをみながら説明していきます。 import React from 'react'; export default class CountButton extends React.Component { constructor(props){ super(props
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
React Vulnerabilities Checklist - SecureCoding
Konva Class: Image
How to draw images on canvas with React?
GitHub - konvajs/react-konva: React + Canvas = Love. JavaScript library for drawing complex canvas graphics using React.
GitHub - facebook/create-react-app: Set up a modern web app by running one command.
React.jsでループするには。 - Qiita
