Rails 7とReactによるCRUDアプリ作成チュートリアル（翻訳）｜TechRacho by BPS株式会社
概要 原著者の許諾を得て翻訳・公開いたします。 英語記事: How to Create a CRUD App with Rails and React · James Hibbard 原文公開日: 2022/04/01 原著者: James Hibbard 日本語タイトルは内容に即したものにしました。 React logo is licensed under Creative Commons — Attribution 4.0 International — CC BY 4.0. ほとんどのWebアプリケーションでは、何らかの形式でデータを永続化する必要があります。これは、サーバーサイド言語で作業する場合はシンプルにやれるのが普通です。しかし、そこにフロントエンドのJavaScriptフレームワークも加わってくると、少しややこしくなり始めます。 本チュートリアルでは、Ruby on Rai
jQueryからTypeScript・Reactまで - Viteで始めるモダンで高速な開発環境構築 - ICS MEDIA
Vite（ヴィート＝フランス語で「速い」の意味）は2020年に発表された新しいフロントエンドのビルドツールです。 開発者がVue.jsの作者であるEvan You氏であるため、Vue.jsのツールであると誤解されることもありますが、プレーンなJavaScript（バニラJS）からVue.js・React・Svelteといった流行のフレームワークまで、さまざまな環境で利用できる汎用的なツールです。 位置付けとしてはwebpackのようなバンドラーと呼ばれるものに近い存在ですが、それだけではありません。この記事では、Viteを導入してプレーンなJavaScriptから、TypeScript+Vue.js・Reactといったフレームワークまで、快適な開発環境を手に入れる方法を紹介します。 この記事で紹介すること： Viteの特徴と基本の仕組み 基本の使い方 Vite + SCSS Vite +
【React+TypeScript】Netflixのクローンを作るチュートリアル
【注意！】 2024年4月末にこちらの本の内容を大幅リニューアルしました！ https://note.com/terry10/n/nf0674af97617 ※こちらのZennのBookも5/7を目安にリニューアル内容を反映する予定です 多くの人に手に取って欲しいので、リニューアル後は期間限定で無料配布も検討しています。 こちらのツイートで無料配布について告知しています！ ↓ https://x.com/teriteri_code/status/1783358352447414464 --- React+TypeScriptを使ったNetflixの映画一覧を表示するアプリケーションのチュートリアルです。 学べる事 - ReactのFunctionComponent（関数コンポーネント）とTypeScriptの使用 - React Hooksによるstate管理 - TypeScriptで外
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技術が大活躍！ 白石 簡単に自己紹介をお願いで
React.jsでFormを扱う - Qiita
今回はReact.jsでのFormの扱いについて書きたいと思います。 例えばReact.jsでは↓のようなことをすると変更出来ないテキストフィールドになってしまいます。どうしてなのかという話ですね。 // ダメ <input type="text" value="initial value" /> // ダメ <input type="text" value={this.state.textValue} /> var Text = React.createClass({ getInitialState() { return { textValue: "initial value" }; }, changeText(e) { this.setState({textValue: e.target.value}); }, render() { return ( <div> <p>{this.st
React 初心者が初級者になるまで - Qiita
はじめに この記事は ACCESS Advent Calendar 2016 25 日目 最後の記事になります。 クリスマスですね、いかがお過ごしでしょうか。 今日は React 初心者が初級者になるまで というタイトルで、初級者になったつもりのわたくし @kasaharu がお届けいたします。 さっそく始めていきます。 2017 年こそ React を触りたい人が知っておきたいこと props props はコンポーネントに渡す任意のプロパティを指す そのときの型は string, number, function, node などが指定できる // 金額を表示する Currency コンポーネントに // 表示する金額のための変数 amount と // 金額を変更するためのイベントハンドラ editAmount() を渡す場合 <Currency amount={amount} on
webpack+React+material-uiの環境を最小手順で作成 - Qiita
などをやってください。 以下の内容は古くなりました。 表題通りでReactとmatrial-uiを使ったウェブページをwebpackを使って最小手順で作るための手順をまとめた。 準備 まずはディレクトリを作成してnpmの準備をする。 $ mkdir webpack-exe $ cd webpack-exe $ npm init This utility will walk you through creating a package.json file. It only covers the most common items, and tries to guess sane defaults. See `npm help json` for definitive documentation on these fields and exactly what they do. Use `np
ReactNativeでの開発を通じて得た知見 - razokulover publog
前回はてぶのお気に入りフィードを読むHBFavというアプリのReactNative版RNHBFavというアプリを作っているという話を書いたが、とりあえずAppStoreへ申請するところまで終わった。 razokulover.hateblo.jp 申請がどのくらいで通るかはまだわからないが、たぶん1週間はかかる気がする。 少し時間が空きそうだし、ここらで今回ReactNativeで開発〜リリース申請する中で感じたことやこうした方が良かったみたいなものをメモしておこうと思う。 垂直分割/水平分割のディレクトリ構成 ディレクトリ構成はプロジェクトごとにみなそれぞれ自分なりの構成を持っているようだけど、例えばreduxを利用するアプリだと以下のような作りになると思う。 index.ios.js index.android.js src |__actions |__hoge.js |__reduce
今からはじめるReact.js〜コンポーネントをまとめる〜 - Qiita
前回→今からはじめるReact.js〜初めてのコンポーネント〜 [2016/05/18追記] 当記事のソースは執筆時点ではReact0.13をベースに書いていましたので、0.14以降では 今からはじめるReact.js〜React ver0.14〜 で記載のように実装する必要があります。 複数のコンポーネントを一つにまとめる 前回でも述べましたが、コンポーネントは最終的に一つにまとめてあげる必要があります。 ヘッダ、ボディ、フッタとコンポーネントを作成した場合を例に、ソースを書いてみます。 index.jsを以下のように書き換えます。 var React = require('react'); //ヘッダの定義 var Header = React.createClass({ render: function(){ return ( <h1>ヘッダです</h1> ); } }); //ボデ
React.jsのmixinについて - Qiita
今回はComponentのmixinについて書きたいと思います。 mixinはまさにmixinなので概念自体については説明しませんがComponentの共通な振る舞いをObjectとして共通化することが出来てとても便利です。 React.js自体も、LinkedStateMixinやPureRenderMixinといった形でmixinを提供しています. ちなみにMarionette.jsでもBehaviorとして、Vue.jsでもmixinとして存在しています。 使い方 使い方はmixinsにObjectを配列として指定するだけです。 配列である通り複数指定することも出来ます。 var Logger = { logging(str) { console.log(str); }, componentDidMount() { this.logging("component did mount"
SPAでのログイン処理のやりかた - Qiita
概要 こちらの記事の続きです。 SPAの静的ファイルのデプロイの仕方 SPAでも、大体のアプリはユーザー登録やログイン機能があると思います。 その際に、SPAでどうやってログイン済みか否かを判別するか、その際のルーティングをどうするかについて正解がないように思うので、自分なりのやり方を共有します。 環境 NodeJS 5.X~ React 15.1 TypeScript 1.8 全体の構成はこちらをご覧ください。 https://github.com/uryyyyyyy/react-redux-sample/tree/spa-auth ゴール ログイン済みであれば、ログイン画面にアクセスしてもホーム画面にリダイレクトされる ログイン済みでなければ、どのページにアクセスしてもログイン画面にリダイレクトされる ログイン済みでない場合、アクセスしたページがレンダリングされる前にリダイレクトされる
Web！スマホ！デスクトップ！すべて作れるプログラマーになるための道標 - ねこ的アルゴリズム
こんにちは、珍獣（@mc_chinju）です。 プログラマーになりたいけど、何から手をつけていいのかわからない！ 将来的に、 自分一人でサービスを作って公開していきたい！ そうお思いの方、割といらっしゃるのではないでしょうか？ 本格的にサービスを作り、マルチプラットフォーム対応までやる場合は、ざっくり以下の知識の習得が必要になります。 実装対象 主な使用言語 Web API Ruby Web アプリ（フロントエンド） html, css, javascript Widows アプリ java, C++ mac OS アプリ swift, objective-c Android アプリ java, Kotlin iPhone アプリ swift, objective-c んー、めっちゃある笑 こちらに挙げているのは、あくまでも一例で、別の言語を使うことももちろんあります。 これだけの知識を習
今更聞けない JSX のコメントアウトの構文 - Qiita
解決したいこと React 初心者なので、JSX コード内で HTML にレンダリングさせたくない部分をコメントアウトする方法がわからない。 方法 {/* ... */} または {// ...} という構文でコメントアウトできる。 例 var Header = React.createClass({ displayName: 'Header', render: function () { return ( <div> {// <h1>wasshoi</h1> } <nav> <ul className="header--nav"> <li> <a href="#">hoge</a> </li> {/* <li> <a href="#">fuga</a> </li> */} </ul> </nav> </div> ); } });
Reactで「閉じろ」と怒られる - // Nice cat :3
たとえば、商品名の一覧を表示したいとき。 list(items){ return ( items.map( item => <li>{ item.name }</li> ) ) } render() { const { items } = this.props; return( <ul> { this.list(items); } </ul> ); } こんなの、よく書きますね。 これは怒られません。正しい。 上記に加えて、this.props.optionsに値があれば、オプションを表示したいとき。 options(opt){ return ( <dd>{ opt.option01 }</dd> <dd>{ opt.option02 }</dd> <dd>{ opt.option03 }</dd> ) } list(items){ return ( items.map( item =>
今話題のReact.jsはどのようなWebアプリケーションに適しているか？ Introduction To React─ Frontrend Conference
今話題のReact.jsはどのようなWebアプリケーションに適しているか？ Introduction To React─ Frontrend Conference 外村 和仁（株式会社 ピクセルグリッド） 本記事は、2015/2/21に行われたFrontrend Conferenceの「Introduction To React」の内容を紹介します。 当日の資料は以下にアップされていますので、こちらも参照してください。 Introduction To React // Speaker Deck React.jsとは何か React.jsはFacebook製のJavaScriptライブラリです。 http://facebook.github.io/react/ 公式サイトに、「A JavaScript library for building user interfaces」とあるように、R
Reactチュートリアル: Intro To React【日本語翻訳】
2016年10月にReactの公式ドキュメントが刷新されました。それに伴いチュートリアルの内容も新しいものとなりました。当ブログでは以前のチュートリアルも日本語に翻訳していましたので、今回も翻訳しました。自分のReactの知識をフル活用して、それなりにわかりやすく訳したつもりです。ぜひ参考にしてください。 当記事は以下のReactの公式チュートリアルを日本語に翻訳したものです。 Tutorial: Intro To Reactまずこのチュートリアルを進める上で、以下のCodePenのコードを使用します。フォークしてから始めてください。 Tic Tac Toe – CodePen以下、チュートリアルの日本語訳となります。 What We’re Building – 何を作るのかToday, we’re going to build an interactive tic-tac-toe gam
React.jsのTutorial用のサーバ側をSpring Bootでやってみた
Posted on March 17, 2015 at 19:23 (JST) React.jsのTutorialを試したとき、必要となったSpring Bootの設定について記載します。 といっても、サーバ側アプリではCORS(Cross-Origin Resource Sharing)用のフィルタ用意（※）くらいしかしてませんが。 ※ 同一ドメインからのアクセスであればフィルタは不要です。 GitHubに置いてあるサンプル（simple-mvc-app）に今回の設定を取り込んでいるので、 興味がある方はどうぞ。 Spring Bootのアプリ設定 フィルタ以外のREST用のソースはココに置いてあります。 コントローラに@RestControllerを付与してるくらいで、特筆することはありません。 フィルタはほぼ公式サイトのままです。 [ CORSFilter.java ] @Compo
Springboot Reactjs でHerokuで動くSampleを試作しました - Qiita
下記のUrlで試して下さい。 https://spring-react.herokuapp.com LOGINボタンを押し、Login ID = test, Password = testで入れます。 左側のボタンを押すと各画面が新たなタブで開きます。 LOGOFFを押すと、開いたTABを閉じて LOGOFFします。 USER管理は、LOGIN Userの管理画面です。（本来はAdministrator権限ですね） 表のアイテムをクリックすると、下側のフォームに表示されます。 変更後 更新ボタンを押すと更新されます。 新規追加の場合は、新規ボタンを押し、データ を入れた後、更新ボタンを押します。 USER INLINEは機能はUSER管理と同様ですが、Excelの様に INLINE EDIT出来ます。 また行をDrug and Dropで入れ替える機能も入れてあります。 USERタブは機能
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
今、我々は、 GUI の設計について 何を考えるべきか
React.js and Spring Data REST: Part 3 - Conditional Operations