preact を読みやすいように色々削りました
preactの仕組みを理解する軽量版教育用preactを作ってる話
preact を読みやすいように色々削りました
Getting started with React - Learn web development | MDN
Set up a local React development environment, create a start app, and understand the basics of how it works. As its official tagline states, React is a library for building user interfaces. React is not a framework – it's not even exclusive to the web. It's used with other libraries to render to certain environments. For instance, React Native can be used to build mobile applications. To build for
React, Redux, GraphQLを学べるオンライン教材「Full Stack Open 2019」がとても良かった - FRTKL
この記事はコネヒト Advent Calendar 2019の11日目の記事です！ qiita.com はじめに 半年ほど前から新規事業のチームで仕事するようになり、主な技術スタックもPHPからGo, Next.jsへと変わりました。 その中で、特にフロントエンドのテスト周りにおいてキャッチアップ不足を感じていたのですが、たまたま見つけた*1「Full Stack Open 2019」という教材がとても良かったので紹介したいと思います。 「Full Stack Open 2019」とは fullstackopen.com フィンランドのヘルシンキ大学で実際に使われているテキストベースのオンライン教材です。 Nodeで作られたREST APIとReactを使ったSPAの実装を通して、React・Redux・Node.js・MongoDB・GraphQLが一度に学べる教材となっています。 教材
2020年のフロントエンドマスターになりたければこの9プロジェクトを作れ - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 以下はSimon Holdorf( dev.to/ Twitter / GitHub )による記事、9 Projects you can do to become a Frontend Master in 2020の日本語訳です。 9 Projects you can do to become a Frontend Master in 2020 Introduction あなたがプログラミングの初心者であるか、既に経験豊富な開発者であるかにかかわらず、この業界では、急速な変化に追いつくために新しい概念と言語・フレームワークを学び続けるこ
2019年版: 脱Babel!フロント/JS開発をTypeScriptに移行するための環境整備マニュアル - Qiita
TL;DR いろいろ書いていますが、一番書きたかったのは最初のライブラリと最後のReact Componentのプロジェクトの作り方ですね。ぱっとnpm installして、最初から型定義ファイルが入っていて、@typesを持っているライブラリを探したり、自分で.d.tsを書いたりしなくてもいい世界がやってきて欲しいな、という気持ちから書いています。 ここで紹介したTypeScript環境構築はすべて、自分用にYeomanのテンプレートとして作成したので、以下のジェネレータをインストールして選択したらそれでおしまいです。 @shibukawa/typescript (npmには公開していないので、checkoutしてビルドしてインストールしてください) 2020/7/26: React周りを現在の最新の情報に更新 2019/1/22: TSLint→ESLintに修正 2019/8/1:
React勉強会のノウハウを紹介します | Recruit Tech Blog
こんにちは！ Air メイトのフロントエンドエンジニアの @sadness_ojisanです。今月から「React 人材をどう育むか」という連載を行います、この記事はその第一弾です。 みなさーん！React 人材の採用はうまくいっていますか？？？私たちはまだまだ足りていません！ そこで最近では、React 人材を登用するために、採用だけでなく育成も試みています。 この連載では実際に行なった育成プランとその効果を紹介できればと思います。 私は社内で 2-30 人規模の React 勉強会の講師をしたり、社外でもプログラミング講座の先生などをやっています。 また、大学院では教育学を専攻していたこともあり、育成はかなり関心がある分野です。 この記事では、React 勉強会を開催しているなか、「この教え方や工夫が効いたよ」といった指導方略や、「受講生はここでつまづいたよ」という経験を紹介します。
TypeScript入門以前ガイド - mizchi's blog
某社で自分が React/Redux + TypeScript などの講習をやってみた結果、TypeScript 入門用資料が必要だと思って書いたやつです。 このドキュメントのターゲット TypeScript で書かれたプロジェクトに参加する人 TypeScript を導入するために、その事前知識が必要な人 このドキュメントの読み方 ES2015 for Beginners ES2015 for ES5 Programmers ES Modules 非同期表現: Promise と async/await TypeScript エコシステム編 自分が React/Redux などの講習でいろいろやってみた結果、 ES2015 と TypeScript を同時に教えると、初学者は何がどの概念に由来するかの区別が出来ずに混乱します。なので、ES5 -> ES2015, ES2015 -> Ty
React開発環境構築2018 - Qiita
この記事について この記事では実際にReactの開発環境をセットアップする方法を説明します。ReactなどのSPAでネックになる速度を改善するための手法としてサーバーサイドレンダリングも行います。 出来る限り短く説明するReact.js入門 | Reactとは？を解説してくれている良記事 フロントエンド開発についてまだよく知らないという人は下の記事を読んでおきましょう。 今時のフロントエンド開発2017 (1. 愚痴編) 2018年の最先端フロントエンドエンジニアになろう フロントエンドとはいえ、今回は静的サイトではなく動的サイト（サーバーサイドレンダリングを行うため）を作成するのでサーバー側の話がメインとなります。 ユーザー体験を向上させるサーバーサイドレンダリングJavaScript — 歴史と利点 実際のところ「ブラウザを立ち上げてページが表示されるまで」には何が起きるのかではブラウ
Reactコンポーネントをnpmパッケージとして開発する - Hatena Developer Blog
こんにちは！ブログチームの id:amagitakayosi です。 今回は、業務で書いた小さなReactコンポーネントをnpmパッケージとして分離した話をします。 今回公開するパッケージ 実装方針 なぜnpmパッケージにするのか 他のコンポーネントの影響で壊れることを防げる アドホックな修正の積み重ねで複雑になることを防げる 本体プロジェクトのコードを削減できる デメリット Babelなパッケージのディレクトリ構成 実装 npmの注意点 reactはpeerDependenciesに入れる npm link を用いてローカル開発する場合、npmはpeerDependenciesを解決できない browserify-shimを利用する場合 npm publish 次回予告 追記 今回公開するパッケージ www.npmjs.com 今回は「無限スクロール」のためのReactコンポーネントを作
初心者に向けたサンプル付きReact入門と勉強法について | ランサーズ（Lancers）エンジニアブログ
@takepo です。 先日、【サポーターズ勉強会】React入門 というイベントで再度登壇させていただきました。 その登壇の際のスライドをあげさせていただきます。 内容はReact初心者向けのものになっていて、コードサンプル付きで説明させていただきました。 React とは React Component JSX props と state Componentライフサイクル よくReactと一緒に聞くRedux, yarn, webpackなどの概要説明 JavaScript初心者の私が、React×ReduxによるSPA開発の一員になるまでの勉強法 実はこのReact入門という形で登壇させていただくのは２回目になりますが、 前回の資料からパワーアップしている部分もあるため。あらためて資料をあげさせていただきました。 ちなみに前回登壇した際の記事はこちら！ スライド中にのせたこちらもぜひ
【JavaScript】３大フレームワーク Angular, React, Vue.jsを比べてみよう (2018年4月) - Rのつく財団入り口
JavaScriptフレームワークを比較してみよう (2018年4月) トレンドの移り変わりが激しいWebフロントエンド。2017-2018年現在、JSフレームワークで最も有力な3強がAngular/React/Vue.jsの３つと言われています。他に日本で比較的聞くのはRiot.js、Ember.js、Hyperappなどがありますね。 ちょいとFW選定の技術調査でいろいろ調べたりしたので、このエントリでは初学者なりに比較を整理してまとめてみたいと思います。 なお最後にも書いてありますが、実際に使ったりして得られた知見もあれば、入門レベルだと確かめようがないので本やネットの情報や意見の中で多いものの受け売り的になっているところもあります。フレームワークって結局どれがいいのという話は混乱したり場合によっては荒れがちですが、最終的には情報は各自の判断でご利用ください。フレームワークは開発をよ
Vueを昔触った後Reactをどっぷり触ってもう一回Vueを触ってReactに戻って得た感想
最近ReactとVueをどっちも触る機会があったり、「ReactとVueどう選定するの？」という問いを投げられ、スッと答えられなかったな、と後悔があったりしていたので、Vueを触って得られた感想をまとめてみる。 結論としてなにか新しいことを発見したというものではなく、世間で言われている事を自分なりに再構築しただけの結論になったと思う。 TL; DRVueからは全体的に優しさ（Gentleさ）を感じる事が多く、良い点だと感じた大規模になるときReactの堅牢さは魅力的。Vueが大きくなった時に支えられ設計が出来るかは個人的には懐疑的。「こうだったらVue、こうだったらReact」みたいな分岐点があるというわけではないので、最終的には好みになってくると思う。ぞうさんが好きかきりんさんが好きか。これまでのフレームワーク遍歴今回の話をするにあたって、僕と各フレームワークの付き合いをまとめておくと、
jQueryを卒業したかった僕がReact StaticでReactをイチから学んでWebサイトを作った話 | 株式会社ヌーラボ(Nulab inc.)
Typetalk チームフロントエンドエンジニアの岡藤（@johnykei）です。先日 Typetalk Webサイトリニューアルに伴い、フロントエンドの技術を jQuery から React + styled-components に刷新しました。本記事では、React を用いた Web サイト制作についてお伝えします。 はじめに タイトルにもあるように、僕は今まで JavaScript を書く必要がある時は使い慣れた jQuery を使っていました。 フロントエンドエンジニアという肩書きではありますが、フロントエンドエンジニアという職種は幅広く、僕はどちらかというとページやUIのスタイリングが主な業務で、普段 JavaScript を書く頻度もそんなに高くありませんでした。 最近海外ではそのような業種の人をフロントエンドデザイナーと呼ぶ動きも出てきていますが、jQuery しか使ってい
非SPAなサービスにReactを導入する - クックパッド開発者ブログ
投稿開発部の外村（@hokaccha）です。今回はReactについてのお話です。 ReactとSPA 最近JavaScriptやそれを取り巻くフレームワークなどの話題では、サーバ側はAPIのみを提供し、View(HTML)は全てJavaScriptで描画するような、いわゆるシングルページアプリケーション（以下SPA）についてよく語られます。 一方で、SPAを構築するにはコストがかかることも事実で、特にフロントエンドエンジニアが多くない環境では、従来通りサーバーサイドでViewを書きつつ動的な部分だけJavaScriptで処理するというアーキテクチャのほうが現実的な場合も往々にしてあります。 今回はこのような、サーバー側でHTMLを生成し、一部の動的な部分だけをReactで書くためのTipsを紹介します。 なお、基本的にサーバーサイドはRails前提ですが、RailsにおけるReactの開発
Railsチュートリアル幻の15章 React編 - Qiita
社内で利用した、Reactの研修資料を公開します。 Railsチュートリアルの続編として作成したので、Rails上でReactを使うためには...ということが書かれています。Railsチュートリアルテイストになっていますが、一部社内でのコーディング規約や利用するライブラリについての言及があります。 また、研修ということで、ソースコードはGitHubの差分をスクショするという形で掲載しています。コピペできるコードが欲しいという人は、差分表示を作るのに使ったリポジトリを利用して下さい。 https://github.com/kouheiszk/sample_apps/tree/master/5_1_2/ch15 第15章 Reactの導入 この章では、サンプルアプリケーションで作ってきたUIパーツをReactというJavaScriptのライブラリを利用してコンポーネント化していきます。具体的に
Introduction · react-hands-on
React Hands On 資料 この資料は、全3回のリアクトハンズオン@もくもくテンプルのために作成した資料です。随時追加していきます。 第1回は2018/2/3日に開催いたしました。(もくもくテンプル React Hands On) 資料はこのテキスト内に全て公開済みです。 第2回はさらに技術的な難易度をあげて、3/3日に開催します。第2回の資料を予習していただいてから参加するようにお願いします。第2回の資料は現在作成追加中です。(このテキストの中に第二回として追加していきます) 学習の進め方 添付した YOUTUBE 動画がメインのコンテンツですので「動画を中心に」学習を進めてください。 合わせて、添付した CodeSandbox のコードも参照してください。CodeSandbox はエディターであり、開発環境であり、コードの実際の動きを確認できるブラウザでもあります。 コンテンツ
FRONTEND CONFERENCE 2017でReactハンズオンを開催しました - マルシテイア
speakerdeck.com 2017-03-18 (土) 梅田で開催された FRONTEND CONFERENCE 2017 で、Reactのハンズオンを開催しました。 kfug.jp 今回のハンズオンでは Reactアプリケーションの開発を身体で覚える React開発環境におけるトレンドを体験する の2つを目標に、Next.jsを利用した簡単なReactアプリを作成しました。 この記事では、ハンズオン開催にあたって考えたことや、工夫した点などについて書いていきます。 ハンズオンの方向性 Next.jsを採用 ハンズオンの流れ 工夫した点 お手本ブランチを用意する コード修正の指示をdiff形式で書く 自己紹介よりも前にセットアップをお願いする 反省した点 gitが手元にない人は git checkout できない お手本ブランチ作るのしんどい…… 皆様の反応 ハンズオン 資料 感想
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Vue.jsとReact.jsを習得するために、どのように学んでいけばよいのか -VueとReactのデベロッパ用ロードマップ
React is just JavaScript – YLD Blog – Medium
実践 Redux Saga -Practical Redux Saga-
