環境設定 routerフォルダでプロジェクトを作成 $ cd ~/ $ create-react-app router react-routerインストール 今回はwebサイト $ cd ~/router $ npm install --save react-router-dom src/App.js 編集 前ページ共通で表示するHeader,Footer トップページは/ …

CMS開発の続きです node.js+ReactベースのCMS開発をはじめます node.js+React CMS を設計する(外部仕様)) node.js+React CMS を設計する(データベース仕様)) node.js+React CMS開発-サーバー雛形を作成 node.js+React CMS開発-モデル定義 前提条件と目的およ…

クライアントReactアプリとWebサーバー&APIサーバーを分けるのが面倒で一箇所（プロセス）でホスティングしたいときがあります create-react-app で作成したプロジェクトをexpressの /_admin 以下で動作(配信）させてみます Express環境 $ express together …

create-react-appでプロジェクトを作成し、Material-UIを利用した画面を表示します 環境設定 ローカルの開発環境はこちら * macOS High Sierra(v10.13)でJavaScript開発環境を整える create-react-app でプロジェクトの雛形作成して起動してみる $ cd ~/ $ c…

わざわざServer Side Renderingでやるべきことではないですが、やってみました。 やったこと express-generator で雛形を作る app.jsで view engineに express-react-views を設定 view 内の layout.jsxとindex.jsx でmaterial-uiを利用 ブラウザで確認 環境…

CMS開発シリーズの続きです node.js+ReactベースのCMS開発をはじめます node.js+React CMS を設計する(外部仕様) node.js+React CMS を設計する(データベース仕様) 今回は Expressのプロジェクト作成とviewエンジンにReactを使用するテンプレートを作成しま…

nexpress(CMS名称)画面構成 1. サイト画面構成 SSR(Server Side Rendering)にする トップページ 記事リストページ カテゴリ（サブカテゴリ） 検索結果 タグ検索 ランキング 新着 その他条件リスト 記事本文ページ (ユーザープロフィールや固定ページ) 2. 管…

なぜCMSか 現在CMSのデファクトスタンダードはwordpressです。PHPが動作するサーバーであれば簡単に設置でき、豊富なプラグイン、デザインテーマがあって使いやすくなっています。 これに匹敵できるようなCMSをnode.jsベースで開発してみます。CMSはWebアプ…

前回の続きです。 フォームを表示して、投稿をできるようにします。 作るもの これまで作ってきた掲示板と同じもの フロントエンドが今回作るもの。前回作った掲示板APIと連携して書き込みデータをやりとりする。 サーバーAPIを立ち上げておく 前前回作った…

create-react-appはFacebookが開発したReact web アプリケーションの環境構築パッケージです。 React はそのコードを書いて動かす以前に前提となる開発環境を整備するのに苦労することから適用を断念しがちでした。このツールによって導入がしやすくなりまし…

前回の「node.js+Express+mongooseで掲示板を作ってみる」ではview engineをpugで実装しました。 これを機能はそのままに Reactをview engineとして使ってみます。 目次 目次 1. express-react-views パッケージインストール 2. app.js で view engine を変…

macOS High SierraでJavaScript開発環境を整える macOS High SierraでJavaScript開発環境を整える 0. 開発するもののイメージ 1. Homebrew をインストール 2. nodebrew をインストール 3. node.jsをインストール 4. 開発で使うnode パッケージをグローバルに…