SlideShare une entreprise Scribd logo
1  sur  24
Télécharger pour lire hors ligne
Let's start React.js!
#iiofficecebu
At 1st
#iiofficecebu
Seito horiguchi
Front-End-Engineer
LIG.inc PH inc.
President / FEE
I like
+ Ramen
+ Manga
#iiofficecebu
Ajenda
1. What is React.js?
2. Let’s start! but…
3. My project
#iiofficecebu
1. What is React.js?
#iiofficecebu
#iiofficecebu
You can create Web application smartly!
#iiofficecebu
2. Let’s start! but…
#iiofficecebu
There is a long way to go before you start React.js …
#iiofficecebu
1. Library
2. ES6
3. JSX
#iiofficecebu
1. Library
#iiofficecebu
2. ES6
ES5 ES6
#iiofficecebu
https://babeljs.io/
https://babeljs.io/
https://babeljs.io/
3. JSX
#iiofficecebu
4. Browserify
http://browserify.org/
reactify
babelify
babel-preset-es2015
babel-preset-react …
#iiofficecebu
It’s so many…
#iiofficecebu
3. My project
#iiofficecebu
https://github.com/seito2014/react-starter
https://github.com/seito2014/react-sterter
You need only…
Node ver.4.4.7
npm ver.2.15.8 ↑
#iiofficecebu
Thanks!
#iiofficecebu

Contenu connexe

En vedette

レスポンシブWebデザインの基礎と,コーディング実習:先生小川 裕之
レスポンシブWebデザインの基礎と,コーディング実習:先生小川 裕之レスポンシブWebデザインの基礎と,コーディング実習:先生小川 裕之
レスポンシブWebデザインの基礎と,コーディング実習:先生小川 裕之schoowebcampus
 
今日から使える! HTML/CSS/JSの シンプルテクニック15選
今日から使える! HTML/CSS/JSの シンプルテクニック15選今日から使える! HTML/CSS/JSの シンプルテクニック15選
今日から使える! HTML/CSS/JSの シンプルテクニック15選Horiguchi Seito
 
Css Architecture for the future 未来を見据えるCSS設計
Css Architecture for the future 未来を見据えるCSS設計Css Architecture for the future 未来を見据えるCSS設計
Css Architecture for the future 未来を見据えるCSS設計Horiguchi Seito
 
HTML5など社内勉強会 Vol.1 - HTML, CSS, HTML5
HTML5など社内勉強会 Vol.1 - HTML, CSS, HTML5HTML5など社内勉強会 Vol.1 - HTML, CSS, HTML5
HTML5など社内勉強会 Vol.1 - HTML, CSS, HTML5George Harada
 
CSSフレームワークとCMS+RWDテンプレでレスポンシブWebデザインサイトを構築しよう
CSSフレームワークとCMS+RWDテンプレでレスポンシブWebデザインサイトを構築しようCSSフレームワークとCMS+RWDテンプレでレスポンシブWebデザインサイトを構築しよう
CSSフレームワークとCMS+RWDテンプレでレスポンシブWebデザインサイトを構築しようMasayuki Abe
 
超初心者でも大丈夫!AngularJSでフォームページをちょっとリッチに改造してみよう
超初心者でも大丈夫!AngularJSでフォームページをちょっとリッチに改造してみよう超初心者でも大丈夫!AngularJSでフォームページをちょっとリッチに改造してみよう
超初心者でも大丈夫!AngularJSでフォームページをちょっとリッチに改造してみようHoriguchi Seito
 
UX白書には本当は何が書かれているか
UX白書には本当は何が書かれているかUX白書には本当は何が書かれているか
UX白書には本当は何が書かれているかMasaya Ando
 

En vedette (7)

レスポンシブWebデザインの基礎と,コーディング実習:先生小川 裕之
レスポンシブWebデザインの基礎と,コーディング実習:先生小川 裕之レスポンシブWebデザインの基礎と,コーディング実習:先生小川 裕之
レスポンシブWebデザインの基礎と,コーディング実習:先生小川 裕之
 
今日から使える! HTML/CSS/JSの シンプルテクニック15選
今日から使える! HTML/CSS/JSの シンプルテクニック15選今日から使える! HTML/CSS/JSの シンプルテクニック15選
今日から使える! HTML/CSS/JSの シンプルテクニック15選
 
Css Architecture for the future 未来を見据えるCSS設計
Css Architecture for the future 未来を見据えるCSS設計Css Architecture for the future 未来を見据えるCSS設計
Css Architecture for the future 未来を見据えるCSS設計
 
HTML5など社内勉強会 Vol.1 - HTML, CSS, HTML5
HTML5など社内勉強会 Vol.1 - HTML, CSS, HTML5HTML5など社内勉強会 Vol.1 - HTML, CSS, HTML5
HTML5など社内勉強会 Vol.1 - HTML, CSS, HTML5
 
CSSフレームワークとCMS+RWDテンプレでレスポンシブWebデザインサイトを構築しよう
CSSフレームワークとCMS+RWDテンプレでレスポンシブWebデザインサイトを構築しようCSSフレームワークとCMS+RWDテンプレでレスポンシブWebデザインサイトを構築しよう
CSSフレームワークとCMS+RWDテンプレでレスポンシブWebデザインサイトを構築しよう
 
超初心者でも大丈夫!AngularJSでフォームページをちょっとリッチに改造してみよう
超初心者でも大丈夫!AngularJSでフォームページをちょっとリッチに改造してみよう超初心者でも大丈夫!AngularJSでフォームページをちょっとリッチに改造してみよう
超初心者でも大丈夫!AngularJSでフォームページをちょっとリッチに改造してみよう
 
UX白書には本当は何が書かれているか
UX白書には本当は何が書かれているかUX白書には本当は何が書かれているか
UX白書には本当は何が書かれているか
 

Similaire à Lets start-react

What's Cumiki and Why I Made. Tokyo Rails #27 Lightning Talk @Cookpad, Inc
What's Cumiki and Why I Made. Tokyo Rails #27 Lightning Talk @Cookpad, IncWhat's Cumiki and Why I Made. Tokyo Rails #27 Lightning Talk @Cookpad, Inc
What's Cumiki and Why I Made. Tokyo Rails #27 Lightning Talk @Cookpad, IncRyo Suzuki
 
Variable , Array , Dictionary of swift -IOS Development - a hub for beginner
Variable , Array , Dictionary of swift -IOS Development - a hub for beginnerVariable , Array , Dictionary of swift -IOS Development - a hub for beginner
Variable , Array , Dictionary of swift -IOS Development - a hub for beginnerVikrant Arya
 
DevOps at Tokopedia - DevOps Indonesia
DevOps at Tokopedia - DevOps IndonesiaDevOps at Tokopedia - DevOps Indonesia
DevOps at Tokopedia - DevOps IndonesiaKhairul Zebua
 
An Introduction to ReactNative
An Introduction to ReactNativeAn Introduction to ReactNative
An Introduction to ReactNativeMichał Taberski
 
DevOps at Tokopedia @DevOps Indonesia Meetup, July 2018
DevOps at Tokopedia @DevOps Indonesia Meetup, July 2018DevOps at Tokopedia @DevOps Indonesia Meetup, July 2018
DevOps at Tokopedia @DevOps Indonesia Meetup, July 2018DevOps Indonesia
 
FirefoxOs App Development by Adam
FirefoxOs App Development by Adam FirefoxOs App Development by Adam
FirefoxOs App Development by Adam Mohammed Adam
 
Common usage of Sphinx
Common usage of SphinxCommon usage of Sphinx
Common usage of SphinxGo Yamada
 
Thinking in Components
Thinking in ComponentsThinking in Components
Thinking in ComponentsFITC
 
Web Developer Course Induction day
Web Developer Course  Induction dayWeb Developer Course  Induction day
Web Developer Course Induction daycheckingit
 
TOC Workshop 2013
TOC Workshop 2013TOC Workshop 2013
TOC Workshop 2013Haig Armen
 
開発を加速させるRetty式チーム開発術 Reloaded
開発を加速させるRetty式チーム開発術 Reloaded開発を加速させるRetty式チーム開発術 Reloaded
開発を加速させるRetty式チーム開発術 ReloadedYoichiro Sakurai
 
Single Page Web Apps
Single Page Web AppsSingle Page Web Apps
Single Page Web AppsJan Monschke
 
How I ignored, discovered then loved design patterns - Abdelkader Bouadjadja
How I ignored, discovered then loved design patterns - Abdelkader BouadjadjaHow I ignored, discovered then loved design patterns - Abdelkader Bouadjadja
How I ignored, discovered then loved design patterns - Abdelkader BouadjadjaAbdelkader Bouadjadja
 
Mobprogramming on React.js
Mobprogramming on React.jsMobprogramming on React.js
Mobprogramming on React.jsRohan Daxini
 
UX Fluency for a better Front End
UX Fluency for a better Front End  UX Fluency for a better Front End
UX Fluency for a better Front End Monika Piotrowicz
 
User Experience for WordPress Platforms
User Experience for WordPress PlatformsUser Experience for WordPress Platforms
User Experience for WordPress PlatformsCody Landefeld
 

Similaire à Lets start-react (20)

What's Cumiki and Why I Made. Tokyo Rails #27 Lightning Talk @Cookpad, Inc
What's Cumiki and Why I Made. Tokyo Rails #27 Lightning Talk @Cookpad, IncWhat's Cumiki and Why I Made. Tokyo Rails #27 Lightning Talk @Cookpad, Inc
What's Cumiki and Why I Made. Tokyo Rails #27 Lightning Talk @Cookpad, Inc
 
Variable , Array , Dictionary of swift -IOS Development - a hub for beginner
Variable , Array , Dictionary of swift -IOS Development - a hub for beginnerVariable , Array , Dictionary of swift -IOS Development - a hub for beginner
Variable , Array , Dictionary of swift -IOS Development - a hub for beginner
 
DevOps at Tokopedia - DevOps Indonesia
DevOps at Tokopedia - DevOps IndonesiaDevOps at Tokopedia - DevOps Indonesia
DevOps at Tokopedia - DevOps Indonesia
 
An Introduction to ReactNative
An Introduction to ReactNativeAn Introduction to ReactNative
An Introduction to ReactNative
 
DevOps at Tokopedia @DevOps Indonesia Meetup, July 2018
DevOps at Tokopedia @DevOps Indonesia Meetup, July 2018DevOps at Tokopedia @DevOps Indonesia Meetup, July 2018
DevOps at Tokopedia @DevOps Indonesia Meetup, July 2018
 
FirefoxOs App Development by Adam
FirefoxOs App Development by Adam FirefoxOs App Development by Adam
FirefoxOs App Development by Adam
 
Common usage of Sphinx
Common usage of SphinxCommon usage of Sphinx
Common usage of Sphinx
 
Thinking in Components
Thinking in ComponentsThinking in Components
Thinking in Components
 
How to build websites FAST!!!
How to build websites FAST!!!How to build websites FAST!!!
How to build websites FAST!!!
 
Large Scale SPA
Large Scale SPALarge Scale SPA
Large Scale SPA
 
Web Developer Course Induction day
Web Developer Course  Induction dayWeb Developer Course  Induction day
Web Developer Course Induction day
 
TOC Workshop 2013
TOC Workshop 2013TOC Workshop 2013
TOC Workshop 2013
 
開発を加速させるRetty式チーム開発術 Reloaded
開発を加速させるRetty式チーム開発術 Reloaded開発を加速させるRetty式チーム開発術 Reloaded
開発を加速させるRetty式チーム開発術 Reloaded
 
Single Page Web Apps
Single Page Web AppsSingle Page Web Apps
Single Page Web Apps
 
How I ignored, discovered then loved design patterns - Abdelkader Bouadjadja
How I ignored, discovered then loved design patterns - Abdelkader BouadjadjaHow I ignored, discovered then loved design patterns - Abdelkader Bouadjadja
How I ignored, discovered then loved design patterns - Abdelkader Bouadjadja
 
Mobprogramming on React.js
Mobprogramming on React.jsMobprogramming on React.js
Mobprogramming on React.js
 
UX Fluency for a better Front End
UX Fluency for a better Front End  UX Fluency for a better Front End
UX Fluency for a better Front End
 
An intro to Eleventy
An intro to EleventyAn intro to Eleventy
An intro to Eleventy
 
Ember
EmberEmber
Ember
 
User Experience for WordPress Platforms
User Experience for WordPress PlatformsUser Experience for WordPress Platforms
User Experience for WordPress Platforms
 

Dernier

ICT role in 21st century education and its challenges
ICT role in 21st century education and its challengesICT role in 21st century education and its challenges
ICT role in 21st century education and its challengesrafiqahmad00786416
 
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, AdobeApidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobeapidays
 
Elevate Developer Efficiency & build GenAI Application with Amazon Q​
Elevate Developer Efficiency & build GenAI Application with Amazon Q​Elevate Developer Efficiency & build GenAI Application with Amazon Q​
Elevate Developer Efficiency & build GenAI Application with Amazon Q​Bhuvaneswari Subramani
 
Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...
Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...
Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...apidays
 
Architecting Cloud Native Applications
Architecting Cloud Native ApplicationsArchitecting Cloud Native Applications
Architecting Cloud Native ApplicationsWSO2
 
Vector Search -An Introduction in Oracle Database 23ai.pptx
Vector Search -An Introduction in Oracle Database 23ai.pptxVector Search -An Introduction in Oracle Database 23ai.pptx
Vector Search -An Introduction in Oracle Database 23ai.pptxRemote DBA Services
 
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWEREMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWERMadyBayot
 
Exploring Multimodal Embeddings with Milvus
Exploring Multimodal Embeddings with MilvusExploring Multimodal Embeddings with Milvus
Exploring Multimodal Embeddings with MilvusZilliz
 
DBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor PresentationDBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor PresentationDropbox
 
Six Myths about Ontologies: The Basics of Formal Ontology
Six Myths about Ontologies: The Basics of Formal OntologySix Myths about Ontologies: The Basics of Formal Ontology
Six Myths about Ontologies: The Basics of Formal Ontologyjohnbeverley2021
 
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ..."I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...Zilliz
 
Artificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : UncertaintyArtificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : UncertaintyKhushali Kathiriya
 
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024Victor Rentea
 
Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businesspanagenda
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FMESafe Software
 
WSO2's API Vision: Unifying Control, Empowering Developers
WSO2's API Vision: Unifying Control, Empowering DevelopersWSO2's API Vision: Unifying Control, Empowering Developers
WSO2's API Vision: Unifying Control, Empowering DevelopersWSO2
 
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...Orbitshub
 
Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfBoost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfsudhanshuwaghmare1
 
CNIC Information System with Pakdata Cf In Pakistan
CNIC Information System with Pakdata Cf In PakistanCNIC Information System with Pakdata Cf In Pakistan
CNIC Information System with Pakdata Cf In Pakistandanishmna97
 
MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024MIND CTI
 

Dernier (20)

ICT role in 21st century education and its challenges
ICT role in 21st century education and its challengesICT role in 21st century education and its challenges
ICT role in 21st century education and its challenges
 
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, AdobeApidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
 
Elevate Developer Efficiency & build GenAI Application with Amazon Q​
Elevate Developer Efficiency & build GenAI Application with Amazon Q​Elevate Developer Efficiency & build GenAI Application with Amazon Q​
Elevate Developer Efficiency & build GenAI Application with Amazon Q​
 
Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...
Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...
Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...
 
Architecting Cloud Native Applications
Architecting Cloud Native ApplicationsArchitecting Cloud Native Applications
Architecting Cloud Native Applications
 
Vector Search -An Introduction in Oracle Database 23ai.pptx
Vector Search -An Introduction in Oracle Database 23ai.pptxVector Search -An Introduction in Oracle Database 23ai.pptx
Vector Search -An Introduction in Oracle Database 23ai.pptx
 
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWEREMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
 
Exploring Multimodal Embeddings with Milvus
Exploring Multimodal Embeddings with MilvusExploring Multimodal Embeddings with Milvus
Exploring Multimodal Embeddings with Milvus
 
DBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor PresentationDBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor Presentation
 
Six Myths about Ontologies: The Basics of Formal Ontology
Six Myths about Ontologies: The Basics of Formal OntologySix Myths about Ontologies: The Basics of Formal Ontology
Six Myths about Ontologies: The Basics of Formal Ontology
 
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ..."I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...
 
Artificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : UncertaintyArtificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : Uncertainty
 
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
 
Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire business
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
 
WSO2's API Vision: Unifying Control, Empowering Developers
WSO2's API Vision: Unifying Control, Empowering DevelopersWSO2's API Vision: Unifying Control, Empowering Developers
WSO2's API Vision: Unifying Control, Empowering Developers
 
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
 
Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfBoost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdf
 
CNIC Information System with Pakdata Cf In Pakistan
CNIC Information System with Pakdata Cf In PakistanCNIC Information System with Pakdata Cf In Pakistan
CNIC Information System with Pakdata Cf In Pakistan
 
MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024