React Native Matsuri 2021で発表したスライドです。 https://reactnative-matsuri.com/ja
React Native for Webͷ͜Ε·Ͱ͔ΒಡΈͱ͘React GUIͷ͜Ε͔ΒReact Native Matsuri 20212021.10.2 Yukiya Nakagawa a.k.a Nkzn1
View Slide
Who am I• Yukiya Nakagawa a.k.a Nkzn (ͳ͔͟Μ)• ৽ׁࡏॅ• ೋࣇͷͰ࠺ͷʢࠓϫϯΦϖҭࣇ͋Γ͕ͱ͏🙏ʣ• ࢿ࢈ӡ༻͓ख͍αʔϏεmoneiroͷITཪํ• ٕज़ॻయͷWebϑϩϯτΤϯυˍܾࡁΞϓϦ୲• React 2015ʙ / React Native 2017ʙ20:38
2݄ʹຊ͕ग़·ͨ͠https://amzn.to/3kWRYc0• 2018͔Β2020Ն·ͰCodeZineͰ࿈ࡌ͍ͯͨ͠هࣄͷ૿ิվగ൛Ͱ͢• ExpoͰReactΛղઆͯ͠·͢30:57
DroidKaigiͰReact NativeͷΛͯͨ͠ਓͰ͢• https://droidkaigi.github.io/2017/timetable.html• https://droidkaigi.jp/2018/timetable/4
React GUI͕ʹͳΓ·ͨ͠Ͷ5
https://twitter.com/estejs/status/141425930163238502720217݄12ͷݯ61:35
React GUI͞ΘͬͯΈͨ7
https://ixrvy.sse.codesandbox.io/ 82:13
HooksΞϓϦέʔγϣϯ։ൃͰຯʹཱͪͦ͏ϚεΩʔϘʔυͷಈ͖Λଊ͑ΔAPI͕๛ͳҹ92:13
ྫ͑useHoverͰ͜Μͳ͜ͱ͕Ͱ͖Δ102:51
useHover import React from "react";import { useHover } from "react-gui/use-hover";export default function App() {const [hovered, onHoverChange] = React.useState(false);const ref = useHover({ onHoverChange });return (ref={ref}style={{width: 200,height: 200,margin: "50px auto",border: "1px solid black",backgroundColor: hovered ? "orange" : null}}/>);}• RefྖҬͷϗόʔΛݕग़11
͓·͚useHoverStatefunction useHoverState() {const [hovered, onHoverChange] = useState(false);const ref = useHover({ onHoverChange });return [ref, hovered];}͍͘͢ϥοϓrefͱhovered͚ͩެ։12
ComponentsRNΤϯδχΞݟ͕֮͑͋ΔฒͼStyleSheet͋Δ͠ɺ·͋·͋େͷϨΠΞτ࡞Εͦ͏133:48
͜Μͳͷ࡞ͬͯΈΔhttps://codesandbox.io/s/react-gui-preview-forked-xhws814
ͷإΑΓݟͨReact NativeͬΆ͞export default function App() {const [ref, hovered] = useHoverState();return (ref={ref}style={[styles.card,{ backgroundColor: hovered ? "#ffa" : "#fff" }]}>accessibilityRole="heading"accessibilityLevel={3}style={styles.title}>@NkznMatsuri 2021 Speaker);}• View, Text, Image• StyleSheet.create(ޙड़)Ͱ࡞ͬͨstylesΛࢀর• ελΠϧΛྻͰϚʔδ154:26
ͷإΑΓݟͨReact NativeͬΆ͞export default function App() {const [ref, hovered] = useHoverState();return (ref={ref}style={[styles.card,{ backgroundColor: hovered ? "#ffa" : "#fff" }]}>accessibilityRole="heading"accessibilityLevel={3}style={styles.title}>@NkznMatsuri 2021 Speaker);}• View, Text, Image• StyleSheet.create(ޙड़)Ͱ࡞ͬͨstylesΛࢀর• ελΠϧΛྻͰϚʔδ164:45
ͷإΑΓݟͨReact NativeͬΆ͞export default function App() {const [ref, hovered] = useHoverState();return (ref={ref}style={[styles.card,{ backgroundColor: hovered ? "#ffa" : "#fff" }]}>accessibilityRole="heading"accessibilityLevel={3}style={styles.title}>@NkznMatsuri 2021 Speaker);}• View, Text, Image• StyleSheet.create(ޙड़)Ͱ࡞ͬͨstylesΛࢀর• ελΠϧΛྻͰϚʔδ175:04
ͷإΑΓ(ུ)const styles = StyleSheet.create({container: {padding: 24,backgroundColor: "#eee",height: "100vh"},card: {boxShadow: "2px 2px 4px #ccc",padding: 16,backgroundColor: "#fff",borderRadius: 8,flexDirection: "row",maxWidth: 500,width: "100%",alignSelf: "center"},thumbImg: {width: 100,height: 100,borderWidth: 1,borderColor: "#ccc",borderRadius: 50,marginRight: 16},title: {fontSize: 24,fontWeight: "700"},description: {color: "#888"}});ελΠϧʹ͑ΔϓϩύςΟϥϯλΠϜґଘshadowܥboxShadowը૾Λؙ͘͢Δͷׂͱ͍ͭ௨ΓͷΓํ185:23
ͷإΑΓ(ུ) card: {boxShadow: "2px 2px 4px #ccc",padding: 16,backgroundColor: "#fff",borderRadius: 8,flexDirection: "row",maxWidth: 500,width: "100%",alignSelf: "center"},ελΠϧʹ͑ΔϓϩύςΟϥϯλΠϜґଘshadowܥboxShadowը૾Λؙ͘͢Δͷׂͱ͍ͭ௨ΓͷΓํ195:42
ͷإΑΓ(ུ) thumbImg: {width: 100,height: 100,borderWidth: 1,borderColor: "#ccc",borderRadius: 50,marginRight: 16},ελΠϧʹ͑ΔϓϩύςΟϥϯλΠϜґଘshadowܥboxShadowը૾Λؙ͘͢Δͷׂͱ͍ͭ௨ΓͷΓํ206:01
React NativeͬΆ͘UI͕࡞ΕΔϒϥβ͚ϥΠϒϥϦͰͨ͠21
͍͔͕Ͱ͔ͨ͠ʁʢͬͯΈͨهࣄ෩ຯͷకΊʣ22
23
Ξόϯऴྃ24
ࠓͷ͓• React GUIʹ৮ͬͯΈͨʢࠓऴΘͬͨʣ• React Native for Webͱ• React Native for Webͳͥੜ·Εͨͷ͔• React GUIͷ͜Ε͔Β257:55
Aύʔτ26
React Nativeͱ͍ۙॻ͖ຯͰϒϥβ͚ΞϓϦ͕࡞ΕΔੈքૣ͘དྷͯ΄͍͠Ͱ͢ΑͶ27
࣮ɺطʹ͋ΔΜͰ͢28
React Native for Web29
https://necolas.github.io/react-native-web/309:30
ݟ͔֮͑͠ͳ͍※ ࡉ͔͍ݕূল͖·͕͢ɺαΠτͷจݴಉ͡෦͕ଟ͍Ͱ͢31
React GUIReact Native for Webͷܥේ• ͲͪΒ࡞ऀNicolas Gallagherࢯ• React GUIFacebook໊͚ٛͩͲNPMͳͲͰࢯͷؔΘΓ͕ݟ͑Δ• https://www.npmjs.com/package/react-gui• React NativeͬΆ͍ίʔυΛϒϥβͰಈ͔͢Ξϓϩʔν3210:08
React Native for WebΛֶͿ͜ͱReact GUIΛֶͿ͜ͱʹܨ͕Δ33
React Native for Web͓͞Β͍ᶃ• https://necolas.github.io/react-native-web/• 20179݄ʹv0.1.0͕ެ։• 20174݄ʹϦϦʔε͞ΕͨTwitter Lite (mobile.twitter.com) Ͱ UIϥΠϒϥϦͱͯ͠࠾༻͞Εͨ• ࡞ऀͷNicolasࢯTwitter LiteϓϩδΣΫτ࣌ͷςοΫϦʔυ3410:46
https://twitter.com/necolas/status/91387719419935948835
༨ஊɿTwitter Liteͷͦͷޙ• ॳεϚϗ͚→ λϒϨοτରԠ→ σεΫτοϓରԠ→ ݱࡏͷ twitter.com36
React Native for Web͓͞Β͍ᶄ• React Nativeͱ΄΅ಉ͡ ίϯϙʔωϯτͱAPIΛ࣋ͭ JavaScriptͷUIϥΠϒϥϦ3711:43
React Native for WebͷΑ͋͘Δޡղ38
“React Native for Webϒϥβ্ʹReact NativeڥΛ࡞ΔϥΠϒϥϦͰ͋Δ”͜Εࣄ࣮Ͱ͋Γ·ͤΜʢ˞'MVUUFS8FC3FBDU/BUJWF%0.গ͚ͩͦ͠ΕͬΆ͍ΞϓϩʔνͰ͢ʣ39
ʮReact Nativeʯͷ2ͭͷଆ໘• UIϥΠϒϥϦͱͯ͠ͷReact Native• ϥϯλΠϜͱͯ͠ͷReact Native4012:40
UIϥΠϒϥϦͱͯ͠ͷReact Nativeimport {Image,Text,View,StyleSheet} from 'react-native';41
UIϥΠϒϥϦͱͯ͠ͷReact Native• Reactͷίϯϙʔωϯτͱɺؔ܈ʢAPIʣ• ࠷ऴతʹωΠςΟϒϒϦοδ/JSIΛݺͼग़͢ͷͷɺͦΕҎ֎ͷ෦ී௨ͷJavaScriptϥΠϒϥϦ4213:18
ϥϯλΠϜͱͯ͠ͷReact Native• ωΠςΟϒϓϥοτϑΥʔϜͷ্ͰJavaScriptΤϯδϯΛಈ͔͢• ϒϦοδ/JSI͔Βͷߋ৽ґཔΛड͚ͯɺωΠςΟϒUIΛߋ৽͢Δ• ϒϦοδ/JSI͔Βͷݺͼग़͠Λड͚ͯɺωΠςΟϒॲཧΛ࣮ߦ͢Δ• ωΠςΟϒॲཧͷ݁ՌΛJavaScriptଆʹ௨͢Δ4313:37
"OESPJE J04 8JOEPXT"OESPJE4%, J044%, 7JTVBM$ 3/"OESPJE3VOUJNF 3/J043VOUJNF 3/8JOEPXT3VOUJNF3/"OESPJE/BUJWF$PNQPOFOUT"1*T3/J04/BUJWF$PNQPOFOUT"1*T3/8JOEPXT/BUJWF$PNQPOFOUT"1*T3FBDU/BUJWF+BWB4DSJQU"1*0VS"XFTPNF"QQMJDBUJPO}}ϥϯλΠϜ(Java, Obj-C, C++)UIϥΠϒϥϦ(JavaScript)4413:56$PNQPOFOU"1*ͷ/BUJWF࣮+4*+4&OHJOF
React Native for Web͕࠶ݱͨ͠ͷ• UIϥΠϒϥϦͱͯ͠ͷReact Native• ϥϯλΠϜͱͯ͠ͷReact Nativeͪ͜Β45
React Native for Webͷਖ਼ମ• React NativeϥϯλΠϜΛ࠶ݱ͠ͳ͍• React Nativeͱಉ໊͡લɾಉ͡propsɾಉ͡ݟͨͷίϯϙʔωϯτ͕ੜ͍͑ͯΔʢ෦࣮ͨͩͷdivspaninputʣ• React Nativeͱಉ໊͡લɾಉ͡Ҿɾಉ͡ڍಈͷAPI͕ੜ͍͑ͯΔ• ͨ·ͨ·React Nativeͱಉ͡ΠϯλʔϑΣʔεΛ͍࣋ͬͯΔ͚ͩͷɺReact Nativeͱґଘؔͷͳ͍UIϥΠϒϥϦ4614:34
"OESPJE J04 8JOEPXT"OESPJE4%, J044%, 7JTVBM$ 3/"OESPJE3VOUJNF 3/J043VOUJNF 3/8JOEPXT3VOUJNF3/"OESPJE/BUJWF$PNQPOFOUT"1*T3/J04/BUJWF$PNQPOFOUT"1*T3/8JOEPXT/BUJWF$PNQPOFOUT"1*T3FBDU/BUJWF+BWB4DSJQU"1*0VS"XFTPNF"QQMJDBUJPO#SPXTFS%0."1*T#VJMUJO'VODUJPOT3FBDU%0.3FBDU/BUJWFGPS8FC$PNQPOFOUT"1*T4714:53
ͷإΑΓݟͨReact NativeͬΆ͞export default function App() {const [ref, hovered] = useHoverState();return (ref={ref}style={[styles.card,{ backgroundColor: hovered ? "#ffa" : "#fff" }]}>accessibilityRole="heading"accessibilityLevel={3}style={styles.title}>@NkznMatsuri 2021 Speaker);}• View, Text, Image• StyleSheet.create(ޙड़)Ͱ࡞ͬͨstylesΛࢀর• ελΠϧΛྻͰϚʔδ͜Ε͕3FBDU%0.ͰಡΊΔܗʹͳΔΘ͚Ͱ͢48
React Native for Webͷਖ਼ମ• React NativeϥϯλΠϜΛ࠶ݱ͠ͳ͍• React Nativeͱಉ໊͡લɾಉ͡propsɾಉ͡ݟͨͷίϯϙʔωϯτ͕ੜ͍͑ͯΔʢ෦࣮ͨͩͷdivspaninputʣ• React Nativeͱಉ໊͡લɾಉ͡Ҿɾಉ͡ڍಈͷAPI͕ੜ͍͑ͯΔ• ͨ·ͨ·React Nativeͱಉ͡ΠϯλʔϑΣʔεΛ͍࣋ͬͯΔ͚ͩͷɺReact NativeͱແؔͷUIϥΠϒϥϦ2Ͳ͏࣮ͬͯݱ͍ͯ͠Δͷʁ49
A. NicolasͷྗʹΑͬͯ• ͔ͭͯnormalize.cssΛ࡞͍ͬͯͨఔʹɺNicolasCSSͷঊ• ʮScrollViewͷଆʹpaddingΛ͚͍ͨ߹contentContainerStyleΛ͍·͠ΐ͏ʯΈ͍ͨͳڍಈ·Ͱ࠶ݱ͞Ε͍ͯΔʢڪΔ͖มଶͰ͋Δʣ• Yoga͕ͪΌΜͱϒϥβͷڍಈΛ࠶ݱͯ͘͠Ε͍ͯΔͷେ͖͍5015:50
React Native for WebͨͩͷUIϥΠϒϥϦimport {Image,Text,View,StyleSheet} from ‘react-native-web’;XFCQBDLͷSFTPMWFBMJBTͰ໊લΛޡຐԽͯ͠lSFBDUOBUJWFzͱͯ͠*NQPSUͰ͖ΔΑ͏ʹ͍ͯ͠Δͷ͕&YQP8FC5116:09
Bύʔτ52
React Native for Webͳͥੜ·Εͨͷ͔53
React NativeΛϒϥβͰಈ͔͔ͨͬͨ͠54
ࢥ͍ग़ͯ͠΄͍͠Twitter LiteTwitter WebۙԽPJTwitter͕ࣾRNͷϢʔβʔاۀͩͱ͍͏Λฉ͍ͨ͜ͱ͕͋Δਓʁ5517:25
React Native for WebͷϞνϕʔγϣϯ※ 20184݄͝ΖʹNicolas͕πΠʔτ͍ͯͨ͠Λݩʹ͍ͯ͠ΔͭΓͰ͕͢ɺ ۪ஒࠞ͡Γ͍͔ͩͬͨͤπΠফ͠͞Ε͍ͯΔͷͰɺશମతʹʦཁग़యʧͳ͜ͱΛ͝༰͍ࣻͩ͘͞※ ͠ݟ͕֮͑͋Δͩͬͨ߹ɺTwitterͰʮݟ͕֮͑͋Δʯͱݴ͍͚ͬͯͨͩΔͱخ͍͠Ͱ͢5617:44
ϒϥβຊདྷυΩϡϝϯτϏϡʔΞhttp://info.cern.ch/hypertext/WWW/TheProject.html57
GUIΞϓϦͷϓϥοτϑΥʔϜͱͯ͠ੜ·ΕͨΘ͚Ͱͳ͍58EJWͱTQBOͱJNHʹ༷ʑͳ$44όουϊϋΛ༩ͯ͠Α͏͘·ͱʹಈ͘ͷɺ(6*ϑϨʔϜϫʔΫͷମΛ͍ͯ͠ͳ͍ʢϒϥβυΩϡϝϯτϏϡʔΞͳͷͰํͳ͍ʣ
ΞϓϦΛ࡞ΔͳΒ͜͏͍͏ͷཉ͍͠ΑͶ• ҙͷྖҬΛ׳ੑεΫϩʔϧ͍ͨ͠• ॲཧͪͷϓϩάϨεόʔΛग़͍ͨ͠• େྔͷσʔλΛলϝϞϦͰදࣔͰ͖ΔϦετػߏͪΖΜϥΠϒϥϦΛೖΕΕͰ͖Δ͚Ͳ͜Μͳ͋Γ;ΕͨػೳΛೖΕΔ͚ͩͳͷʹϥΠϒϥϦͷબఆ؟͕ඞཁͳͷɺଟ͘ͷਓʹͱͬͯਏ͍5918:41
React DOM͚ͷඪ४GUIπʔϧΩοτ͕ཉ͍͠ʢjQueryʹର͢ΔjQuery UIΈ͍ͨͳʣ60
͓ɺ͜Μͳͱ͜Ζʹཧ͞ΕͨGUI͕• ҙͷྖҬΛ׳ੑεΫϩʔϧ͍ͨ͠• → ScrollView• ॲཧͪͷϓϩάϨεόʔΛग़͍ͨ͠• → ProgressBar, ActivityIndicator• େྔͷσʔλΛলϝϞϦͰදࣔͰ͖ΔϦετػߏ• → FlatList6119:19
React NativeͷAPIΑ͘Ͱ͖ͯΔʦཁग़యʧ• ͦͷདྷྺ͔ΒɺiOS SDKͱAndroid SDKͷ࠷େެΛࢤ͍ͯ͠Δ• iOSઌߦͰ࡞ΒΕͨͷͰɺ໋໊͕iOSدΓͰ͋Δ• for Windowsfor macOS͕࣮͞Ε͔ͨΒAPIσβΠϯͷ൚༻ੑ͕Ӑ͍ΕΔʢ΄Μͱ͔……ʁʣ• GUIΞϓϦέʔγϣϯ࡞Γʹదͨ͠ϑϨʔϜϫʔΫΛ࡞ΔͳΒɺAPIͱͯ͠React NativeΛਅࣅΔͷѱ͘ͳ͍Ξϓϩʔν6219:38
React Native for WebͷϞνϕʔγϣϯReact DOM͚ͷඪ४GUIπʔϧΩοτͱͯ͠React NativeΫϩʔϯΛ࡞Ζ͏ʂ63
ͷإΑΓݟͨReact NativeͬΆ͞export default function App() {const [ref, hovered] = useHoverState();return (ref={ref}style={[styles.card,{ backgroundColor: hovered ? "#ffa" : "#fff" }]}>accessibilityRole="heading"accessibilityLevel={3}style={styles.title}>@NkznMatsuri 2021 Speaker);}• View, Text, Image• StyleSheet.create(ޙड़)Ͱ࡞ͬͨstylesΛࢀর• ελΠϧΛྻͰϚʔδͰɺ͜͏ͳͬͨΘ͚64
React Native for WebͷϞνϕʔγϣϯ• React DOMͷੈքʹશ෦ೖΓGUIπʔϧΩοτ͕ཉ͍͠• ෳϓϥοτϑΥʔϜͷதͰୟ্͖͛ΒΕͨɺReact NativeͷதཱతͳAPIσβΠϯΛϒϥβʹऔΓࠐΜͰΈΑ͏• CSSͷࠇຐज़Λ֮͑ͳͯ͘ҰൠతͳGUIΞϓϦέʔγϣϯΛΊΔΑ͏ʹͳΔͧʂ• ͦΕͰ͍ͯσβΠϯ্ͷΦϐχΦϯͳ͍ͷͰɺ͖ͳσβΠϯͷUIϥΠϒϥϦΛඃͤΒΕΔͧʂʢReact Native Paperͱ͔NativeBaseͱ͔͑Δʣ• WAI-ARIA༷ͷAccessibilityରԠ͕Γ͍͢Α͏ʹྀ͢Δ$IBLSB6*ͱͷҧ͍6520:35
AccessibilityReact NativeຊՈͷaccessibilityܥAPIΛΞϨϯδͨ͠ܗͰɺWAI-ARIAରԠηϚϯςΟοΫWebରԠΛߦ͍ͬͯΔ6620:54
StyleSheetελΠϧՄೳͳݶΓখׂ͘͞͞ΕͯɺελΠϧͷ༰͔Βੜ͞ΕͨΫϥε໊Λ༩͑ΒΕΔՄೳͳݶΓॏෳഉআ͞ΕΔͷͰόϯυϧੑೳ͕ߴ͍༗໊ແ࣮Խͨ͠ɺຊՈͷStyleSheet.createΑΓ༏ल6721:13
ग़ϋονͷ࡞Γ͢͞import React, { useCallback } from 'react';import { View } from 'react-native';import { useDropzone } from 'react-dropzone';export type Props = {onFileSelected: (file: File) => void;};export const UploadProductDlc: React.FC = ({onFileSelected}) => {const onDrop = useCallback((acceptedFiles) => {if (!acceptedFiles || acceptedFiles.length === 0) return;onFileSelected(acceptedFiles[0]);},[onFileSelected]);const { getRootProps, getInputProps, isDragActive } = useDropzone({onDrop,accept: [ 'application/pdf' ],});return ({...getRootProps()}style={{ backgroundColor: isDragActive ? 'lightgray' : ‘gray' }}>ϑΝΠϧΛՃ͢Δ (࠷େ500MB·Ͱʣ);};React Nativeͷख๏Ͱղܾ͢Δͷ͕໘ʹͳͬͨΒɺϒϥβͷख๏ʹಀ͍͍͛ͯීஈͱҧͬͯϒϦοδ͕͍Βͳ͍࣮ՈͷΑ͏ͳ҆৺ײϒϥβ͚ϥΠϒϥϦ7JFXͷதʹEJWΛஔ͍͍͍ͯUploadProductDlc.web.tsx6821:32
ٕज़ॻయWebͰ࣮ࡍʹ͍ͬͯ·͢6921:51
Αͦ͞͏70
͔͠͠React Native for WebʮReact Nativeʯͱ͍͏໊લͰଛ͕ͪ͠7122:29
React NativeϥϯλΠϜͷͨΊͷπʔϧͩͱצҧ͍͞ΕͯWeb։ൃऀʹݟ͖͞Εͳ͍ʢʮຊసͩʯͱ͍͏ẍস·ͰඈΜͰ͘Δ࢝ʣʢNicolas͕۪ஒͬͯπΠফ͢͠ΔݪҼʣ7222:48
- 2018.3.6 @Necolas“React Native͕ɺWeb։ൃऀʹͱͬͯ࠷͍͠GUIͷͷଟ͘Λ͢Ͱʹղܾ͍ͯ͠Δ͜ͱΛɺͲ͏ͬͯWeb։ൃऀʹೲಘͤ͞Δͷ͔ʁաڈʹͬͯɺReact DOMͷલʹReact NativeΛϦϦʔε͢Δʁͬͱ؆୯ͳํ๏ͳ͍ͷ͔…”7323:07https://twilog.org/Nkzn/date-180306
·໋໊͕͋ѱ͍• ໊લ͕Ͳ͏ͯ͠ΠϩϞϊײΛग़ͯ͠͠·͏• Nicolas໊લͷѱ͞Θ͔͍ͬͯΔΑ͏ͩͬͨʦཁग़యʧ• ʮ͍ͬͦReact Nativeଆ໊͕લΛม͑ͯ͘ΕͨΒ͍͍ʯ·Ͱݴͬͯͨؾ͕͢Δ ʢUIϥΠϒϥϦͱͯ͠ͷReact Nativeʹผͷ໊લΛ͚ͭͯ΄͍͠ɺ ɹ͘Β͍ͷχϡΞϯεʣ7423:26
ReactʹGUIπʔϧΩοτ͕ඞཁ75
ReactʹGUIπʔϧΩοτ͕ඞཁReact GUI76
React GUI77
React GUIReact Native for Webͷҟੈքసੜʢ͔͠Εͳ͍ʣ7824:42
Cύʔτ79
React GUIReact Native for WebͷϦϒϥϯσΟϯάͳͷ͔80
Θ͟Θ͟Facebook໊ٛͰग़ͯ͜ΒΕΔͱظߴ·Δͱ͍͏ͷ81
ظ͕ߴ·Γ͗ͯ͢DiscussionΛཱͯͨਓ͕͍·ͨ͠https://github.com/reactwg/react-18/discussions/7182
ޚେ͔Βͷճ·ͩݸਓతͳ࣮ݧϓϩδΣΫτͰ͋ΔFBͷؒͱڞ༗ͨͯ͘͠FBͷϦϙδτϦʹ্͚͛ͨͩΦϑΟγϟϧʹͳΔ༧ఆ·ͩͳ͍͍͔ͭ͘ͷΞΠσΞReact Native for WebʹϑΟʔυόοΫͨ͠Γ React NativeνʔϜͱ͠߹ͬͨΓ͍ͯ͠Δ8326:17
·ͩReact GUIͷ࣌དྷͳ͍Β͍͠84
React GUIʹظ͢Δະདྷ85
React NativeͷΈͰͰ͖ͳ͔ͬͨ͜ͱ• iOSAndroidͱ͍ͬͨλονσόΠεΛલఏʹ࡞ΒΕͨͨΊɺ ϙΠϯςΟϯάσόΠεͷߟྀ͕͔ͳΓബ͍• ೖྗͷϑΥʔΧεҠಈΩʔϘʔυγϣʔτΧοτɺΟϯυαΠζͷΧδϡΞϧͳมߋͳͲಉ༷• React NativeͷAPI͔Βେ͖͘ҳ͢Δ͜ͱͰ͖ͳ͍தͰରԠʹݶ͕͋ͬͨʢ@types/react-nativeͰܕ͚ͯ͠Δ͠Ͷʣ8627:14
React GUIͳΒͰ͖ΔσεΫτοϓ͚HooksͷݟຊࢢReact Native for WebͰΓ͔ͬͨΜͩΖ͏ͳ͋……87
طଘͷRNϑΝϛϦʔϙΠϯςΟϯάσόΠεͱແؔͰͳ͍https://microsoft.github.io/react-native-windows/https://www.gizmodo.jp/2020/03/ipados-13-4-release.htmlhttps://www.google.co.jp/intl/ja_jp/chromebook/ 8827:52
͔ͯ͠͠• React NativeνʔϜʹϑΟʔυόοΫ͍ͯ͠Δ༰ͱ͍͏ͷɺ ϙΠϯςΟϯάσόΠεͷσεΫτοϓ͚API……ʁ• useHoverΛReact NativeຊମʹऔΓࠐ·ͤͯɺReact Native forWebΛΑΓσεΫτοϓ͚ʹਐԽͤ͞ΔͭΓͰ……ʁ• ͠ΒΜ͚Ͳ8928:11
React Native for Web ެࣜΞΧϯτΛνΣοΫhttps://twitter.com/ReactWeb8/27ʹͰ͖ͯͨ@ReactNativeWebʹ͠ͳ͔ͬͨ͋ͨΓʹNicolasͷࣥ೦Λײ͡Δ͍͔ͭReact Native for WebͱReact GUI͕౷߹ͯ͠React WebʹͳΔΜͩΖ͏͔9028:30
͔͜͜Βઌ܅ͷͰ͔֬Ίͯ͘Εʂ91
nkzn
koluku
mkeeda
mpyw
nagworld
siketyan
aanrii
.png){kind=avatar}
headwaters
alexandresalome
smiyawaki0820
meihei3
ogijun2018
suzuki
sferik
hatefulcrawdad
smashingmag
trallard
samlambert
hursman
chriscoyier
reverentgeek
malarkey
brianwarren
sstephenson
marcelosomers