Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Introduction to React
Search
Allan Chua
January 29, 2022
Technology
0
100
Introduction to React
A short introduction to react
Allan Chua
January 29, 2022
Tweet
Share
More Decks by Allan Chua
See All by Allan Chua
Defying Serverless API Constraints (API Days 2025)
allanchua101
0
46
Defying Serverless Constraints: Real-life Serverless Workarounds
allanchua101
0
78
Sneak Peek at Kali Linux
allanchua101
0
170
Node JS for Architects Part 1
allanchua101
0
300
Traditional, N-Tier & Microservices
allanchua101
0
110
Things You Need to Know to Become a Serverless API Ninja
allanchua101
1
870
Ocelot Pluggable Gateway
allanchua101
0
1.5k
API Gateway in a Nutshell 2019
allanchua101
0
1.5k
JavaScript API Proxy Pattern
allanchua101
0
610
Other Decks in Technology
See All in Technology
【CEDEC2025】大規模言語モデルを活用したゲーム内会話パートのスクリプト作成支援への取り組み
cygames
PRO
1
540
みんなのSRE 〜チーム全員でのSRE活動にするための4つの取り組み〜
kakehashi
PRO
2
110
テキストからの実世界知能の実現に向けて
sumoai
0
110
風が吹けばWHOISが使えなくなる~なぜWHOIS・RDAPはサーバー証明書のメール認証に使えなくなったのか~
orangemorishita
7
1.3k
バクラクによるコーポレート業務の自動運転 #BetAIDay
layerx
PRO
0
100
AI によるドキュメント処理を加速するためのOCR 結果の永続化と再利用戦略
tomoaki25
0
230
手動からの解放!!Strands Agents で実現する総合テスト自動化
ideaws
3
420
生成AI時代におけるAI・機械学習技術を用いたプロダクト開発の深化と進化 #BetAIDay
layerx
PRO
0
120
オブザーバビリティプラットフォーム開発におけるオブザーバビリティとの向き合い / Hatena Engineer Seminar #34 オブザーバビリティの実現と運用編
arthur1
0
200
株式会社島津製作所_研究開発(集団協業と知的生産)の現場を支える、OSS知識基盤システムの導入
akahane92
1
1.3k
Vision Language Modelと自動運転AIの最前線_20250730
yuyamaguchi
2
880
興味の胞子を育て 業務と技術に広がる”きのこ力”
fumiyasac0921
0
440
Featured
See All Featured
GraphQLとの向き合い方2022年版
quramy
49
14k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
The Cost Of JavaScript in 2023
addyosmani
51
8.7k
Practical Orchestrator
shlominoach
190
11k
Balancing Empowerment & Direction
lara
1
510
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
110
19k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
47
9.6k
Speed Design
sergeychernyshev
32
1k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
Designing for Performance
lara
610
69k
GitHub's CSS Performance
jonrohan
1031
460k
The Straight Up "How To Draw Better" Workshop
denniskardys
235
140k
Transcript
An Introduction to Chua Allan Gabriel Louis Valencia React JS
Table of Contents • What is React • Supported Platforms
• Origin / History • Core Philosophy • Why react • Pre-requisites • Popular Tools • UI Frameworks • How it differentiates with Vue & Angular • How to create a project • Basic Usage • Demo App
Did you know how they flew it?
Did you know how they flew it?
What is React JS? A JavaScript library for building user
interfaces
Supported Platforms Web Mobile Desktop
Origin / History Jordan Walke Software Engineer Worked at Facebook
Created React Scaled to Instagram @ 2012 Open-sourced @ 2013 Most Productionized Framework @ 2022
Core Philosophy Component-Based Declarative Learn-Once; Write Anywhere
Why react? Reusable Components Performance enhancements Can be used for
mobile apps Unidirectional data flow Simple development of dynamic websites Small Learning Curve
Unidirectional vs Bidirectional
Pre-requisites
Popular Tools Developer Tools Reactide Storybook Bundle Analyzer Why Did
You Render Jest Formik and Yup React Hook Form React Sight React Proto
Material UI UI Frameworks Bootstrap UI Ant Design
Vue & Angular Comparison with
Unidirectional Data Flow Bidirectional
Dashboards & Read Only Great for building Forms and Design
Systems
Maintainability & Stability GOOD POOR
Stars in Github
Job Postings
How to create a project
Without react
With React
Thanks to Component Syntax
State is the king
Events are propagated by the root
Demo
Learning Materials - React GITHUB Page (Link) - React Website
(Link) - React Learning Tutorial (Link) - Material UI (Link) - Carbon (Link) - React in 10 hours Free Code Camp (Link) - React for Beginners (Link) - React Full Course (Link) - React TypeScript (Link)