CodeSandbox - Reactのオンラインプレイグラウンド
Reactの勉強をしたいと思ったとしても、環境の準備に色々と手間がかかっていたらやる気がなくなってしまうでしょう。その途中でエラーが出たり、nodeのバージョンが古いなどと警告が出たりしても萎えてしまいます。 そこで使ってみたいのがCodeSandboxです。オンラインでReactの記述と実行ができるプレイグラウンドです。 CodeSandboxの使い方 メイン画面です。中央のペインでコードを編集できます。 編集内容はすぐに反映されます。 別なファイルを開いて編集できます。 シェアするための設定画面です。 CodeSandboxはJSFiddleに代表されるようなオンラインでのJavaScript開発環境のReact版と言えます。書いたコードを他の人と共有したり、GitHubなどからオンラインデモとしてリンクしたりすると言った使い方もできそうです。 CodeSandboxはnode/Jav
Proton Native - React Nativeのデスクトップ版
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Electronを使えばデスクトップアプリとして動作するソフトウェアがクロスプラットフォームで作成できます。しかし、HTMLなのでUIを作るのが若干大変という印象があります。同様のことはモバイルアプリでも起きており、Reactが示した解決策がReact Nativeになります。 そしてProton NativeはReact Nativeと同じ解決策をデスクトップアプリに対して適用しようとしています。 Proton Nativeの使い方 Proton Nativeのサンプルコードです。ノートアプリになります。 import React, { Component } from 'react'; import fs from 'fs' import { render, Window, A
React Server - Reactの開発をはじめるのに最適なベースを生成
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Reactを触りはじめて思うのが、フレームワークのスタンダードが確立されていないということです。React自体はViewなので、それ以外の部分やアプリケーションサーバをどうすべきかといった部分が抜け落ちています。 そうした点で迷っている方はReact Serverを使ってみてはいかがでしょう。React Serverを使えばReactを使った開発環境周りの整備が一気に進むでしょう。 React Serverの使い方 React Serverをインストールした後はyeomenのコマンドで起動します。 yo react-server 後は npm run start でサーバが立ち上がります。 ボタンをクリックすると「！」が増えます。 ファイル構成は次のようになっています。 ベースにな
Roc - React/Reduxを使ったnodeフレームワーク MOONGIFT
Reactを使ってみたいと思うプログラマはたくさんいると思うのですが、いざちゃんとしたものを作ろうと思うとフレームワークの存在に悩むことになります。Reduxを使うとしてもどういう組み合わせ、ディレクトリ構成でやるのがベストなのか分かりづらかったりします。 そこで使ってみたいのがRocです。React/Reduxを使ったnodeのWebアプリケーションフレームワークです。 Rocの使い方 Rocのインストールはnpmでできます。 npm install -g roc アプリケーションの初期設定はinitを使います。対話型で作ります。 $ roc init web-app-react Found a folder named /path/to/react-app, will try to use it. Using v1.0.3 as template version : ? What's
MERN - Express/Reactを使ったWeb開発フレームワーク MOONGIFT
Linux + Apache + PHP + MySQLの組み合わせがWeb開発のスタンダード的な位置づけになっていた頃、それぞれの頭文字をとってLAMPスタックと言うのが流行りました。同様にフレームワークが変わるために名称も異なってきました。 今回はMERNスタックを標榜するソフトウェアを紹介します。MongoDB + Express + React + nodeという組み合わせのアーキテクチャになります。 MERNの使い方 MERNのディレクトリ構成は次のようになっています。サーバサイドはMVCに分かれており、Reactを使ったサーバサイドレンダリングを行っています。 テストのサーバを立ち上げたところです。ブログエンジンとなっています。右側にReactで持っているオブジェクトの内容が確認できるのがユニークです。 データの詳細も確認できます。 クリックで画面は変わりますが、サーバへのアク
enclave - WebベースのReactアプリを開発するのに必要な仕組みを提供 MOONGIFT
ReactでWebアプリを作りたいと思ったとして、最初に問題になるのがデファクトと呼べるアーキテクチャが存在しないことかと思います。Node.js + Expressは良いとして、サーバサイドレンダリングで行う場合の構築法がこれ！というものがないのです。 そこで紹介したいのがenclaveです。Reactに特化しつつ、そのベースとして使えるシステムです。 enclaveの使い方 enclaveの始め方は簡単です。npmでインストールします。 $ mkdir my-new-app $ cd my-new-app $ npm init $ npm install enclave --save $ npm install react react-dom --save さらに例えばJavaScriptとHTMLファイルを作成します。 $ mkdir src && touch src/App.js
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
