Submit Search
Upload
Atomic Designは「マルチ」で真価を発揮する
•
5 likes
•
2,397 views
Yukiya Nakagawa
Follow
WaterCell Tech Night #1で喋ったやつです
Read less
Read more
Technology
Slideshow view
Report
Share
Slideshow view
Report
Share
1 of 72
Download now
Download to read offline
Recommended
React Native Androidはなぜ動くのか
React Native Androidはなぜ動くのか
Yukiya Nakagawa
React Nativeの光と闇
React Nativeの光と闇
Yukiya Nakagawa
ReactJS vs AngularJS - Head to Head comparison
ReactJS vs AngularJS - Head to Head comparison
500Tech
What's New in JHipsterLand - Devoxx Poland 2017
What's New in JHipsterLand - Devoxx Poland 2017
Matt Raible
Front End Development for Back End Developers - UberConf 2017
Front End Development for Back End Developers - UberConf 2017
Matt Raible
Bootiful Development with Spring Boot and Angular - Spring I/O 2017
Bootiful Development with Spring Boot and Angular - Spring I/O 2017
Matt Raible
React Nativeアプリをリリースし続けるために、最初に行う8つの取り組み
React Nativeアプリをリリースし続けるために、最初に行う8つの取り組み
Yukiya Nakagawa
Front Ends for Back End Developers - Spring I/O 2017
Front Ends for Back End Developers - Spring I/O 2017
Matt Raible
Recommended
React Native Androidはなぜ動くのか
React Native Androidはなぜ動くのか
Yukiya Nakagawa
React Nativeの光と闇
React Nativeの光と闇
Yukiya Nakagawa
ReactJS vs AngularJS - Head to Head comparison
ReactJS vs AngularJS - Head to Head comparison
500Tech
What's New in JHipsterLand - Devoxx Poland 2017
What's New in JHipsterLand - Devoxx Poland 2017
Matt Raible
Front End Development for Back End Developers - UberConf 2017
Front End Development for Back End Developers - UberConf 2017
Matt Raible
Bootiful Development with Spring Boot and Angular - Spring I/O 2017
Bootiful Development with Spring Boot and Angular - Spring I/O 2017
Matt Raible
React Nativeアプリをリリースし続けるために、最初に行う8つの取り組み
React Nativeアプリをリリースし続けるために、最初に行う8つの取り組み
Yukiya Nakagawa
Front Ends for Back End Developers - Spring I/O 2017
Front Ends for Back End Developers - Spring I/O 2017
Matt Raible
Gettings started with the superheroic JavaScript library AngularJS
Gettings started with the superheroic JavaScript library AngularJS
Armin Vieweg
Fragments: Why, How, What For?
Fragments: Why, How, What For?
Brenda Cook
PPT on Angular 2 Development Tutorial
PPT on Angular 2 Development Tutorial
Paddy Lock
Front End Development for Back End Developers - Devoxx UK 2017
Front End Development for Back End Developers - Devoxx UK 2017
Matt Raible
Angular
Angular
sridhiya
Bootiful Development with Spring Boot and React - RWX 2017
Bootiful Development with Spring Boot and React - RWX 2017
Matt Raible
Angular.js - JS Camp UKraine 2013
Angular.js - JS Camp UKraine 2013
Max Klymyshyn
Intro to sbt-web
Intro to sbt-web
Marius Soutier
Java2day 2013 : Modern workflows for javascript integration
Java2day 2013 : Modern workflows for javascript integration
Mite Mitreski
Wicket And Swing From One Codebase
Wicket And Swing From One Codebase
jcompagner
Angular Best Practices v2
Angular Best Practices v2
Henry Tao
React vs angular (mobile first battle)
React vs angular (mobile first battle)
Michael Haberman
GWTcon 2015 - Beyond GWT 3.0 Panic
GWTcon 2015 - Beyond GWT 3.0 Panic
Cristiano Costantini
Introduction to Angular 2
Introduction to Angular 2
Dawid Myslak
The evolution of Angular 2 @ AngularJS Munich Meetup #5
The evolution of Angular 2 @ AngularJS Munich Meetup #5
Johannes Weber
Creating "The Second Best Place on the Internet" with Spring Initializr
Creating "The Second Best Place on the Internet" with Spring Initializr
VMware Tanzu
Angular2
Angular2
Software Infrastructure
Muhammad azamuddin introduction-to-reactjs
Muhammad azamuddin introduction-to-reactjs
PHP Indonesia
Tech Talk on ReactJS
Tech Talk on ReactJS
Atlogys Technical Consulting
AngularJs advanced Topics
AngularJs advanced Topics
Amr Abd El Latief
React basic by Yoav Amit, Wix
React basic by Yoav Amit, Wix
Chen Lerner
Comparing Angular and React JS for SPAs
Comparing Angular and React JS for SPAs
Jennifer Estrada
More Related Content
What's hot
Gettings started with the superheroic JavaScript library AngularJS
Gettings started with the superheroic JavaScript library AngularJS
Armin Vieweg
Fragments: Why, How, What For?
Fragments: Why, How, What For?
Brenda Cook
PPT on Angular 2 Development Tutorial
PPT on Angular 2 Development Tutorial
Paddy Lock
Front End Development for Back End Developers - Devoxx UK 2017
Front End Development for Back End Developers - Devoxx UK 2017
Matt Raible
Angular
Angular
sridhiya
Bootiful Development with Spring Boot and React - RWX 2017
Bootiful Development with Spring Boot and React - RWX 2017
Matt Raible
Angular.js - JS Camp UKraine 2013
Angular.js - JS Camp UKraine 2013
Max Klymyshyn
Intro to sbt-web
Intro to sbt-web
Marius Soutier
Java2day 2013 : Modern workflows for javascript integration
Java2day 2013 : Modern workflows for javascript integration
Mite Mitreski
Wicket And Swing From One Codebase
Wicket And Swing From One Codebase
jcompagner
Angular Best Practices v2
Angular Best Practices v2
Henry Tao
React vs angular (mobile first battle)
React vs angular (mobile first battle)
Michael Haberman
GWTcon 2015 - Beyond GWT 3.0 Panic
GWTcon 2015 - Beyond GWT 3.0 Panic
Cristiano Costantini
Introduction to Angular 2
Introduction to Angular 2
Dawid Myslak
The evolution of Angular 2 @ AngularJS Munich Meetup #5
The evolution of Angular 2 @ AngularJS Munich Meetup #5
Johannes Weber
Creating "The Second Best Place on the Internet" with Spring Initializr
Creating "The Second Best Place on the Internet" with Spring Initializr
VMware Tanzu
Angular2
Angular2
Software Infrastructure
Muhammad azamuddin introduction-to-reactjs
Muhammad azamuddin introduction-to-reactjs
PHP Indonesia
Tech Talk on ReactJS
Tech Talk on ReactJS
Atlogys Technical Consulting
AngularJs advanced Topics
AngularJs advanced Topics
Amr Abd El Latief
What's hot
(20)
Gettings started with the superheroic JavaScript library AngularJS
Gettings started with the superheroic JavaScript library AngularJS
Fragments: Why, How, What For?
Fragments: Why, How, What For?
PPT on Angular 2 Development Tutorial
PPT on Angular 2 Development Tutorial
Front End Development for Back End Developers - Devoxx UK 2017
Front End Development for Back End Developers - Devoxx UK 2017
Angular
Angular
Bootiful Development with Spring Boot and React - RWX 2017
Bootiful Development with Spring Boot and React - RWX 2017
Angular.js - JS Camp UKraine 2013
Angular.js - JS Camp UKraine 2013
Intro to sbt-web
Intro to sbt-web
Java2day 2013 : Modern workflows for javascript integration
Java2day 2013 : Modern workflows for javascript integration
Wicket And Swing From One Codebase
Wicket And Swing From One Codebase
Angular Best Practices v2
Angular Best Practices v2
React vs angular (mobile first battle)
React vs angular (mobile first battle)
GWTcon 2015 - Beyond GWT 3.0 Panic
GWTcon 2015 - Beyond GWT 3.0 Panic
Introduction to Angular 2
Introduction to Angular 2
The evolution of Angular 2 @ AngularJS Munich Meetup #5
The evolution of Angular 2 @ AngularJS Munich Meetup #5
Creating "The Second Best Place on the Internet" with Spring Initializr
Creating "The Second Best Place on the Internet" with Spring Initializr
Angular2
Angular2
Muhammad azamuddin introduction-to-reactjs
Muhammad azamuddin introduction-to-reactjs
Tech Talk on ReactJS
Tech Talk on ReactJS
AngularJs advanced Topics
AngularJs advanced Topics
Similar to Atomic Designは「マルチ」で真価を発揮する
React basic by Yoav Amit, Wix
React basic by Yoav Amit, Wix
Chen Lerner
Comparing Angular and React JS for SPAs
Comparing Angular and React JS for SPAs
Jennifer Estrada
Front End Development for Back End Developers - vJUG24 2017
Front End Development for Back End Developers - vJUG24 2017
Matt Raible
Sitecore and Responsive Web Design
Sitecore and Responsive Web Design
ISITE Design is now Connective DX
JavaScript front end performance optimizations
JavaScript front end performance optimizations
Chris Love
AngularJS - The Next Big Thing?
AngularJS - The Next Big Thing?
Tom Hombergs
Web Components: The Future of Web Development is Here
Web Components: The Future of Web Development is Here
John Riviello
An Angular developer moving to React
An Angular developer moving to React
Souvik Basu
jQuery Mobile Deep Dive
jQuery Mobile Deep Dive
Troy Miles
Improving Your Selenium WebDriver Tests - Belgium testing days_2016
Improving Your Selenium WebDriver Tests - Belgium testing days_2016
Roy de Kleijn
Backbone.js
Backbone.js
Ivano Malavolta
Reconciling ReactJS as a View Layer Replacement (MidwestJS 2014)
Reconciling ReactJS as a View Layer Replacement (MidwestJS 2014)
Zach Lendon
MidwestJS 2014 Reconciling ReactJS as a View Layer Replacement
MidwestJS 2014 Reconciling ReactJS as a View Layer Replacement
Zach Lendon
React JS .NET
React JS .NET
Jennifer Estrada
Html5
Html5
Ben MacNeill
Backbone JS for mobile apps
Backbone JS for mobile apps
Ivano Malavolta
Web components - An Introduction
Web components - An Introduction
cherukumilli2
From MEAN to the MERN Stack
From MEAN to the MERN Stack
Troy Miles
PrettyFaces URLRewrite for Servlet & JavaEE @ Devoxx 2010
PrettyFaces URLRewrite for Servlet & JavaEE @ Devoxx 2010
Lincoln III
Maven ii
Maven ii
Sunil Komarapu
Similar to Atomic Designは「マルチ」で真価を発揮する
(20)
React basic by Yoav Amit, Wix
React basic by Yoav Amit, Wix
Comparing Angular and React JS for SPAs
Comparing Angular and React JS for SPAs
Front End Development for Back End Developers - vJUG24 2017
Front End Development for Back End Developers - vJUG24 2017
Sitecore and Responsive Web Design
Sitecore and Responsive Web Design
JavaScript front end performance optimizations
JavaScript front end performance optimizations
AngularJS - The Next Big Thing?
AngularJS - The Next Big Thing?
Web Components: The Future of Web Development is Here
Web Components: The Future of Web Development is Here
An Angular developer moving to React
An Angular developer moving to React
jQuery Mobile Deep Dive
jQuery Mobile Deep Dive
Improving Your Selenium WebDriver Tests - Belgium testing days_2016
Improving Your Selenium WebDriver Tests - Belgium testing days_2016
Backbone.js
Backbone.js
Reconciling ReactJS as a View Layer Replacement (MidwestJS 2014)
Reconciling ReactJS as a View Layer Replacement (MidwestJS 2014)
MidwestJS 2014 Reconciling ReactJS as a View Layer Replacement
MidwestJS 2014 Reconciling ReactJS as a View Layer Replacement
React JS .NET
React JS .NET
Html5
Html5
Backbone JS for mobile apps
Backbone JS for mobile apps
Web components - An Introduction
Web components - An Introduction
From MEAN to the MERN Stack
From MEAN to the MERN Stack
PrettyFaces URLRewrite for Servlet & JavaEE @ Devoxx 2010
PrettyFaces URLRewrite for Servlet & JavaEE @ Devoxx 2010
Maven ii
Maven ii
More from Yukiya Nakagawa
Androidの入門書を書いたときに気にしたこと #NDS57
Androidの入門書を書いたときに気にしたこと #NDS57
Yukiya Nakagawa
アグリノートにおけるGIS情報を活かした圃場・作付管理の取り組み @ FOSS4GJ
アグリノートにおけるGIS情報を活かした圃場・作付管理の取り組み @ FOSS4GJ
Yukiya Nakagawa
CSS in JSの話 #friday13json
CSS in JSの話 #friday13json
Yukiya Nakagawa
React Nativeはクロスプラットフォームモバイルアプリ開発の夢を見るか #DroidKaigi
React Nativeはクロスプラットフォームモバイルアプリ開発の夢を見るか #DroidKaigi
Yukiya Nakagawa
AndroidLint #DroidKaigi
AndroidLint #DroidKaigi
Yukiya Nakagawa
Android Lintを覚えてベテラン開発者に追いつこう #ndsmeetup
Android Lintを覚えてベテラン開発者に追いつこう #ndsmeetup
Yukiya Nakagawa
僕らのデータ同期プラクティス
僕らのデータ同期プラクティス
Yukiya Nakagawa
Android再入門 〜Eclipseのことは忘れろ〜
Android再入門 〜Eclipseのことは忘れろ〜
Yukiya Nakagawa
もう一度Kotlinの話をしよう #ndsmeetup4
もう一度Kotlinの話をしよう #ndsmeetup4
Yukiya Nakagawa
アグリノートを支える技術
アグリノートを支える技術
Yukiya Nakagawa
NDS36 Kotlin Cute
NDS36 Kotlin Cute
Yukiya Nakagawa
NDS36 Java7&Java8
NDS36 Java7&Java8
Yukiya Nakagawa
Coworking Business Forum in NIIGATA 2013
Coworking Business Forum in NIIGATA 2013
Yukiya Nakagawa
Niigata.rb#03
Niigata.rb#03
Yukiya Nakagawa
PechaKucha Niigata #3 2013.7.27
PechaKucha Niigata #3 2013.7.27
Yukiya Nakagawa
ぼくのかんがえたふつうのあんどろいどかいはつ
ぼくのかんがえたふつうのあんどろいどかいはつ
Yukiya Nakagawa
Androidで使えるJSON-Javaライブラリ
Androidで使えるJSON-Javaライブラリ
Yukiya Nakagawa
NFCLAB会津
NFCLAB会津
Yukiya Nakagawa
ぼくらの錬金術〜キメラの作り方〜
ぼくらの錬金術〜キメラの作り方〜
Yukiya Nakagawa
Action Bar Compat読んでみた
Action Bar Compat読んでみた
Yukiya Nakagawa
More from Yukiya Nakagawa
(20)
Androidの入門書を書いたときに気にしたこと #NDS57
Androidの入門書を書いたときに気にしたこと #NDS57
アグリノートにおけるGIS情報を活かした圃場・作付管理の取り組み @ FOSS4GJ
アグリノートにおけるGIS情報を活かした圃場・作付管理の取り組み @ FOSS4GJ
CSS in JSの話 #friday13json
CSS in JSの話 #friday13json
React Nativeはクロスプラットフォームモバイルアプリ開発の夢を見るか #DroidKaigi
React Nativeはクロスプラットフォームモバイルアプリ開発の夢を見るか #DroidKaigi
AndroidLint #DroidKaigi
AndroidLint #DroidKaigi
Android Lintを覚えてベテラン開発者に追いつこう #ndsmeetup
Android Lintを覚えてベテラン開発者に追いつこう #ndsmeetup
僕らのデータ同期プラクティス
僕らのデータ同期プラクティス
Android再入門 〜Eclipseのことは忘れろ〜
Android再入門 〜Eclipseのことは忘れろ〜
もう一度Kotlinの話をしよう #ndsmeetup4
もう一度Kotlinの話をしよう #ndsmeetup4
アグリノートを支える技術
アグリノートを支える技術
NDS36 Kotlin Cute
NDS36 Kotlin Cute
NDS36 Java7&Java8
NDS36 Java7&Java8
Coworking Business Forum in NIIGATA 2013
Coworking Business Forum in NIIGATA 2013
Niigata.rb#03
Niigata.rb#03
PechaKucha Niigata #3 2013.7.27
PechaKucha Niigata #3 2013.7.27
ぼくのかんがえたふつうのあんどろいどかいはつ
ぼくのかんがえたふつうのあんどろいどかいはつ
Androidで使えるJSON-Javaライブラリ
Androidで使えるJSON-Javaライブラリ
NFCLAB会津
NFCLAB会津
ぼくらの錬金術〜キメラの作り方〜
ぼくらの錬金術〜キメラの作り方〜
Action Bar Compat読んでみた
Action Bar Compat読んでみた
Recently uploaded
Slack Application Development 101 Slides
Slack Application Development 101 Slides
praypatel2
The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024
Rafal Los
Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024
The Digital Insurer
IAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI Solutions
Enterprise Knowledge
Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...
Enterprise Knowledge
GenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day Presentation
Michael W. Hawkins
Factors to Consider When Choosing Accounts Payable Services Providers.pptx
Factors to Consider When Choosing Accounts Payable Services Providers.pptx
Katpro Technologies
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
Neo4j
What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?
Antenna Manufacturer Coco
A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?
Igalia
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
apidays
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
Safe Software
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
Delhi Call girls
Automating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps Script
wesley chun
Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024
The Digital Insurer
Advantages of Hiring UIUX Design Service Providers for Your Business
Advantages of Hiring UIUX Design Service Providers for Your Business
Pixlogix Infotech
The Codex of Business Writing Software for Real-World Solutions 2.pptx
The Codex of Business Writing Software for Real-World Solutions 2.pptx
Malak Abu Hammad
How to convert PDF to text with Nanonets
How to convert PDF to text with Nanonets
naman860154
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Miguel Araújo
Histor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slide
vu2urc
Recently uploaded
(20)
Slack Application Development 101 Slides
Slack Application Development 101 Slides
The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024
Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024
IAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI Solutions
Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...
GenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day Presentation
Factors to Consider When Choosing Accounts Payable Services Providers.pptx
Factors to Consider When Choosing Accounts Payable Services Providers.pptx
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?
A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
Automating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps Script
Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024
Advantages of Hiring UIUX Design Service Providers for Your Business
Advantages of Hiring UIUX Design Service Providers for Your Business
The Codex of Business Writing Software for Real-World Solutions 2.pptx
The Codex of Business Writing Software for Real-World Solutions 2.pptx
How to convert PDF to text with Nanonets
How to convert PDF to text with Nanonets
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Histor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slide
Atomic Designは「マルチ」で真価を発揮する
1.
Atomic Design @Nkzn 2018.11.9 WCI
Tech Night #1
2.
• Atomic Design
Atomic Design • Atoms Molecules Organisms • Pages Template • React Native React Native for Web https://watercelldev.hatenablog.jp/entry/2018/07/18/122604
3.
Atomic Design
4.
※
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
Atomic Design
22.
23.
Atomic Design
24.
2
25.
26.
27.
28.
Atomic Design
29.
• Organisms • Molecules •
Atoms Pages Templates
30.
MOTTAINAI
31.
Atomic Design Organisms
32.
Pages Templates
33.
34.
A
35.
36.
37.
7 10
38.
39.
Web
40.
41.
42.
History React URL
43.
• • React Navigation • •
React Router
44.
45.
A
46.
B
47.
Pages Templates
48.
7 10
49.
Template
50.
51.
52.
Template const MobileTemplate =
(props) => ( <View> <View style={/* */}> {props.renderHeader()} </View> <View style={/* */}> {props.renderContent()} </View> </View> );
53.
7 Template const Tab7Template
= (props) => ( <View> <View style={/* */}> {props.renderHeader()} </View> <View style={/* 7 */}> {props.renderLeft()} </View> <View style={/* 7 */}> {props.renderRight()} </View> </View> );
54.
10 Template const Tab10Template
= (props) => ( <View> <View style={/* */}> {props.renderHeader()} </View> <View style={/* 10 */}> {props.renderLeft()} </View> <View style={/* 10 */}> {props.renderRight()} </View> </View> );
55.
Page import { Header,
Menu } from "./organisms"; const HogeMobilePage = (props) => ( <View style={{flex: 1}}> <MobileTemplate renderHeader={() => ( <Header navigateA={() => {/* */}}/> )} renderContent={() => ( <Menu navigateB={() => {/* */}}/> )}/> </View> );
56.
Page import { Header,
Menu, Content } from "./organisms"; const HogeTablet7Page = (props) => ( <View style={{flex: 1}}> <Tab7Template renderHeader={() => ( <Header navigateA={() => {/* */}}/> )} renderLeft={() => ( <Menu navigateB={() => {/* */}}/> )} renderRight={() => ( <Content navigateC={() => {/* */}}/> )}/> </View> );
57.
Page import { Header,
Menu, Content } from "./organisms"; const HogeTablet10Page = (props) => ( <View style={{flex: 1}}> <Tab10Template renderHeader={() => ( <Header navigateA={() => {/* */}}/> )} renderLeft={() => ( <Menu navigateB={() => {/* */}}/> )} renderRight={() => ( <Content navigateC={() => {/* */}}/> )}/> </View> );
58.
Template
59.
Pages
60.
61.
const HogePage =
(props) => ( <View style={{flex: 1}}> {/* Template */} </View> );
62.
Pages
63.
Pages • Template • Template
Redux • Pages
64.
Web
65.
Pages
66.
Pages props const HogeMobileXXXPage =
(props) => ( <View style={{flex: 1}}> <MobileTemplate renderHeader={() => ( <Header navigateA={() => {/* */}}/> )} renderContent={() => ( <Menu navigateB={() => {/* */}}/> )}/> </View> );
67.
Web const HogeMobileWebPage =
(props) => ( <View style={{flex: 1}}> <MobileTemplate renderHeader={() => ( <Header navigateA={() => {/* */}}/> )} renderContent={() => ( <Menu navigateB={() => { props.history.push("/content"); }}/> )}/> </View> );
68.
const HogeMobileNativePage =
(props) => ( <View style={{flex: 1}}> <MobileTemplate renderHeader={() => ( <Header navigateA={() => {/* */}}/> )} renderContent={() => ( <Menu navigateB={() => { props.navigation.navigate("ContentPage"); }}/> )}/> </View> );
69.
Pages • • • Pages
70.
Pages • Web • Template
Web •
71.
Pages
72.
Atomic Design
Download now