SlideShare ist ein Scribd-Unternehmen logo
1 von 24
Downloaden Sie, um offline zu lesen
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

Weitere ähnliche Inhalte

Andere mochten auch

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

Andere mochten auch (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白書には本当は何が書かれているか
 

Ähnlich wie 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
 

Ähnlich wie 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
 

Kürzlich hochgeladen

Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)wesley chun
 
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
 
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...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
 
Handwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed textsHandwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed textsMaria Levchenko
 
Automating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps ScriptAutomating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps Scriptwesley chun
 
Tech Trends Report 2024 Future Today Institute.pdf
Tech Trends Report 2024 Future Today Institute.pdfTech Trends Report 2024 Future Today Institute.pdf
Tech Trends Report 2024 Future Today Institute.pdfhans926745
 
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
 
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProduct Anonymous
 
Exploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone ProcessorsExploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone Processorsdebabhi2
 
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
 
Developing An App To Navigate The Roads of Brazil
Developing An App To Navigate The Roads of BrazilDeveloping An App To Navigate The Roads of Brazil
Developing An App To Navigate The Roads of BrazilV3cube
 
GenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdfGenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdflior mazor
 
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
 
Data Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonData Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonAnna Loughnan Colquhoun
 
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 2024The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024Rafal Los
 
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024The Digital Insurer
 
Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...apidays
 
GenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day PresentationGenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day PresentationMichael W. Hawkins
 
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024The Digital Insurer
 

Kürzlich hochgeladen (20)

Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)
 
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
 
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
 
Handwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed textsHandwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed texts
 
Automating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps ScriptAutomating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps Script
 
Tech Trends Report 2024 Future Today Institute.pdf
Tech Trends Report 2024 Future Today Institute.pdfTech Trends Report 2024 Future Today Institute.pdf
Tech Trends Report 2024 Future Today Institute.pdf
 
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
 
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
 
Exploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone ProcessorsExploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone Processors
 
Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024
 
Developing An App To Navigate The Roads of Brazil
Developing An App To Navigate The Roads of BrazilDeveloping An App To Navigate The Roads of Brazil
Developing An App To Navigate The Roads of Brazil
 
+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
 
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
 
Data Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonData Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt Robison
 
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 2024The 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
 
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024
 
Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...
 
GenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day PresentationGenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day Presentation
 
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024