nukosuke nukosuke

## server.tsx
import * as Koa         from "koa";
import * as React       from "react";
import * as ReactDOM    from "react-dom/server";
import { StaticRouter } from "react-router-dom";
import { Helmet }       from "react-helmet";
import Application      from "./components/Application";

const app = new Koa();

// StaticRouterにKoaのコンテキストからURLを渡し、

## Application.tsx
import * as React from "react";
import { Switch, Route, Link } from "react-router-dom";

export default class Application extends React.Component<any, any> {
  render() {
    return (
      <div>
        <ul>
          <li><Link to="/1">page 1</Link></li>
          <li><Link to="/2">page 2</Link></li>

## server.tsx
import * as Koa         from "koa";
import * as React       from "react";
import * as ReactDOM    from "react-dom/server";
import { Helmet }       from "react-helmet";
import Application      from "./components/Application";

const app = new Koa();

app.use(ctx => {
  const markup = ReactDOM.renderToString(<Application/>);

## server.tsx
import * as path        from "path";
import * as Koa         from "koa";
import * as staticFiles from "koa-static";
import * as React       from "react";
import * as ReactDOM    from "react-dom/server";
import { StaticRouter } from "react-router-dom";
import { Helmet }       from "react-helmet";
import Application      from "./components/Application";

const app = new Koa();

## react-universal.md

      
              1 file
            
          
              0 forks
            
          
              0 comments
            
          
              0 stars
            
          
                nukosuke
                / react-universal.md
            
            
              Last active
              May 22, 2018 06:57
            
              
                React Universalアプリケーション勉強会
              
          
    概要

React Universalアプリケーション勉強会のための覚書。
Universal

isomorphic（あいそもーふぃっく）とも言う。クライアントでもサーバでも同じようにレンダリングされ動作するアプリケーションのこと。
最近ではReact Nativeなどを使ったモバイルアプリケーションも含めUniversalと言うことが多い。
技術スタック

使用する技術スタックは次の通り。

  
## progressbar.vb
Sub progressbar()
  Const r As String = "00"    '色・RGB値のR
  Const g As String = "ae"    '色・RGB値のG
  Const b As String = "ef"    '色・RGB値のB
  Const pbH As Long = 10     '高さ
  Const pbBG As Single = 0.6  '背景の透過性
  Const bgr As String = "ff"
  Const bgg As String = "be"
  Const bgb As String = "00"

## install-emacs-macos.sh
#!/bin/sh

git clone https://git.savannah.gnu.org/git/emacs.git
cd emacs
./configure --with-ns --with-mailutils --without-makeinfo --with-module
make -j8
sudo make install

## railsContextReducer.js
export default function railsContextReducer(state = {}) {
  return state;
}

## application.html.erb
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <%= server_render_js("Helmet.rewind().title.toString()") %>
    <%= csrf_meta_tags %>
    <%= stylesheet_link_tag 'application', media: 'all' %>
  </head>
  <body>
    <%= yield %>

## clientRegistration.js
import React from 'react';
import { Provider } from 'react-redux';
import { Router as ReactRouter, browserHistory } from 'react-router';
import { syncHistoryWithStore } from 'react-router-redux';
import ReactOnRails from 'react-on-rails';
import routes from '../routes/routes';
import store from '../store/store';

const Router = (props, railsContext) => {
  const store = ReactOnRails.getStore("store");
	import * as Koa from "koa";
	import * as React from "react";
	import * as ReactDOM from "react-dom/server";
	import { StaticRouter } from "react-router-dom";
	import { Helmet } from "react-helmet";
	import Application from "./components/Application";

	const app = new Koa();

	// StaticRouterにKoaのコンテキストからURLを渡し、
	import * as React from "react";
	import { Switch, Route, Link } from "react-router-dom";

	export default class Application extends React.Component<any, any> {
	render() {
	return (
	<div>
	<ul>
	<li><Link to="/1">page 1</Link></li>
	<li><Link to="/2">page 2</Link></li>
	import * as path from "path";
	import * as Koa from "koa";
	import * as staticFiles from "koa-static";
	import * as React from "react";
	import * as ReactDOM from "react-dom/server";
	import { StaticRouter } from "react-router-dom";
	import { Helmet } from "react-helmet";
	import Application from "./components/Application";

	const app = new Koa();
	Sub progressbar()
	Const r As String = "00" '色・RGB値のR
	Const g As String = "ae" '色・RGB値のG
	Const b As String = "ef" '色・RGB値のB
	Const pbH As Long = 10 '高さ
	Const pbBG As Single = 0.6 '背景の透過性
	Const bgr As String = "ff"
	Const bgg As String = "be"
	Const bgb As String = "00"
	#!/bin/sh

	git clone https://git.savannah.gnu.org/git/emacs.git
	cd emacs
	./configure --with-ns --with-mailutils --without-makeinfo --with-module
	make -j8
	sudo make install
	export default function railsContextReducer(state = {}) {
	return state;
	}
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8" />
	<%= server_render_js("Helmet.rewind().title.toString()") %>
	<%= csrf_meta_tags %>
	<%= stylesheet_link_tag 'application', media: 'all' %>
	</head>
	<body>
	<%= yield %>
	import React from 'react';
	import { Provider } from 'react-redux';
	import { Router as ReactRouter, browserHistory } from 'react-router';
	import { syncHistoryWithStore } from 'react-router-redux';
	import ReactOnRails from 'react-on-rails';
	import routes from '../routes/routes';
	import store from '../store/store';

	const Router = (props, railsContext) => {
	const store = ReactOnRails.getStore("store");