タグ検索の該当結果が少ないため、タイトル検索結果を表示しています。
りあクト！ 技術同人誌のりあクト！、【Ⅲ. React応用編】の読書記録と感想です。 りあクト！ 【Ⅲ. React応用編】 第10章 React におけるルーティング 第11章 Redux でグローバルな状態を扱う 第12章 React は非同期処理とどう戦ってきたか 第13章 Suspense でデータ取得の宣言的 UI を実現する まとめ：IIIでさらにディープにReactの神髄に触れられる本 関係書籍など oukayuka.booth.pm 【Ⅲ. React応用編】 大変革であるReact Hooks登場を受けて第3部では副作用処理をテーマとし、公式でもこれからリリースでまだ実験的な機能のSuspenseを扱った応用編の話となっています。 りあクト！【Ⅲ. React応用編】 第10章 React におけるルーティング 10-1. SPA におけるルーティングとは サーバーサイド
環境構築不要で Reactのコードを書いて学べる プログラミング学習サービスJavaScriptの基礎を学習済みで次にReactを学んでみたい方や、既にReactを使っている方で周辺知識を含めたより深い知識を身につけたい方におすすめです！ その場でコードの結果がプレビューで確認できるのでサクサク学習が進みます！ 初心者から現役エンジニアまで 力がつく充実のカリキュラム基礎から実践まで、モダン技術や周辺ライブラリを網羅した教材で幅広い知識を身につけよう。
何の話かと言うと enakai00.hatenablog.com 上記の記事を自分用のメモ程度の気分で公開したら、思いの外に多数のブックマークやコメントが付いて驚いた上に、「この内容では結局 React やっている人にしか理解できないのでは？」という趣旨のコメントを目にして残念な気持ちになったので、あらためて、React をまったく知らない方を前提とした React の入門記事を書いてみることにしました。特別に「バックエンドエンジニアのため」という要素はないかもしれませんが、私自身がバックエンドの経験の方が長いので、そこはかとなく、バックエンドエンジニアに伝わる雰囲気が醸し出せればよいかなと・・・と思いつつ書き進めていきます。 今回は、まずは、Mac OS を前提として開発環境を用意します。（今後、バックエンドとの連携まで含めた実装をする際は、Google Cloud を使うつもりなので、
対象読者とこの記事から何が得られるのか そろそろReactの勉強をはじめてみたい、勉強したいと思っているけど、以下のようなことを考えて前に進めない方向けの記事です。 JavaScriptの知識レベルはこれくらいで足るのか？ 他に知っておくことはないのかな？ この記事を読むことでReact入門の前に知っておきたいNode.jsとJavaScriptの知識を得ることができると思います。 Node.jsをざっと知る Node.jsを簡単に言うと JavaScriptをブラウザではなくPythonやRubyなどと同じようにターミナル上で動かすことができるようにするための実行環境のことであり、バックエンド言語としてJavaScriptを使うことができ、ファイル操作などのOSの機能にアクセスできます。 公式ページだと以下のように記載されています。 Node.js はスケーラブルなネットワークアプリケー
これからReactを勉強する全ての人におくるReact入門コース決定版！ Reactの勉強に苦戦する多くの人と話してきました。 そこで感じたのは苦戦する多くの人は学習の順序を間違えているということです。 JavaScriptへの理解なくしてReactの習得はなし得ません。 そこでJavaScript→Reactの理解の架け橋となる本コースを作成しました。 ■2023年11月 フルリニューアルしました！ ありがたいことにコース公開から3年で24000人もの方に受講いただきました。 3年でReactのバージョン等大きく変わりましたし、皆さんからのレビュー内容を反映したい気持ちもあり、全て再収録・再編集し直しました！ ↓リニューアル内容例 React v18への対応 昨今の状況を加味した解説等の追加 一部新規レクチャー 誤っていた箇所の修正 レビューいただいた内容の反映（音質改善や完成版コードの
React とは CDN インストールとアプリケーション作成と実行 ReactDOM.render() コンポーネントを定義する プロパティを渡す JSX の書き方 リストを表示する ステータスを変更する ルーティングでページを切り替える ユーザ管理画面サンプル リンク React とは SPA(Single-Page Application) を実現する JavaScript フレームワークの一つです。 Angular, Vue.js とよく比較されます。 Facebook 社によって開発され、Facebook の Web サイトでも利用されています。 2020年4月現在の最新バージョンは 16.13.1 です。 MITライセンスで公開されており、商用利用可能です。 JavaScript の中に直接 HTML/XML を記述する JSX という技術を利用しています。 JavaScript
この入門は、 Reactの技術要素を圧倒的効率で学ぶ ことを目的にしています。 Reactの技術要素を散りばめたWebアプリを1から作っていくことでReactを学んでいきます。 すべての動くコードを公開しています。 目次 1. Reactの新規プロジェクトの立ち上げ ←今ここ 2. コンポーネントの書き方とイベントハンドラ 3.Class Components と Function Components 4. 条件分岐 (if) と繰り返し (loop) 5. フォームと親子間のデータのやり取り 6. コンポーネントのライフサイクル 7. スタイル (準備中) 8. Higher-Order Component (準備中) 9. Portalを利用したモーダル (準備中) 10. refによるエレメントの取得 (準備中) 11. Contextを利用したテーマの変更 (準備中) この入門の
フロントエンドの開発は変化が速い分、キャッチアップも大変です。しかしながら、JavaScript/TypeScriptを使ったコンポーネント志向のUIライブラリで開発をするというトレンドは大きく変わりません。本連載では、フロントエンド開発に興味があるバックエンドエンジニアの方向けに、フロントエンド開発の考え方を解説します。フロントエンド開発を少しでも学ぶことで、フロントエンドエンジニアやデザイナーの方とのコミュニケーションが円滑になれば幸いです。 はじめに BASE株式会社でシニアエンジニアを務めているプログラミングをするパンダ（@Panda_Program）と申します。本連載はバックエンドの開発者向けに特化したフロントエンド入門です。 対象読者 本連載の対象読者はオブジェクト指向プログラミングの基礎を理解しており、フロントエンド開発に興味があるバックエンドエンジニアの方です。バックエンド
このチュートリアルでは、Reactアプリケーションの構築にTypeScriptを使用する方法を、Create-React-App （CRA）を利用して簡単に始められる手順とともに解説します。 また、TypeScriptを使用した独自のReact関数コンポーネントでのPropsの定義方法も紹介します。 前提として、あなたがNode.jsを既にインストールしていることを仮定しています。 また、このチュートリアルはTypeScriptの基本的な知識があることも前提としています。 ReactとTypeScriptの組み合わせについて学ぶことで、より堅牢なアプリケーションを開発するためのツールとしての利用価値を高めることができます。 この記事を参考にして、ReactとTypeScriptの基本をマスターしましょう。 TypeScriptとReactの利点 CRAのインストール TypeScriptで
タイトルは記事の内容を読み込ませ、chatGPTに作成してもらいました。 強いタイトルですが、Reactの初学者向けにAtomic Designとは何なのか、それに則ってコンポーネントを分割するにはどのようにするのかを解説しています。 後半では実際にAtomic DesignでTodoアプリを作成していますので試してみてください。 （有識者はアドバイスなどがありましたらどうぞよろしくお願いします） Atomic Designを理解する React開発者にとってのAtomic Design Atomic Designとは Atomic Designの5つのレベル Atomic Designのメリットとデメリット React/TypeScriptで作るTodoアプリ React開発者にとってのAtomic Design Reactの開発者がAtomic Designを使う理由は、コンポーネント
りあクト！ でReact再入門 しばらく前のエントリで書きましたがReact＋TypeScript回りを学んだので、一緒に読んだ本の感想エントリです。技術同人誌界隈では非常に高評価、なんと累計1.5万部も売れた3部構成のReact入門書。作者はフリーランスのエンジニアの大岡由佳さん。 React推しの技術同人誌なので前書きからすでにアツく、最近はVue.jsが採用されたり書籍が多いのにもどかしさを感じたり、実際のプロジェクトで見てきたひどいコードをもっと良くしたいと思った…などなど、現場のエンジニアの技や思いがたっぷり詰まっています。ReactってJavaScriptぢからの高い優秀な人が使ってそうな勝手なイメージがあったのですが、そうではない場合もあるのですかねえ。 技術が出てくる経緯、歴史と思想にも踏み込み、仕事で使えるReact本を目指したとのことで、実際にそれを実現した本となってい
フロントエンド開発に携わるエンジニアにとって、Reactは使い方を習得しておくべきライブラリの一つです。この記事では、Reactの特徴や開発環境の構築、実装方法などについて解説します。 公開日： 2022年7月29日 Reactとは ReactはMeta社（旧Facebook社）が作成したJavaScriptライブラリです。2013年にオープンソース化された後は、コミュニティの開発者と共に開発が進められています。 Reactはフレームワークではなく、UI（ユーザーインターフェース）の作成に特化したライブラリです。フロントエンドエンジニアがUIを構築する際に、Reactが活用されます。 特徴 Reactは「宣言型」のため、「手続き型」や「命令型」と呼ばれるプログラミング言語よりも効率的にコーディングできる点が特徴です。Reactでデータを更新すると、HTMLの内容も自動で更新されます。jQu
現在業務で使用している React について、より理解を深めていくために勉強したことを記事として書くことにしました。 ということで、まずは基礎編です。 ※2021/09/13追記 全体的に内容を見直しました。 記事を書くにあたって 2019年秋頃から Qiita の記事を書いてきましたが、環境構築系ばかりで、いまだ技術の中身についての記事を書いたことがなかったので、そろそろ書いてみたいなーと思っていました。（ブログで多少技術記事は書いていました） 技術記事となると、すでに同じテーマで記事を書かれている方がいてクオリティも高くてと、自分なんかが書いてもなと尻込みをしていたのですが、自分の理解を深めるという目的で思い切って書くことにしました。 記事を書く上で自然とまとめるようになるので、頭の中が整理できるので。 もし自分がその技術から離れてしまって、また戻ってきたときに記事を見返して助けになれ
はじめに この記事は「RUNTEQ Advent Calendar 2023」に参加しており、16日目を担当しています。 私(ともと申します。)は「RUNTEQ」というプログラミングスクールに所属しており、もうすぐ3ヶ月の初学者です。 本記事は、エンジニア実務未経験者が、同じ未経験者に向けてできるだけわかりやすく説明することを心がけており、正確ではない情報もあるかと思います。万が一そのような場合はコメント等で教えていただけるととてもありがたいです。 背景 プログラミングスクールでは主にRuby on Railsといったバックエンドについて学習していますが、フロントエンドのReactに興味を持っていたため、独学で学習しています。 Reactを使ったアプリを作成している中で「APIを叩く」ということが必要になり、学習したことについてまとめてみました。 この記事を読むとわかること useEffe
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?
更新ログ この記事は数年前に書いたものですが有り難いことに新年度が近づくと読んでくださる方がいらっしゃるようで、古い内容では不都合が生じることもあるかと思い不定期にはなりますが最新情報に更新したいと思います。 読んでくださった皆様にこの場を借りてお礼申し上げます。 2025/1 : 現時点最新のReactに対応、全体の文章校正・最新化 はじめに 本記事はReactにこれから一歩を踏み出したいけどチュートリアルの難しい言葉理解してる時間はあまりない、という方に向けて、環境の構築からなんとなく画面が動くまでを解説します。 今回はReact + TypeScriptをベースに説明します。 これを読んでもっと知りたいと思った方は是非公式チュートリアルをお試しください。 https://ja.react.dev/learn 目次 はじめに 環境構築 Reactの導入 Reactの書き方 コンポーネン
何の話かと言うと enakai00.hatenablog.com 上記の記事の続きです。前回までに、盤面にコマを置けるようになったので、今回は「手番」の概念を導入して、交互に打ち合えるようにします。また、リバーシのルールに基づいて、コマをめくる機能も実装します。 「手番」の導入 「いまどちらの手番か」という情報を状態変数として用意するわけですが、Layer コンポーネントと Board コンポーネントのどちらで定義するべきでしょうか。これは、この情報をどのコンポーネント内に隠蔽するかに依存します。Board コンポーネント内だけで参照するのであれば、Board コンポーネントで定義すれば十分です。しかしながら、今の場合、Layer コンポーネントは、手番を変更する「Pass ボタン」を持っており、さらに、手番の情報を表示する位置は、Layer コンポーネントで管理する必要があります。そこで
「React触ってみたいけど、何が分からないかが分からない...」 そんなあなたに、日本一わかりやすいReact入門がさらに詳しく・分かりやすくなって帰ってきました。 Reactの前に、JavaScriptが不安な方はまずこちら https://youtube.com/playlist?list=PLX8Rsrpnn3IVvcPCZTixO7Pf5lAGoyNOA 📖 目次 0:00 はじめに 0:52 講座の概要 3:14 Reactがフロントエンドの主流に 4:03 基礎編の構成 5:25 シリーズ構成 7:01 Reactとは 9:48 従来のWebサイトの画面描画 12:32 仮想DOMという解決策 14:18 差分描画 🎉 おすすめ再生リスト ★新・日本一わかりやすいReact入門【基礎編】 https://youtube.com/playlist?list=PLX8R
フロントエンドに挑むための第一歩 本セッションの対象は、APIサーバーの構築に従事するバックエンドエンジニアだ。Developers Summit 2025のテーマ「ひろがるエンジニアリング」に呼応するかたちで、バックエンドからフロントエンドへと活躍の幅を広げる足がかりを提供する内容となっている。 本題に入る前にプログラミングをするパンダ氏（以下、パンダ氏）が提示したのは「バックエンドの開発者が学習資産を活かせば、フロントエンドへの入門は容易になる」とのテーゼだ。 BASE株式会社 Product Dev／Feature Dev1／シニアエンジニア プログラミングをするパンダ氏 ここでの「学習資産」とは、学習コストを単なる「費用」と捉えるのではなく、再利用可能な「資産」として扱う考え方で、Angular界隈で知られるlacolaco（ラコラコ）氏のブログに端を発するものだ。たとえば、HTM
React と並ぶモダンフロントエンドフレームワークの Vue.js のコースでも登壇いただいています。 3 時間で入門する Vue.js 研修コースに参加してみた React とは まずは React の説明ですが、これはいろいろなところで紹介されているので簡単に。 3 大フロントエンドフレームワークの一つ Angular / Vue コンポーネントベース (部品) で UI を構築 Hello, React まずは JSX で書くのではなく、わかりやすく HTML で Hello World ならぬ Hello React を書いてみます。 HTML を書く <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Hello React</title> </head> <body> </body> </html> sc
この記事の筆者：三好アキ 🔹 専門用語なしでプログラミングを教えるメソッドに定評があり、1200人以上のビギナーを、最新のフロントエンド開発入門に成功させる。Amazonベストセラー1位を複数回獲得している『はじめてつくるReactアプリ with TypeScript』、『動かして学ぶ！Next.js/React開発入門（翔泳社／2024年）』著者。 Amazon著者ページはこちら → amazon.co.jp/stores/author/B099Z51QF2 🔹 UdemyでReact・JavaScript・Node.jsの入門動画を無料で公開中 → 無料の入門動画 create-react-appとVite + React 私はReactビギナー向けの入門書を本をいくつか書いています。 これらの本では、React開発ツールとして「create-react-app」を使っていました
はじめに こんにちは、Engawaです。 ここ最近業務でReactについて触れる機会があり、Reactの学習を行ったので、 環境構築からreact-router-domを使用した簡単なSPAの作成方法についてザックリ紹介していこうと思います。 はじめに Reactとは 環境構築 起動 SPAの作成 react-router-domのインストール サンプルコード 実行 おわりに 参考資料 Reactとは React はFaceBook社が開発した、UIを作るためのJavaScript用ライブラリです。 アプリに特化したReactNativeもあります。 そちらについてはこちらで紹介していますのでご覧いただけれと思います。 環境構築 私が学習をした際の環境は以下になります。 node： v10.19.0 OS ： macOS Catalina 使用したエディタ：VSCode こちらで記載する環
ここでは実際に React を動かしながら、React の基礎について学びましょう。 尚、実験する環境は「React 版の Hello, world!」で作成したテスト用の React アプリケーションです。 React の基本要素 〜 React 要素と ReactDOM 最小の React ページの構成 React の基本要素 〜 React 要素 React 要素の画面への出力 〜 ReactDOM 複数の React 要素を子に持つ React 要素の作成 複数の子要素を持つ React 要素の作成 子要素の配列を渡して React 要素を作成する map 関数を使って React 要素の配列を作成 React の JSX とは？ React 要素を簡単に記述する JSX JSX による React 要素の作成 JSX を利用するために Babel を取り込む React の JS
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く