SlideShare a Scribd company logo
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, Inc
Ryo 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 beginner
Vikrant Arya
 
DevOps at Tokopedia - DevOps Indonesia
DevOps at Tokopedia - DevOps IndonesiaDevOps at Tokopedia - DevOps Indonesia
DevOps at Tokopedia - DevOps Indonesia
Khairul Zebua
 
An Introduction to ReactNative
An Introduction to ReactNativeAn Introduction to ReactNative
An Introduction to ReactNative
Michał 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 2018
DevOps 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 Sphinx
Go Yamada
 
Thinking in Components
Thinking in ComponentsThinking in Components
Thinking in Components
FITC
 
How to build websites FAST!!!
How to build websites FAST!!!How to build websites FAST!!!
How to build websites FAST!!!
Giedrius Jaloveckas
 
Large Scale SPA
Large Scale SPALarge Scale SPA
Large Scale SPA
Reza Moaiandin
 
Web Developer Course Induction day
Web Developer Course  Induction dayWeb Developer Course  Induction day
Web Developer Course Induction day
checkingit
 
TOC Workshop 2013
TOC Workshop 2013TOC Workshop 2013
TOC Workshop 2013
Haig Armen
 
開発を加速させるRetty式チーム開発術 Reloaded
開発を加速させるRetty式チーム開発術 Reloaded開発を加速させるRetty式チーム開発術 Reloaded
開発を加速させるRetty式チーム開発術 Reloaded
Yoichiro Sakurai
 
Single Page Web Apps
Single Page Web AppsSingle Page Web Apps
Single Page Web Apps
Jan 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 Bouadjadja
Abdelkader Bouadjadja
 
Mobprogramming on React.js
Mobprogramming on React.jsMobprogramming on React.js
Mobprogramming on React.js
Rohan 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
 
An intro to Eleventy
An intro to EleventyAn intro to Eleventy
An intro to Eleventy
Luciano Mammino
 
Ember
EmberEmber
User Experience for WordPress Platforms
User Experience for WordPress PlatformsUser Experience for WordPress Platforms
User Experience for WordPress Platforms
Cody 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

Astute Business Solutions | Oracle Cloud Partner |
Astute Business Solutions | Oracle Cloud Partner |Astute Business Solutions | Oracle Cloud Partner |
Astute Business Solutions | Oracle Cloud Partner |
AstuteBusiness
 
TrustArc Webinar - 2024 Global Privacy Survey
TrustArc Webinar - 2024 Global Privacy SurveyTrustArc Webinar - 2024 Global Privacy Survey
TrustArc Webinar - 2024 Global Privacy Survey
TrustArc
 
Driving Business Innovation: Latest Generative AI Advancements & Success Story
Driving Business Innovation: Latest Generative AI Advancements & Success StoryDriving Business Innovation: Latest Generative AI Advancements & Success Story
Driving Business Innovation: Latest Generative AI Advancements & Success Story
Safe Software
 
5th LF Energy Power Grid Model Meet-up Slides
5th LF Energy Power Grid Model Meet-up Slides5th LF Energy Power Grid Model Meet-up Slides
5th LF Energy Power Grid Model Meet-up Slides
DanBrown980551
 
Programming Foundation Models with DSPy - Meetup Slides
Programming Foundation Models with DSPy - Meetup SlidesProgramming Foundation Models with DSPy - Meetup Slides
Programming Foundation Models with DSPy - Meetup Slides
Zilliz
 
“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...
“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...
“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...
Edge AI and Vision Alliance
 
HCL Notes and Domino License Cost Reduction in the World of DLAU
HCL Notes and Domino License Cost Reduction in the World of DLAUHCL Notes and Domino License Cost Reduction in the World of DLAU
HCL Notes and Domino License Cost Reduction in the World of DLAU
panagenda
 
AWS Cloud Cost Optimization Presentation.pptx
AWS Cloud Cost Optimization Presentation.pptxAWS Cloud Cost Optimization Presentation.pptx
AWS Cloud Cost Optimization Presentation.pptx
HarisZaheer8
 
June Patch Tuesday
June Patch TuesdayJune Patch Tuesday
June Patch Tuesday
Ivanti
 
FREE A4 Cyber Security Awareness Posters-Social Engineering part 3
FREE A4 Cyber Security Awareness  Posters-Social Engineering part 3FREE A4 Cyber Security Awareness  Posters-Social Engineering part 3
FREE A4 Cyber Security Awareness Posters-Social Engineering part 3
Data Hops
 
Digital Marketing Trends in 2024 | Guide for Staying Ahead
Digital Marketing Trends in 2024 | Guide for Staying AheadDigital Marketing Trends in 2024 | Guide for Staying Ahead
Digital Marketing Trends in 2024 | Guide for Staying Ahead
Wask
 
Overcoming the PLG Trap: Lessons from Canva's Head of Sales & Head of EMEA Da...
Overcoming the PLG Trap: Lessons from Canva's Head of Sales & Head of EMEA Da...Overcoming the PLG Trap: Lessons from Canva's Head of Sales & Head of EMEA Da...
Overcoming the PLG Trap: Lessons from Canva's Head of Sales & Head of EMEA Da...
saastr
 
Dandelion Hashtable: beyond billion requests per second on a commodity server
Dandelion Hashtable: beyond billion requests per second on a commodity serverDandelion Hashtable: beyond billion requests per second on a commodity server
Dandelion Hashtable: beyond billion requests per second on a commodity server
Antonios Katsarakis
 
Serial Arm Control in Real Time Presentation
Serial Arm Control in Real Time PresentationSerial Arm Control in Real Time Presentation
Serial Arm Control in Real Time Presentation
tolgahangng
 
GNSS spoofing via SDR (Criptored Talks 2024)
GNSS spoofing via SDR (Criptored Talks 2024)GNSS spoofing via SDR (Criptored Talks 2024)
GNSS spoofing via SDR (Criptored Talks 2024)
Javier Junquera
 
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdfHow to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
Chart Kalyan
 
dbms calicut university B. sc Cs 4th sem.pdf
dbms  calicut university B. sc Cs 4th sem.pdfdbms  calicut university B. sc Cs 4th sem.pdf
dbms calicut university B. sc Cs 4th sem.pdf
Shinana2
 
WeTestAthens: Postman's AI & Automation Techniques
WeTestAthens: Postman's AI & Automation TechniquesWeTestAthens: Postman's AI & Automation Techniques
WeTestAthens: Postman's AI & Automation Techniques
Postman
 
GraphRAG for Life Science to increase LLM accuracy
GraphRAG for Life Science to increase LLM accuracyGraphRAG for Life Science to increase LLM accuracy
GraphRAG for Life Science to increase LLM accuracy
Tomaz Bratanic
 
Azure API Management to expose backend services securely
Azure API Management to expose backend services securelyAzure API Management to expose backend services securely
Azure API Management to expose backend services securely
Dinusha Kumarasiri
 

Recently uploaded (20)

Astute Business Solutions | Oracle Cloud Partner |
Astute Business Solutions | Oracle Cloud Partner |Astute Business Solutions | Oracle Cloud Partner |
Astute Business Solutions | Oracle Cloud Partner |
 
TrustArc Webinar - 2024 Global Privacy Survey
TrustArc Webinar - 2024 Global Privacy SurveyTrustArc Webinar - 2024 Global Privacy Survey
TrustArc Webinar - 2024 Global Privacy Survey
 
Driving Business Innovation: Latest Generative AI Advancements & Success Story
Driving Business Innovation: Latest Generative AI Advancements & Success StoryDriving Business Innovation: Latest Generative AI Advancements & Success Story
Driving Business Innovation: Latest Generative AI Advancements & Success Story
 
5th LF Energy Power Grid Model Meet-up Slides
5th LF Energy Power Grid Model Meet-up Slides5th LF Energy Power Grid Model Meet-up Slides
5th LF Energy Power Grid Model Meet-up Slides
 
Programming Foundation Models with DSPy - Meetup Slides
Programming Foundation Models with DSPy - Meetup SlidesProgramming Foundation Models with DSPy - Meetup Slides
Programming Foundation Models with DSPy - Meetup Slides
 
“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...
“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...
“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...
 
HCL Notes and Domino License Cost Reduction in the World of DLAU
HCL Notes and Domino License Cost Reduction in the World of DLAUHCL Notes and Domino License Cost Reduction in the World of DLAU
HCL Notes and Domino License Cost Reduction in the World of DLAU
 
AWS Cloud Cost Optimization Presentation.pptx
AWS Cloud Cost Optimization Presentation.pptxAWS Cloud Cost Optimization Presentation.pptx
AWS Cloud Cost Optimization Presentation.pptx
 
June Patch Tuesday
June Patch TuesdayJune Patch Tuesday
June Patch Tuesday
 
FREE A4 Cyber Security Awareness Posters-Social Engineering part 3
FREE A4 Cyber Security Awareness  Posters-Social Engineering part 3FREE A4 Cyber Security Awareness  Posters-Social Engineering part 3
FREE A4 Cyber Security Awareness Posters-Social Engineering part 3
 
Digital Marketing Trends in 2024 | Guide for Staying Ahead
Digital Marketing Trends in 2024 | Guide for Staying AheadDigital Marketing Trends in 2024 | Guide for Staying Ahead
Digital Marketing Trends in 2024 | Guide for Staying Ahead
 
Overcoming the PLG Trap: Lessons from Canva's Head of Sales & Head of EMEA Da...
Overcoming the PLG Trap: Lessons from Canva's Head of Sales & Head of EMEA Da...Overcoming the PLG Trap: Lessons from Canva's Head of Sales & Head of EMEA Da...
Overcoming the PLG Trap: Lessons from Canva's Head of Sales & Head of EMEA Da...
 
Dandelion Hashtable: beyond billion requests per second on a commodity server
Dandelion Hashtable: beyond billion requests per second on a commodity serverDandelion Hashtable: beyond billion requests per second on a commodity server
Dandelion Hashtable: beyond billion requests per second on a commodity server
 
Serial Arm Control in Real Time Presentation
Serial Arm Control in Real Time PresentationSerial Arm Control in Real Time Presentation
Serial Arm Control in Real Time Presentation
 
GNSS spoofing via SDR (Criptored Talks 2024)
GNSS spoofing via SDR (Criptored Talks 2024)GNSS spoofing via SDR (Criptored Talks 2024)
GNSS spoofing via SDR (Criptored Talks 2024)
 
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdfHow to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
 
dbms calicut university B. sc Cs 4th sem.pdf
dbms  calicut university B. sc Cs 4th sem.pdfdbms  calicut university B. sc Cs 4th sem.pdf
dbms calicut university B. sc Cs 4th sem.pdf
 
WeTestAthens: Postman's AI & Automation Techniques
WeTestAthens: Postman's AI & Automation TechniquesWeTestAthens: Postman's AI & Automation Techniques
WeTestAthens: Postman's AI & Automation Techniques
 
GraphRAG for Life Science to increase LLM accuracy
GraphRAG for Life Science to increase LLM accuracyGraphRAG for Life Science to increase LLM accuracy
GraphRAG for Life Science to increase LLM accuracy
 
Azure API Management to expose backend services securely
Azure API Management to expose backend services securelyAzure API Management to expose backend services securely
Azure API Management to expose backend services securely