Yukiya Nakagawa Nkzn

## Fab.tsx
import React from "react";
import {
  StyleProp,
  StyleSheet,
  TouchableWithoutFeedback,
  View,
  ViewStyle
} from "react-native";
import { colors, dimens } from "./style";

## package.ts
var packagejson = require(__dirname + "/package.json");

interface Package {
  name: string;
  versionName: string;
  versionNameWithoutBuild: string;
  versions: number[];
  versionCode: number;
}

## index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
  </head>
  <body>
    <h1>Hello World!</h1>
    <!-- All of the Node.js APIs are available in this renderer process. -->
    We are using Node.js <script>document.write(process.versions.node)</script>,

## 01.md

      
              3 files
            
          
              0 forks
            
          
              0 comments
            
          
              0 stars
            
          
                Nkzn
                / 01.md
            
            
              Last active
              July 21, 2018 04:03
            
              
                上越TechMeetup#2でのデモ手順
              
          
    とりあえず画面遷移ライブラリ入れとこう

$ yarn add react-navigation
src/MainScreen.js

import React from 'react';

  
## ApplicationService.ts
import { doHoge, doFuga, addFoo, addBar } from "../ducks";

class ApplicationService {
  constructor(private dispatch: Dispatch, private client: ApiClient) {
  }

  async getHoge(id: number) {
    const hoge = await this.client.fetchHoge(id);
    this.dispatch(doHoge(hoge.id));
    const fuga = await this.client.fetchFuga(hoge.id);

## Library.java
import java.util.List;
import java.util.stream.Collectors;

import static java.util.Comparator.comparing;

public class Library {
    public List<Model> sortWithName(List<Model> models) {
        return models.stream() // このmodelsの中身は変更されない
                .sorted(comparing(model -> model.name))　// 適当に降順ソート
                .collect(Collectors.toList()); // このときに新しいList<Model>型コレクションが生成される

## reactdom-reactnative-render-diff.md

      
              1 file
            
          
              0 forks
            
          
              0 comments
            
          
              1 star
            
          
                Nkzn
                / reactdom-reactnative-render-diff.md
            
            
              Last active
              October 15, 2020 06:08
            
              
                ReactDOMとReactNativeのRendererの挙動の違い
              
          
    React NativeとReact DOMでVDOMの持ち方が違う気がするという話、調べてみたらやっぱりそうでした。
ReactDOMの場合

ReactDOMがReal DOMへの書き込みに使っているcommitUpdateという関数があります。 https://github.com/facebook/react/blob/3d8f465d99ece19238ccb561cdb157d2d676dda4/packages/react-dom/src/client/ReactDOM.js#L716
ReactDOMのほうは辿っていくとReal DOMのElementをゴリゴリ弄っている場所に辿り着けます https://github.com/facebook/react/blob/3d8f465d99ece19238ccb561cdb157d2d676dda4/packages/react-dom/src/client/DOMPropertyOperations.js#L116-L173
ReactNativeの場合

  
## embed.md

      
              1 file
            
          
              0 forks
            
          
              0 comments
            
          
              0 stars
            
          
                Nkzn
                / embed.md
            
            
              Created
              December 17, 2017 17:03
            
              
                いちおう、これでMarkdownをコードブロックに入れることができるはず
              
          
    # Sample document

## <<Structure>>

```javascript
<Element 1>
<Element 2>
```


## Main.java
public class Main {
    public static void main(String... args) {
        SuperHoge superHoge_1 = new SuperHoge();
        System.out.println(superHoge_1.sum()); // => 2 (a:1, b:1)

        SuperHoge superHoge_2 = new SuperHoge(2);
        System.out.println(superHoge_2.sum()); // => 3 (a:1, b:2)

        SubHoge1 subHoge1_1 = new SubHoge1();
        System.out.println(subHoge1_1.sum()); // => 2 (a:1, b:1)

## app.js
import { StackNavigator } from 'react-navigation';
import Login from './login';
import Timeline from './timeline';

const App = StackNavigator({
  Login: {
    screen: Login,
  },
  Timeline: {
    screen: Timeline,
	import React from "react";
	import {
	StyleProp,
	StyleSheet,
	TouchableWithoutFeedback,
	View,
	ViewStyle
	} from "react-native";
	import { colors, dimens } from "./style";
	var packagejson = require(__dirname + "/package.json");

	interface Package {
	name: string;
	versionName: string;
	versionNameWithoutBuild: string;
	versions: number[];
	versionCode: number;
	}
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<title>Hello World!</title>
	</head>
	<body>
	<h1>Hello World!</h1>
	<!-- All of the Node.js APIs are available in this renderer process. -->
	We are using Node.js <script>document.write(process.versions.node)</script>,
	import { doHoge, doFuga, addFoo, addBar } from "../ducks";

	class ApplicationService {
	constructor(private dispatch: Dispatch, private client: ApiClient) {
	}

	async getHoge(id: number) {
	const hoge = await this.client.fetchHoge(id);
	this.dispatch(doHoge(hoge.id));
	const fuga = await this.client.fetchFuga(hoge.id);
	import java.util.List;
	import java.util.stream.Collectors;

	import static java.util.Comparator.comparing;

	public class Library {
	public List<Model> sortWithName(List<Model> models) {
	return models.stream() // このmodelsの中身は変更されない
	.sorted(comparing(model -> model.name))　// 適当に降順ソート
	.collect(Collectors.toList()); // このときに新しいList<Model>型コレクションが生成される
	public class Main {
	public static void main(String... args) {
	SuperHoge superHoge_1 = new SuperHoge();
	System.out.println(superHoge_1.sum()); // => 2 (a:1, b:1)

	SuperHoge superHoge_2 = new SuperHoge(2);
	System.out.println(superHoge_2.sum()); // => 3 (a:1, b:2)

	SubHoge1 subHoge1_1 = new SubHoge1();
	System.out.println(subHoge1_1.sum()); // => 2 (a:1, b:1)
	import { StackNavigator } from 'react-navigation';
	import Login from './login';
	import Timeline from './timeline';

	const App = StackNavigator({
	Login: {
	screen: Login,
	},
	Timeline: {
	screen: Timeline,