SlideShare a Scribd company logo
1 of 24
Download to read offline
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

More Related Content

Viewers also liked

レスポンシブ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
 

Viewers also liked (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白書には本当は何が書かれているか
 

Similar to 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
 

Similar to 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
 

Recently uploaded

TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law DevelopmentsTrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law DevelopmentsTrustArc
 
Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024The Digital Insurer
 
GenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdfGenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdflior mazor
 
Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024The Digital Insurer
 
HTML Injection Attacks: Impact and Mitigation Strategies
HTML Injection Attacks: Impact and Mitigation StrategiesHTML Injection Attacks: Impact and Mitigation Strategies
HTML Injection Attacks: Impact and Mitigation StrategiesBoston Institute of Analytics
 
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
 
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin WoodPolkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin WoodJuan lago vázquez
 
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdfUnderstanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdfUK Journal
 
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...Martijn de Jong
 
Boost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivityBoost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivityPrincipled Technologies
 
Scaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organizationScaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organizationRadu Cotescu
 
Strategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a FresherStrategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a FresherRemote DBA Services
 
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProduct Anonymous
 
presentation ICT roal in 21st century education
presentation ICT roal in 21st century educationpresentation ICT roal in 21st century education
presentation ICT roal in 21st century educationjfdjdjcjdnsjd
 
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
 
Deploy with confidence: VMware Cloud Foundation 5.1 on next gen Dell PowerEdg...
Deploy with confidence: VMware Cloud Foundation 5.1 on next gen Dell PowerEdg...Deploy with confidence: VMware Cloud Foundation 5.1 on next gen Dell PowerEdg...
Deploy with confidence: VMware Cloud Foundation 5.1 on next gen Dell PowerEdg...Principled Technologies
 
AWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of TerraformAWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of TerraformAndrey Devyatkin
 
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
 
Artificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : UncertaintyArtificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : UncertaintyKhushali Kathiriya
 

Recently uploaded (20)

TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law DevelopmentsTrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
 
Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024
 
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
 
GenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdfGenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdf
 
Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024
 
HTML Injection Attacks: Impact and Mitigation Strategies
HTML Injection Attacks: Impact and Mitigation StrategiesHTML Injection Attacks: Impact and Mitigation Strategies
HTML Injection Attacks: Impact and Mitigation Strategies
 
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
 
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin WoodPolkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
 
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdfUnderstanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
 
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...
 
Boost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivityBoost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivity
 
Scaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organizationScaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organization
 
Strategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a FresherStrategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a Fresher
 
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
 
presentation ICT roal in 21st century education
presentation ICT roal in 21st century educationpresentation ICT roal in 21st century education
presentation ICT roal in 21st century education
 
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
 
Deploy with confidence: VMware Cloud Foundation 5.1 on next gen Dell PowerEdg...
Deploy with confidence: VMware Cloud Foundation 5.1 on next gen Dell PowerEdg...Deploy with confidence: VMware Cloud Foundation 5.1 on next gen Dell PowerEdg...
Deploy with confidence: VMware Cloud Foundation 5.1 on next gen Dell PowerEdg...
 
AWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of TerraformAWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of Terraform
 
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
 
Artificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : UncertaintyArtificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : Uncertainty