【環境構築】DockerでReactをnpmを使用して作成&起動する方法（JavaScript編） - Qiita
背景 【環境構築】Reactのプロジェクト作成&起動方法について 〜npm・yarn & JavaScript・TypeScript〜で、Reactには複数のプロジェクトの起動＆作成方法があることをご紹介しました。 この記事は、「1.1.npmでJavaScriptを使用してReactプロジェクトを作成する方法」の解説記事になります。 目標 npmでJavaScriptを使用してReactプロジェクトを作成できるようになる。 npmでJavaScriptを使用してReactプロジェクトを作成する方法 docker-react-npm-javascriptをcloneし、起動に必要なdockerfileをローカルに準備します。 Dockerfileの中身は以下のようになっており、nodeをベースイメージとして使用しています。
React + TypeScript: コンポーネント間で状態を共有する - Qiita
React公式サイトのドキュメントが2023年3月16日に改訂されました(「Introducing react.dev」参照)。本稿は、基本解説の「Sharing State Between Components」をかいつまんでまとめた記事です。ただし、コードにはTypeScriptを加えました。反面、初心者向けのJavaScriptの基礎的な説明は省いています。 なお、本シリーズ解説の他の記事については「React + TypeScript: React公式ドキュメントの基本解説『Learn React』を学ぶ」をご参照ください。 ふたつのコンポーネントの状態を、つねに一緒に変化させたい場合があるでしょう。そのためには、状態をそれぞれのコンポーネントにもたせるのでなく、もっとも近い共通の親に移すべきです。そのうえで、親から子には値をプロパティで渡します。これは状態の引き上げ(リフトアップ
Styled-Componentsとpropsを使ったスタイリングの備忘録 - Qiita
const ButtonStyle = styled(Button)<{hogeProps:boolean}>` color: ${props => props.hogeProps ? 'trueの時の処理' : 'falseの時の処理'}; `; この例ではhogePropsという名前のpropsをButtonStyleコンポーネントに渡している。 Styled-Component内で、三項演算子を使ってhogePropsがtrueの場合とfalseの場合で異なるスタイルを適用している。 ついでに位置を動的に設定するModalContentStyleコンポーネントを作成する方法もば。 位置を動的に設定するModalContentStyleコンポーネントの作成
[初心者向け] Next.js で初めての OpenAI API アプリを作ってみた（Tailwind CSS、Docker 利用） | DevelopersIO
[初心者向け] Next.js で初めての OpenAI API アプリを作ってみた（Tailwind CSS、Docker 利用） こんにちは、アノテーション テクニカルサポートの Shimizu です。 昨今の OpenAI ブームに乗り、私も何かを始めてみたくなりました。 そこで、ちょうど勉強中だったフロントエンド開発環境（Next.js + Tailwind CSS + Docker）と OpenAI API を利用して、AI が質問に答えてくれるだけのシンプルな入門アプリを、実作業 30 分ほどで作ってみました。 完成品イメージ ここでは筆者の備忘も兼ねて、一連の手順を記事にしてみました。 以下のような方の参考になれば幸いです。 OpenAI API で最小限の動くアプリを作り、仕組みを理解したい Next.js(React)や Tailwind CSS などフロントエンドの流行
![[初心者向け] Next.js で初めての OpenAI API アプリを作ってみた（Tailwind CSS、Docker 利用） | DevelopersIO](https://cdn-ak-scissors.b.st-hatena.com/image/square/3c0e373391bd52827f22134f0b09da3118d7f40a/height=288;version=1;width=512/https%3A%2F%2Fdevio2023-media.developers.io%2Fwp-content%2Fuploads%2F2023%2F01%2Fopenai_chatgpt.png)
React.js開発当初、「そんなものが使えるはずがない」とFacebook社内で評価されていた。React.jsの開発経緯を振り返る「React.js: The Documentary」YouTube公開
React.js開発当初、「そんなものが使えるはずがない」とFacebook社内で評価されていた。React.jsの開発経緯を振り返る「React.js: The Documentary」YouTube公開 代表的なJavaScriptのフレームワークの1つであるReact.jsがどのように生まれ、発展してきたのかが、React開発当時の関係者やメンテナーなどへのインタビューによって語られる動画「React.js: The Documentary」がYouTubeで公開されています。 動画の作成と公開を行ったのは、ITエンジニア向けの転職紹介などキャリアサービスを提供しているHoneypot社。同社は以前にもKubernetesの歴史を紹介したドキュメンタリー動画「Kubernetes: The Documentary」を公開しています。 参考：KubernetesをGoogleが開発し、
Google ChromeのDevToolsがAngular、Vue、JSX、Dart、LESS、SCSS、SASSなどのシンタックスハイライトに対応
Google ChromeのDevToolsがAngular、Vue、JSX、Dart、LESS、SCSS、SASSなどのシンタックスハイライトに対応 GoogleはすでにリリースしているWebブラウザのChrome 110と現在開発中のChrome 111に搭載されているDevToolsで、Angular、Vue、JSX、Dart、LESS、SCSS、SASSなどのシンタックスハイライトに対応したことが明らかになりました。 2月16日付けで公開されたブログ「What's New in DevTools (Chrome 111)」では、Chrome 111で、Angularのシンタックスハイライトに対応したことが「Better syntax highlight for Angular」の項目で紹介されています。 下記のサンプルでは、例えば2行目のダブルクオーテーション内の値などがAngul
SPA フルリニューアル計画における技術選定や設計思想（2019年2月版） - 30歳からのプログラミング
SPA のフルリニューアルを技術選定や設計からやることになった。 前回の記事も、そのために検討や調査を行っている際に生まれた副産物をまとめたものだ。 目指すべきは変更しやすいシステムであり、そしてそれは、堅牢性を実現することで達成されるはずだという結論に至った。 numb86-tech.hatenablog.com 今回の記事では、堅牢なシステムの実現に向けてどんな技術を選んだのかを記録しておく。 まだ検証フェーズというか、試し書きや検証を行っている段階なので、今後変わる可能性はある。 前提 現行のアプリは Rails アプリで、その上に Vue を載せて SPA を作っている。 フロントエンドのビルドは Webpacker 。別のプロダクトでは Webpacker を剥がしてしまったが、このプロダクトでは実現できていない。 ビュー関連の処理について、どこまでを Rails でやってどこか
ReactとVueってどう違う？全く同じアプリをReactとVueで作成してみて分かった相違点
日常的にVueを使用している開発者が、Reactはどうなのだろうと思い、ReactとVueで全く同じアプリを作成した時のそれぞれの工程を比較して分かった相違点を紹介します。 I created the exact same app in React and Vue. Here are the differences. 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 隣の家の芝生は青く見える VueとReactで作成したアプリの見た目を比較 VueとReactはデータをどのように変更させるか アイテムの新規作成 アイテムの削除 イベントリスナーを渡す 子コンポーネントにデータを渡す 親コンポーネントにデータを戻す 終わりに 隣の家の芝生は青く見える 私は現在の職場でVueを使用しており、Vueがどのように機能するかかなり理解してい
【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」みたいな分岐点があるというわけではないので、最終的には好みになってくると思う。ぞうさんが好きかきりんさんが好きか。これまでのフレームワーク遍歴今回の話をするにあたって、僕と各フレームワークの付き合いをまとめておくと、
結局Reactは他(Vue.js, Angular)と比べて何がよかったのか。触ってみてわかった初めてのフロントエンドフレームワーク。 - Qiita
結局Reactは他(Vue.js, Angular)と比べて何がよかったのか。触ってみてわかった初めてのフロントエンドフレームワーク。JavaScriptes6React フロントエンドフレームワークも通常のプログラミングと同じように、第二,第三の言語の習得にそこまで時間はかからない。 選択に時間を使うくらいなら、何か一つ直感で選んで遊んでみるべきである。 私は、それを知らずにそれなりの時間をフレームワークの特徴探しに費やしてしまったので、過去の自分自身に送るつもりでこの記事を書いてみる。そして、過去の私と同じ境遇の人が少しでも参考にしてくれたらいいと思う。 これらは完全に主観であるため、何か納得できない点があれば、コメント欄に残しておいてほしい。 Why choose React over Angular and Vue.js 上で述べたように、フロントエンドフレームワークの学習という観
ドラッグ&ドロップでReact製のWEBアプリがつくれるReactStudioがやばい - Qiita
ReactStudioを使ったアプリの作り方はこちら React Studioを使ってQiitaの記事一覧アプリを作成してみる はじめに reactというとJSXの書き方、props、stateの挙動等を覚える必要があるため、 学習コストが割りと高めであったり、環境を構築するのに一手間かかったり等、 まだまだとっつきにくさが否めないライブラリです。 しかし、今回は、そんなReactをドラッグ&ドロップでアプリが 作れてしまうツールがあったので紹介したいと思います。 ※尚、Windowsはなく、Macのみで使用できるツールでございますので、予めご了承下さい。 公式サイト 公式サイトへのURLはこちら。 React Studio https://reactstudio.com/ ツールの使い方 ReactStudioでコンポーネントをデザインします。 その後、コードが自動生成されます。 無料で
Hyperapp, React, Vue.jsで同じサンプルアプリを作ってサイズを比較してみた - Qiita
私は脱jQuery(脱DOM操作)したい系の者で、 React, Vue.js, Hyperapp については初心者です。サンプルコードは公開しておりますが、正確さは保証いたしません。この記事は参考程度に読んで頂ければと思います。 作ったもの 以前に React, Vue.js で製作したRaspberry Piの無線LANをmicroSDで簡単に設定するためのツールを Hyperapp でも作ってみました ツールへのリンク: https://mascii.github.io/wpa-supplicant-conf-tool/ このツールはブラウザ上でSSIDとパスフレーズを入力してリストに追加するだけで簡単にRaspberry Piの無線LAN設定ファイル(wpa_supplicant.conf)を作成でき、これをPCでRaspbianの入ったMicroSDに書き込んでおくことでRasp
Reactを使って本気でアンケートシステムをつくった - Qiita
この記事は エムスリー Advent Calendar 2017 の25日目の記事です。 普段はDB・サーバサイド・クライアントサイドまでの設計・実装・運用を扱っていますが、この記事ではReactを使って開発したシステムについてを紹介しようと思います。 作ったもの アンケートシステム(survey-designer-js)を作り、社内で使っていました。またOSSとしてレポジトリに公開もしています。 GitHub DEMO なお公開しているのはクライアントサイドのみで、サーバサイドの実装は公開していません。なお、エムスリー社内で使用しているものはこのレポジトリからフォークしたものとなっています。 下記のような機能を備えています。 ページの作成 ページ内への設問の作成 複数選択肢 単一選択肢(ラジオボタン) 単一選択肢(プルダウン) 数値記入 1行テキスト 複数行テキスト 表形式 都道府県 説
ReactにするかVue.jsにするか、jQueryだけ触っていたエンジニアがサンプル作って比較してみた - Qiita
ReactにするかVue.jsにするか、jQueryだけ触っていたエンジニアがサンプル作って比較してみたJavaScriptVue.jsReact 今のタイミングでWebサービスを、何か新しく開発しよーって思ったら、フロントサイドをどうしようか悩みますよね？ 特にVue.jsかReact.jsか... そんな悩んでいるあなたへの記事になります。 自分の仕事領域について あまり普段javascript触ってません 触るとしてもjQueryが多いです そんな人が書いた記事だと思って下さい 今回作ったもの ReactとVue.jsで簡単なカレンダーを作成しました。 React https://github.com/ykyk1218/react-calendar-sample Vue.js https://github.com/ykyk1218/vue-calendar-sample コンポーネン
Nintendo Switchの中ではReactが動いてる！Nintendo eShop開発秘話を聞いてきた
Nintendo Switchの中ではReactが動いてる！Nintendo eShop開発秘話を聞いてきた 白石 俊平（HTML5 Experts.jp編集長） こんにちは、編集長の白石です。 この記事は、9月24日に開催されたHTML5 Conference 2017に登壇したエキスパートに、お話されたセッションのトピックを中心に語っていただこうとういものです。セッションの内容をより深く理解する手助けになるだけでなく、本記事単体でも面白く読んでいただけることを目指しています。 今回は、「Nintendo SwitchとWeb」という講演をされていた任天堂さんに、Switch開発におけるWeb技術の活用方法や、開発秘話を伺ってきました。任天堂のお二人は京都から、リモートでの取材に応じていただきました。 Nintendo SwitchではWeb技術が大活躍！ 白石 簡単に自己紹介をお願いで
【速報：2017/09/23】Reactのライセンスから特許条項が外れて真のオープンソース・ライセンスになる - Qiita
背景 Facebookが開発し、JavaScriptライブラリーとして人気を誇るReactですが、これまでBSD + Patentsライセンスのもとでリリースされていました。 これはFacebookが特許関連の問題で訴えられた場合にReactを利用できなくするための防御的な意味を持っていたのですが、Reactを利用していた製品やオープンソース・プロジェクトから「Reactを排除するべきだ」ということで、最近騒ぎになっていました。 （詳細はこちらの記事『React死亡?React終了?～Facebookの特許事項付きライセンスの問題～』Qiitaを参照） Reactライセンスの変更 上記の騒動を受けてReactの開発チームは、もうすぐリリースされる次期バージョン（React v16）から、関連するいくつかのソフトウェアを含めてライセンスを変更し、特許条項を外すことにしました。 具体的には、こ
React死亡?React終了?～Facebookの特許事項付きライセンスの問題～ - Qiita
前書き 本記事は大幅改装中です。 下記本文は現状参考までにとどめておいてください。 Facebookは2017年9月26日リリースのReact Ver16と、jest、Flow、Immutable.jsの4プロジェクトに関しBSD+PATENTを改め、MITライセンスへ移行しました。 現状はその他のプロジェクトにおいて、BSD+PATENTライセンスが有効ではありますが、おそらくはReactに関してその影響は排除されているものと推測されます。 あくまで推測なので、確実な論拠を得てからその件は記述いたします。 この件を知った発端 QiitaでECMAScriptの最新事情を眺めていたら、Reactが有名なSNS企業のFacebookがやらかしてOSSコミュニティで村八分になっているとのこと。 どういうことか 実際にgoogleで調べてみたらその関連の記事が出ること出ること。多くは英語記事であ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - microsoft/frontend-bootcamp: Frontend Workshop from HTML/CSS/JS to TypeScript/React/Redux
React製のSPAのパフォーマンスチューニング実例
